[转载]Chrome之远程调试协议（Remote debugging protocol）

mosheng

Chrome之远程调试协议（Remote debugging protocol）<br /> <br /> <br /> #### 一、前言<br /> ******<br /> 放弃phantomJS方案，决定采用[Remote debugging protocol](https://developer.chrome.com/devtools/docs/debugger-protocol)方案来获取性能数据生成har文件。第一，phantomJS还是不稳定、不是真实浏览器环境，第二，Remote debugging protocol调用真实浏览器，更加强大，DIY自由性更高。<br /> <br /> #### 二、Remote debugging protocol简介<br /> ***<br /> Chrome Developer Tools是用HTML，Javascript，CSS编写的chrome开发者工具，然而[Remote debugging protocol](https://developer.chrome.com/devtools/docs/debugger-protocol)就是它用来与浏览器页面(pages)交互和调试的协议通道。采用websocket来与页面建立通信通道，由发送给页面的commands和它所产生的events组成。chrome的开发者工具是这个协议主要的使用者，第三方开发者也可以调用这个协议来与页面交互调试。<br /> <br /> #### 三、启动chrome实例<br /> ***<br /> 在命令行开启一个chrome的实例，加上合适的参数，会自动打开一个chrome。<br /> <br /> ```<br /> chrome --remote-debugging-port=9222 --user-data-dir=<some directory><br /> ```<br /> --user-data-dir 必须得加，然后打开 http://loacalhost:9222 ，就能看到你开启的chrome实例中所有打开的标签页面<br /> <br /> #### 四、操作chrome标签<br /> ***<br /> 获取所有开打标签的信息，返回一个json数组， type 为 page 的为打开中的页面。 webSocketDebuggerUrl就是连接到该标签页的websocket地址。<br /> ```<br /> http://loacalhost:9222/json<br /> ```<br /> 返回<br /> <br /> ```<br /> [ {<br />    "description": "",<br />    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/B7F2D344-197B-4F57-A945-939F29AE2922",<br />    "id": "B7F2D344-197B-4F57-A945-939F29AE2922",<br />    "title": "localhost:9222/json",<br />    "type": "page",<br />    "url": "http://localhost:9222/json",<br />    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/B7F2D344-197B-4F57-A945-939F29AE2922"<br /> }, {<br />    "description": "",<br />    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/575FBA99-453B-40F1-9112-139D995246D6",<br />    "faviconUrl": "https://www.baidu.com/favicon.ico",<br />    "id": "575FBA99-453B-40F1-9112-139D995246D6",<br />    "title": "百度一下，你就知道",<br />    "type": "page",<br />    "url": "https://www.baidu.com/",<br />    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/575FBA99-453B-40F1-9112-139D995246D6"<br /> }, {<br />    "description": "",<br />    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/477810FF-323E-44C5-997C-89B7FAC7B158",<br />    "id": "477810FF-323E-44C5-997C-89B7FAC7B158",<br />    "title": "Worker pid:12089",<br />    "type": "service_worker",<br />    "url": "https://www.google.com.sg/_/chrome/newtab-serviceworker.js",<br />    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/477810FF-323E-44C5-997C-89B7FAC7B158"<br /> } ]<br /> ```<br /> 新建一个标签页，空白页或者带参数默认加载URL，返回创建之后该页面信息的json对象，格式同上。<br /> <br /> ```<br /> http://localhost:9222/json/new<br /> http://localhost:9222/json/new?http://www.baidu.com<br /> ```<br /> 关闭一个标签页，传入该页面的id。<br /> ```<br /> http://localhost:9222/json/close/477810FF-323E-44C5-997C-89B7FAC7B158<br /> ```<br /> 激活标签页。<br /> <br /> ```<br /> http://localhost:9222/json/activate/477810FF-323E-44C5-997C-89B7FAC7B158<br /> ```<br /> 查看chrome和协议的版本信息。<br /> <br /> ```<br /> http://localhost:9222/json/version<br /> ```<br /> #### 五、功能模块域列表<br /> ***<br /> 该协议分为不同的功能模块（[debugger-protocol-viewer](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/)），类似与chrome开发者工具里的不同功能模块。<br /> <br /> * [DOM Debugger](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/DOMDebugger/)<br /> * [Emulation](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Emulation/)<br /> * [Profiler](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Profiler/)<br /> * [Schema](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Schema/)<br /> * [Page](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Page/)<br /> * [Debugger](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Debugger/)<br /> * [Input](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Input/)<br /> * [Runtime](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Runtime/)<br /> * [DOM](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/DOM/)<br /> * [Network](https://chromedevtools.github.io/debugger-protocol-viewer/1-2/Network/)<br /> <br /> 比如 Network中 有一个 Commands 是 clearBrowserCache ， 清除缓存。使用方法就是，用websocket连接到该页面之后用send方法发送一个对象。到本文编写时暂时只支持一个websocket地址只允许一个client连接。<br /> ```<br /> ws.send('{"id": 1, "method": "Network.clearBrowserCache", "params": {}}')<br /> ```<br /> <br /> #### 六、扩展API extension JavaScript API<br /> ****<br /> 有很多扩展应用使用了该协议来与页面做交互调试，官网上有很多[Sample Extensions](https://developer.chrome.com/extensions/samples#search:debugger)<br /> <br /> #### 七、Showcase && 小结<br /> ***<br /> 很多工具都使用了Chrome debugging protocol，包括phantomJS，Selenium的ChromeDriver，本质都是一样的实现，它就相当于Chrome内核提供的API让应用调用。官网列出了很多有意思的工具：链接，因为API丰富，所以才有了这么多的chrome插件。<br /> 实现了Remote debugging protocol的node的库：<br /> <br /> * [chrome-debug-protocol](https://github.com/DickvdBrink/chrome-debug-protocol) 使用了ES6和TypeScript<br /> * [chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface) 官网推荐的<br /> * [chrome-har-capturer](https://github.com/cyrus-and/chrome-har-capturer) 传入url，直接获取har format文件<br /> *

Mia11

Charlie2

潮汐来信

必须支持一下

青瓷裂纹

感谢分享，很给力

已读乱回

必须支持一下

Luke64

感谢分享

江湖大佬

必须支持一下

admin