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 个网址
然后输入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!