Chrome 远程调试协议原理

heywjjj
7,903 阅读3分钟

背景

Chrome devtools大家普遍熟悉可以通过右键inspector或者cmd+opt+j打开控制台进行本地调试。还有一种方法就是可以通过一个浏览器调试另一个浏览器，或者通过usb连接手机调试手机webView。这两种方式都属于在新启一个窗口远程调试目标页面。这个新启的窗口打开了一个html页面（inspector.html），它的长相与内嵌的devtools一样。在inspector.html调试目标页面就像在内嵌devtools里调试一样。

关于协议

官方解释是允许工具对Chrome，Chromium及其他基于Blink的浏览器进行调试、审查的协议。它划分了多个不同的功能模块（域），如DOM, Debugger, Network, Timeline等，每个模块以结构化JSON的形式都定义了一些命令和事件。

远程调试原理

远程调试器页面（inspector.html）能做的事与目标页面内嵌的devtools一样。

启动chrome实例

Chrome的远程调试功能默认关闭的，可以通过--remote-debugging-port命令行创建一个chrome实例进行调试。 如：

sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9527

这里启动Chrome，Chrome会作为Server host一个web app, 这个web app可以通过http://localhost:9527访问

操作chrome标签

获取所有开打标签的信息，返回一个json数组，type为page的为打开中的页面。type可能会有其他类型。

http://localhost:9527/json

会返回：

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9527/devtools/page/7FBA9CF445D4BF16990FEF94A6F32F76",
   "id": "7FBA9CF445D4BF16990FEF94A6F32F76",
   "title": "tigertrade-web",
   "type": "page",
   "url": "http://172.25.7.141:4000/client/quoteMain.html#symbol=GCmain&market=FUT&secType=FUT",
   "webSocketDebuggerUrl": "ws://localhost:9527/devtools/page/7FBA9CF445D4BF16990FEF94A6F32F76"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9527/devtools/page/61EDD947CB27F854C65B34005EFC2A85",
   "id": "61EDD947CB27F854C65B34005EFC2A85",
   "title": "tigertrade-web",
   "type": "page",
   "url": "http://172.25.7.141:4000/client/quoteInfoSide.html#symbol=GCmain&market=FUT&secType=FUT",
   "webSocketDebuggerUrl": "ws://localhost:9527/devtools/page/61EDD947CB27F854C65B34005EFC2A85"
} ]

inspector.html和Chrome host之间通过webSocket建立连接，这个websocket地址就是url中ws参数的值。

其中page/后是page id，每个页面都有一个唯一的page id，chrome就是通过这个id确定哪个是目标页面。页面和chrome 内核之间就是通过这个连接交换数据的。

chrome调试器实例和目标页面实例之间是进程通信，所以inspector.html可以通过chrome调试器实例加载目标页面的source文件，还可以操作目标页面，例如加断点、刷新、记录Network信息等。

  • 关闭一个标签页，传入该页面的id
http://localhost:9527/json/close/7FBA9CF445D4BF16990FEF94A6F32F76
  • 激活标签页
http://localhost:9527/json/activate/7FBA9CF445D4BF16990FEF94A6F32F76
  • 查看chrome和协议的版本信息
http://localhost:9527/json/version

Devtools 的工作原理

当我们在inpector.html上做各种操作时，devtools内部又做了什么呢？

首先devtools的Network面板，查看WS tab，刷新页面，找到一条websocket连接。这就是inspector.html与chrome host之间建立的用来交换数据的ws连接。

扩展

node调试

小结

很多工具都使用了Chrome debugging protocol，包括phantomJS，Selenium的ChromeDriver，本质都是一样的实现，它就相当于Chrome内核提供的API让应用调用。官网列出了很多有意思的工具：链接，因为API丰富，所以才有了这么多的chrome插件。

实现了Remote debugging protocol的node的库：

avatar
文章
阅读
粉丝