介绍 ​

作为前端开发，我们每天都会用 Chrome DevTools 调试 Chrome 的网页，但其实它还可以远程调试 Android 手机和 IOS 手机的网页。

那 Chrome DevTools 如何远程调试 Android/IOS 网页呢？它的实现原理是什么？

Android 平台巧妙地使用 ADB forward 能力，解决了 PC 上的 WebUI 与 Android 手机中的 Chrome 内核的连接问题。轻松了实现了远程调试的能力，不要小瞧这一实现，这对前端开发者效率提升是极大的。因为前端开发者的工作环境，目前来看基本是在 PC （Windows、Mac、Linux 统称为 PC）下，通过远程调试能力的实现，让移动端的开发实现了所见即所得。

正是 Chrome 团队基于网络通信方式，作为 DevTools 底层通信框架，才为后来的 Web 开发团队百花齐放奠定了基础。TCP/IP 是互联网的基础，没有哪种语言或平台不支持 TCP/IP 的。DevTools 选型 TCP/IP 方式直接抹平了不同平台或系统框架之间的差异。

远程调试 Android 网页 ​

用数据线把安卓手机和电脑连接起来，在手机设置里打开 USB 调试：

然后在 chrome 打开 chrome://inspect 页面，勾选 Discover USB devices（默认是勾选的）：

这时候下面就会出现一个提示：请在设备上接受 debugging 会话

在手机上点击确定，就会建立调试会话：

下面就会列出所有可以调试的网页：

浏览器里的网页，或者 APP 调试包的 webview 的网页都会列出来。

点击 inspect 就可以调试了：

可以审查元素：

远程调试 IOS 网页 ​

ios 网页调试只能用 safari 浏览器。

打开偏好设置 > 高级，勾选显示“开发”菜单：

之后就会出现“开发”菜单，下面会展示所有连接的设备：

它会提示你在 iPhone 上启用网页检查器。

这个是在 设置 > safari 浏览器 > 高级里开启的：

网页检查器下面也有这么一行提示：

之后在 Safari 浏览器里打开一个页面，比如 baidu.com：

在电脑的 Safari 浏览器的开发菜单里就会显示出这个网页：

不只是 Safari 浏览器，一些 APP 里内嵌的网页开启了调试的话也可以连接。

之后就可以在电脑上远程调试 iphone 上的网页了：

原理 ​

Chrome DevTools 被设计成了和 Chrome 分离的架构，两者之间通过 WebSocket 通信，设计了专门的通信协议： Chrome DevTools Protocol。

这样只要实现对接 CDP 协议的 ws 服务端，就可以用 Chrome DevTools 来调试，所以 Chrome DevTools 可以用来调试浏览器的网页、调试 Node.js，调试 Electron 等。

那自然也就可以远程调试安卓手机的网页了，只要开启了 USB 调试，那手机和电脑就可以做网络通信，从而实现基于 CDP 的调试。

这个 CDP 的调试协议是 json 格式的，如果想看它传输了什么也是可以的：

在 Chrome DevTools 的设置里开启 Protocol Monitor：

然后在 more tools 里打开 Protocol Monitor 面板：

然后你就可以在 Protocol Monitor 面板里看到所有的 CDP 协议的数据交互了：

这就是调试的实现原理。