使用chrome调试Android手机前端页面

很多时候在调试 h5 页面的时候，用浏览器模拟的效果和手机上面不一致，想要找到问题就比较麻烦，因为看不到手机中渲染出来的页面源码，这个时候如果可以在浏览器中看到并且直接调试的话，就会方便很多。

调试要求

确保安卓手机和 pc 端都安装了 chrome 浏览器

具体步骤

1、开启手机的开发者选项，确保 USB 调试保持打开状态。（这里的截图来自 vivo 手机，其他手机大同小异）

2、用 USB 数据线连接手机和电脑，驱动安装好后，在手机上会显示一个允许 USB 调试的的确认框，点击确定。(好像只有第一次连接的时候会出现，后面就不会了，这部手机之前连过，所以没有截到图)

3、打开 pc 端 chrome 浏览器，在地址栏输入 chrome://inspect/#devices，或者 about:inspect。勾选 Discover USB devices，就可以看到手机设备了。

4、打开手机端 chrome 浏览器，输入要调试的页面地址，点击 inspect 即可打开 DevTools，界面和调试浏览器页面一样。

5、点击 inspect 后，如果遇到打开的是一个白屏界面，说明需要翻墙才能使用，一般情况下，第一次使用 inspect 时需要翻墙，以后就会缓存在本地。