[转载]Chrome之远程调试协议（Remote debugging protocol）
Chrome之远程调试协议（Remote debugging protocol）
#### 一、前言
******
放弃phantomJS方案，决定采用(https://developer.chrome.com/devtools/docs/debugger-protocol)方案来获取性能数据生成har文件。第一，phantomJS还是不稳定、不是真实浏览器环境，第二，Remote debugging protocol调用真实浏览器，更加强大，DIY自由性更高。
#### 二、Remote debugging protocol简介
***
Chrome Developer Tools是用HTML，Javascript，CSS编写的chrome开发者工具，然而(https://developer.chrome.com/devtools/docs/debugger-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
```
#### 五、功能模块域列表
***
该协议分为不同的功能模块（(https://chromedevtools.github.io/debugger-protocol-viewer/1-2/)），类似与chrome开发者工具里的不同功能模块。
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/DOMDebugger/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Emulation/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Profiler/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Schema/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Page/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Debugger/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Input/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Runtime/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/DOM/)
* (https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/)
比如 Network中 有一个 Commands 是 clearBrowserCache ， 清除缓存。使用方法就是，用websocket连接到该页面之后用send方法发送一个对象。到本文编写时暂时只支持一个websocket地址只允许一个client连接。
```
ws.send('{"id": 1, "method": "Network.clearBrowserCache", "params": {}}')
```
#### 六、扩展API extension JavaScript API
****
有很多扩展应用使用了该协议来与页面做交互调试，官网上有很多(https://developer.chrome.com/extensions/samples#search:debugger)
#### 七、Showcase && 小结
***
很多工具都使用了Chrome debugging protocol，包括phantomJS，Selenium的ChromeDriver，本质都是一样的实现，它就相当于Chrome内核提供的API让应用调用。官网列出了很多有意思的工具：链接，因为API丰富，所以才有了这么多的chrome插件。
实现了Remote debugging protocol的node的库：
* (https://github.com/DickvdBrink/chrome-debug-protocol) 使用了ES6和TypeScript
* (https://github.com/cyrus-and/chrome-remote-interface) 官网推荐的
* (https://github.com/cyrus-and/chrome-har-capturer) 传入url，直接获取har format文件
* {:8_505:}
页:
[1]