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!
