你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
whilefor

Chrome之远程调试协议(Remote debugging protocol) 0个回复 专栏 @ Nodejs

whilefor 发布于 1 年前

一、前言

放弃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.exe --remote-debugging-port=9222 --user-data-dir=<some directory>

打开http://loacalhost:9222,就能看到你开启的chrome实例中所有打开的标签页面

四、操作chrome标签

  • 获取所有开打标签的信息,返回一个json数组,typepage的为打开中的页面。 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

五、功能模块域列表

该协议分为不同的功能模块域(domains),类似与chrome开发者工具里的不同功能模块。

比如Network中有一个CommandsclearBrowserCache, 清除缓存。使用方法就是,用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的库:

作者社交:Github, weibo, 专栏

等待第一条回复
登录后回复,如无账号,请使用邀请码注册