admin管理员组

文章数量:1559036

chrome 手机调试

webkit是一个开源的浏览器引擎,与之相对应的引擎有gecko(mozilla firefox 等使用)和trident(ie 使用)。
同时webkit也是苹果mac os x体统引擎框架版本的名称,主要用于safari,dashboard,mail 和其他一些mac os x 程序。

  • google chrome 谷歌浏览器
  • safari浏览器
  • 搜狗高速浏览器
  • 遨游浏览器3
  • qq浏览器
  • 360极速浏览器
  • 世界之窗浏览器
  • 阿里云浏览器
    webkit是一个开源的项目。

写在前面

相信很多人都试过,在电脑调试一点问题都没有,可是到了手机端各种问题,兼容、数据捕获 等问题
很多时候我们都是通过 vconsole 进行调试。(至于怎么用就自行百度,这里不展开)。

可是 vconsole 用着也不方便,每次只能打印一个变量,那能不能在手机端,也使用 chrome 的调试控制台来进行断点和 css 调试?!

需要准备的材料
1、pc 端的 chrome 浏览器
2、安卓手机 安卓 chrome 浏览器
3、数据线

这里要注意 pc 端的 chrome 需要比手机端的 chrome 版本要高才行(听说是这样的)。
打开 pc 端的设置,查看版本号

手机打开调试模式

进入手机设置,找到开发者模式,然后启用 usb 调试


我用的是 红米手机 小米系列的需要进入到 设置 - 我的设备 - 全部参数 - miui版本 连续点击,即可进入开发者模式
然后到更多设置找到开发者模式,把usb调试打开就行(其他手机就自己摸索了)

打开 chrome 调试功能

  • 打开开发者模式
  • 手机连上电脑
  • 打开手机的 chrome
  • 打开 chrome 浏览器 访问 chrome://inspect/#devices
  • 打开需要调试的网页(比如打开百度)
  • 点击inspect就是调试了。

这是手机端的截图

pc端的截图


到这里就结束了吗? no
这里才是刚开始!

你会发现打开的空白页面,等了好久,换来的只是 404 打不开对应的页面

因为你没有使用科学上网。那是不是不科学上网就不能用调试了? 那我写这个文章也没有意义了!

 

核心步骤

打开调试发现显示 404 是因为调试工具需要访问
chrome-devtools-frontend.appspot 和
chrometophone.appspot

因为都是外网环境,自然无法访问了

我们可以通过host文件方式,寻找国内可以访问的 ip 地址。来访问这 2 个网址

打开 http://ping.chinaz

然后输入chrometophone.appspot 进行搜索,也是稍等片刻

发现有好多是超时的,有些是其他国家的,不过香港和台湾还有可以访问的!

把可以访问的 ip 地址添加到 host 文件去

我挑了这么 2 个 ip

172.217.161.180 chrome-devtools-frontend.appspot
172.217.161.180 chrometophone.appspot

添加完后,访问一下 chrome-devtools-frontend.appspot

ok。一点问题也没有

然后就是重复第 3 步。重新点击 inspect

大功告成!剩下就是控制台的骚操作了!


have a good time!

本文标签: 网页