0x01、工具介绍
你的网页内容在移动设备上的体验可能和电脑上完全不同。
Chrome DevTools 提供了远程调试功能，这让你可以在安卓设备上实时调试开发的内容。
0x02、效果展示
0x03、工具优点
- 在浏览器选项卡中调试网站。
- 使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器。
- 调试手机上的JS比如touchStart、touchEnd事件、CSS样式。
- 可以禁用手机浏览器缓存，获取最新代码。
0x04、使用条件
- 安装 Chrome 32 或者之后的版本。
- 连接安卓设备用的 USB 线缆。
- 对于通过浏览器调试：安卓 4.0 以上并且安装了 Chrome for Android。
- 对于通过应用调试：安卓 4.4 以上并且应用包括可用于调试的 WenView 组件。
0x05、如何使用
国产手机开发者模式默认为禁用状态，需要自行开启，开启方法在百度搜索xxx牌手机开启开发者模式
0x06、端口转发，手机访问开发机的localhost
Chrome for Android 上的端口转发使得在移动设备上测试你所开发的站点变得轻松很多。其工作原理是在你的移动设备上创建一个监听 TCP 端口，该端口映射到你的开发机器上的一个指定 TCP 端口。这些端口之间的流量通过 USB 来传输，因此该连接不需要依赖于你的网络环境。
- 网络环境
你的手机不一定都能直接连接到你开发用的服务器，他们可能处于不同的网络环境下。
你也可能在一个受限的企业网络下进行开发。
0x07、文章参考
- 在你开发用的机器上打开 chrome://inspect。
- 点击 Port Forwarding。
- 在 Device port 后面输入你的安卓设备希望监听的端口号（默认是8080）。
- 在 Host 后面输入你的 web 应用运行环境的 IP 地址（或者主机名称）以及端口号。
- 检查 Enable port forwarding 是否已经勾选。
- 点击 Done 来完成设置。
0x08、文章参考
在安卓设备上使用 Chrome 远程调试功能 - Chrome 开发工具指南 - 极客学院Wiki
Android 设备的远程调试入门 Chrome DevTools Google Developers
