阅读 1576

Chrome 远程调试协议原理

背景

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数组,typepage的为打开中的页面。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的库: