admin管理员组文章数量:1558049
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!
版权声明：本文标题：chrome调试手机网页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1727374812a1111581.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论