chrome调试手机网页

待我称王封你为后i 2023-08-17 17:13 101阅读 0赞

# 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 端的设置，查看版本号

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70]

### **手机打开调试模式** ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 1]  
我用的是 红米手机 小米系列的需要进入到 设置 - 我的设备 - 全部参数 - MIUI版本 连续点击，即可进入开发者模式  
然后到更多设置找到开发者模式，把USB调试打开就行（其他手机就自己摸索了）

### **打开 chrome 调试功能** ###

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

这是手机端的截图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 2]

PC端的截图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 3]  
**到这里就结束了吗？ no  
这里才是刚开始!**

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

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

## ##

### 核心步骤 ###

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

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

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

打开 http://ping.chinaz.com

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 4]

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

把可以访问的 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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 5]

OK。一点问题也没有

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 6]  
have a good time!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70]: /images/20230808/8957f0656fdb49118b1342ab5427cea7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 1]: /images/20230808/a68fb4e4156a4d3fa33def665eeb94d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190528115144303.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 3]: /images/20230808/7c997f7e54d84afd8ebe4448e259e008.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 4]: /images/20230808/407716ee96674fb99218aac7fed38a72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 5]: /images/20230808/e959882f028940c18f6831044d04f168.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppb2hvX2NoZW4_size_16_color_FFFFFF_t_70 6]: /images/20230808/b25ebfdcf4b541a1a129a38d6478c69f.png