手机网站调试神器之chrome控制台

本是古典何须时尚 2021-10-23 13:34 2440阅读 0赞

现在真是一个信息化的时代，每个人手里都拿着一款智能机，上班下班走路坐车之余都会玩玩手机，上上网。于是作为广大网站媒体来说，争抢手机市场无疑是刻不容缓。对于我们Web前端工程师来说，了解并掌握手机编程的任务也是刻不容缓。下面为大家推荐一款比较不错的手机调试软件chrome。

经常调试手机网站的码农们，一定会为手机调试软件而发愁，找不到比较合适的手机网站调试工具。我也是无意中发现chrome控制台的软件设置中就具备了各种手机屏幕的尺寸。我们只要用它就很方便完成调试工作了。

下面介绍一下chrome调试的方法。

1、打开chrome(下面的步骤如果不成功，请先升级chrome浏览器)

2、按F12打开Developer Tools,之后点击developer Tools右下角的设置icon,如图(图1-1)

![梦龙小站][SouthEast]

图1-1

3、点击设置icon后，就会看到弹出一个新的界面，如下图(图1-2):

![梦龙小站][SouthEast 1]

图1-2

4、在上图所示界面点击相应选项，刷新页面就能看到chrome使用对应设备上的相应浏览器渲染该页面，下图(图1-3)展示了chrome可以模拟的设备：

![梦龙小站][SouthEast 2]

图1-3

5、下面讲下该工具每个功能项的意思

User Agent : 设置用户代理，告诉浏览器模拟何种设备中的哪个浏览器

Device metrices: 选择后，会根据User Agent设置页面的大小，默认值是模拟设置的大小，

Fit in window ：点选后，页面大小会根据窗口大小进行适配

Override Geolocation：手动设置经纬度，选择后可以输入经度和纬度的值 Emulate position unavailable用来开关是否可以使用地理位置

Override Device Orientation：设置设备方向，

Emulate touch events：模拟触摸屏事件

Emulate CSS media：模拟css 样式屏幕如 print screen tv等

尽管市面上有众多的手机网站调试工具，但是普遍都得需要下载安装，使用起来非常麻烦。而chrome自带的功能就可以满足我们普遍手机网站调试人员的需求，何乐而不为呢。

[SouthEast]: /images/20211023/330033c267314afa907df4606a08d8c8.png
[SouthEast 1]: /images/20211023/c170b7c880d049f98f235213a232911b.png
[SouthEast 2]: /images/20211023/337edbd048fd4921b33e7f7cedfc10f0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2440人围观）

还没有评论，来说两句吧...

相关阅读

相关手机调试打开控制台方法vconsole

功能简介：手机调试网页，看不到控制台，无法获取接口相关信息，引入vconsole可以实现代码演示： <!DOCTYPE html> <html>

比眉伴天荒/ 2023年10月01日 04:58/ 0 赞/ 27 阅读

相关 chrome调试手机网页

chrome 手机调试 Webkit是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（IE 使用）。同

待我称王封你为后i/ 2023年08月17日 17:13/ 0 赞/ 99 阅读

相关 Python调试神器

今天就来一小点知识。首先是一个python的库，还有一个是自己最近遇到的一件小事。 Pysnooper slogan就是 `不要再使用打印机进行调试`。 > [htt

逃离我推掉我的手/ 2022年10月29日 03:17/ 0 赞/ 272 阅读

相关 iOS 调试神器 NSLogger

什么 NSLogger 先来传送门：[https://github.com/fpillet/NSLogger][https_github.com_fpillet_NSL

男娘i/ 2022年10月02日 11:53/ 0 赞/ 257 阅读

相关手机 Python 编程神器！

点击上方“逆锋起笔”，公众号回复编程资源领取大佬们推荐的学习资料来源：软件测评说手机编程软件有很多，大部分都很难使用，操作不灵活，甚至不能安装第三方库。

逃离我推掉我的手/ 2022年08月28日 01:52/ 0 赞/ 220 阅读

相关手机网站调试神器之chrome控制台

　　现在真是一个信息化的时代，每个人手里都拿着一款智能机，上班下班走路坐车之余都会玩玩手机，上上网。于是作为广大网站媒体来说，争抢手机市场无疑是刻不容缓。对于我们Web前端工程

本是古典何须时尚/ 2021年10月23日 13:34/ 0 赞/ 2441 阅读

相关 web 调试神器 eruda

一，Eruda是什么 Eruda 是一个专为前端移动端设计的调试面板，类似`Chrome DevTools` 的迷你版，其主要功能包括：捕获 `console` 日志、检查元

柔情只为你懂/ 2021年09月21日 10:40/ 0 赞/ 538 阅读

相关 web 调试神器 eruda

一，Eruda是什么 Eruda 是一个专为前端移动端设计的调试面板，类似`Chrome DevTools` 的迷你版，其主要功能包括：捕获 `console` 日志、检查元

野性酷女/ 2021年09月20日 14:58/ 0 赞/ 443 阅读

相关堪称神器的 Chrome 插件

点击上方“Web项目聚集地”，选择“置顶”公众号重磅干货，第一时间送达![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] 来源： http://t

谁借莪１个温暖的怀抱￠/ 2021年08月01日 02:21/ 0 赞/ 431 阅读

相关手机网站form表单check神器——Validform

手机端的商城项目已经上线了很久，但一直留有令人耿耿于怀的问题——form表单没有找到合适的validate，也就是说项目的input标签check只是做在了后台，前端并没有进行

朱雀/ 2021年05月10日 11:18/ 0 赞/ 481 阅读