whilefor/blog

Chrome之远程调试协议（Remote debugging protocol）

whilefor opened this issue · 0 comments

whilefor commented

Chrome之远程调试协议（Remote debugging protocol）

一、前言

放弃phantomJS方案，决定采用Remote debugging protocol方案来获取性能数据生成har文件。第一，phantomJS还是不稳定、不是真实浏览器环境，第二，Remote debugging protocol调用真实浏览器，更加强大，DIY自由性更高。

二、Remote debugging protocol简介

Chrome Developer Tools是用HTML，Javascript，CSS编写的chrome开发者工具，然而Remote debugging protocol就是它用来与浏览器页面(pages)交互和调试的协议通道。采用websocket来与页面建立通信通道，由发送给页面的commands和它所产生的events组成。chrome的开发者工具是这个协议主要的使用者，第三方开发者也可以调用这个协议来与页面交互调试。

三、启动chrome实例

在命令行开启一个chrome的实例，加上合适的参数，会自动打开一个chrome。

chrome --remote-debugging-port=9222 --user-data-dir=<some directory>

--user-data-dir 必须得加，然后打开 http://loacalhost:9222 ，就能看到你开启的chrome实例中所有打开的标签页面

四、操作chrome标签

获取所有开打标签的信息，返回一个json数组， type 为 page 的为打开中的页面。 webSocketDebuggerUrl就是连接到该标签页的websocket地址。

http://loacalhost:9222/json

返回

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/B7F2D344-197B-4F57-A945-939F29AE2922",
   "id": "B7F2D344-197B-4F57-A945-939F29AE2922",
   "title": "localhost:9222/json",
   "type": "page",
   "url": "http://localhost:9222/json",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/B7F2D344-197B-4F57-A945-939F29AE2922"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/575FBA99-453B-40F1-9112-139D995246D6",
   "faviconUrl": "https://www.baidu.com/favicon.ico",
   "id": "575FBA99-453B-40F1-9112-139D995246D6",
   "title": "百度一下，你就知道",
   "type": "page",
   "url": "https://www.baidu.com/",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/575FBA99-453B-40F1-9112-139D995246D6"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/477810FF-323E-44C5-997C-89B7FAC7B158",
   "id": "477810FF-323E-44C5-997C-89B7FAC7B158",
   "title": "Worker pid:12089",
   "type": "service_worker",
   "url": "https://www.google.com.sg/_/chrome/newtab-serviceworker.js",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/477810FF-323E-44C5-997C-89B7FAC7B158"
} ]

新建一个标签页，空白页或者带参数默认加载URL，返回创建之后该页面信息的json对象，格式同上。

http://localhost:9222/json/new
http://localhost:9222/json/new?http://www.baidu.com

关闭一个标签页，传入该页面的id。

http://localhost:9222/json/close/477810FF-323E-44C5-997C-89B7FAC7B158

激活标签页。

http://localhost:9222/json/activate/477810FF-323E-44C5-997C-89B7FAC7B158

查看chrome和协议的版本信息。

http://localhost:9222/json/version

五、功能模块域列表

该协议分为不同的功能模块（debugger-protocol-viewer），类似与chrome开发者工具里的不同功能模块。

比如 Network中 有一个 Commands 是 clearBrowserCache ， 清除缓存。使用方法就是，用websocket连接到该页面之后用send方法发送一个对象。到本文编写时暂时只支持一个websocket地址只允许一个client连接。

ws.send('{"id": 1, "method": "Network.clearBrowserCache", "params": {}}')

六、扩展API extension JavaScript API

有很多扩展应用使用了该协议来与页面做交互调试，官网上有很多Sample Extensions

七、Showcase && 小结

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