chrome调试手机网页

chrome 手机调试

写在前面

相信很多人都试过，在电脑调试一点问题都没有，可是到了手机端各种问题，兼容、数据捕获等问题
很多时候我们都是通过 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.com 和
chrometophone.appspot.com

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

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

打开 http://ping.chinaz.com

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

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

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

我挑了这么 2 个 IP

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

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

OK。一点问题也没有

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

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

have a good time!