阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Chrome 开发者工具 远程调试协议

      远程调试协议

      在底层,Chrome 开发者工具是用 HTML,JavaScript 和 CSS 写的 Web 应用程序。在 Javascript 运行时,它提供一个特殊的绑定,这允许它与 chrome 网页进行交互并且容许装载它们。交互协议包括被发送到页面的命令,和该页面生成的事件。尽管 Chrome 开发者工具是该协议的主要客户,其中包括远程调试(remote debugging,但有很多办法可以让第三方能够使用它,并进行浏览器页面准确装载。我们将它描述在下面:

      定义协议(Protocol)

      交互协议包括发送到页面到 JSON 数据格式的命令和页面生成的事件。我们在 Bink("upstream") 中定义这个协议,这样,基于 Blink 的浏览器都能支持它。

      稳定版本(Stable)

      调试协议1.1版(Debugger protocol version 1.1)是目前协议发布版本中最稳定的版本

      对于谷歌 Chrome 31,我们致力于支持 V1.1 版本。该协议的所有后续 1.* 版本将是 1.1 向后兼容。我们的协议向后兼容性的规范是:

      • 没有命令或事件从协议中删除。
      • 无需参数被添加到命令。
      • 无需参数从命令响应或事件中删除。

      以前的版本:Protocol v1.0 针对 Chrome 18 发布和支持的。Protocol v0.1 Chrome 16 发布和支持的。

      Alpha

      tip-of-tree protocol 是易变的的,可能在任何时候都会中断。然而,它有着协议的全部功能,稳定的发布版本是他的一个子集。它没有支持保证它引入的功能的向后兼容性。你可以自己使用它与 Google Canary 建立连接。

      tip-of-tree 协议是在调试协议视图中 debugger protocol viewer 更具有可读性。

      监测协议通信(Sniffing the protocol)

      你可以检查 Chrome DevTools 如何使用该协议。探索新功能时,这是特别方便。首先,在调试端口开启状态运行 Chrome 浏览器:

      /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 http://localhost:9222 http://chromium.org
      

      然后,选择在视察_页面 ( Inspectable Pages ) 列表_中的选取 Chromium Projects 子项目。既然 DevTools 开启,处于全屏状态,打开 DevTools 来对其进行监测。 CMD-R 在新的检测器中,作第一次重启。现在前往 Network 面板,通过 WebSocket 的过滤器,选择连接,然后单击框架选项卡。现在你可以很容易地看到 WebSocket 活动的框架,是你使用的 DevTools 的第一个实例。

      调试过线(Debugging over the wire)

      开发者工具前段可以连接到远程运行的 Chrome 实例进行调试。为了让此方案起作用,你应该使用远程调试端口命令行切换来启动你主机的 Chrome 实例:

      chrome.exe --remote-debugging-port=9222
      

      然后,你就可以开始一个客户端 Chrome 实例,使用单独的用户配置文件:

      chrome.exe --user-data-dir=
      

      现在,你可以从客户端导向指定的端口,获取任何调试的选项卡:http://localhost:9222

      你会发现开发者工具交互界面与内嵌式的是相同的,这是为什么:

      • 当你从客户端浏览器导向到远程的 Chrome 端口,开发者工具前端都是被主机 Chrome 服务着的,就如同 Web 服务器服务 Web 应用程序。
      • 它通过 HTTP 通信获取 HTML,JavaScript 和 CSS 文件
      • 一旦加载,开发者工具建立一个 Web Socket 连接至主机,并开始交换 JSON 数据。

      在这种情况下,你可以用你自己的实现替代开发者工具前端。与导向在 http://localhost:9222 端口的 HTML 页面不同,你的应用程序可以发现可用的页面通过请求:

      http://localhost:9222/json

      并得到一个 JSON 对象和关于有着 WebSocket 地址的可检测网页的信息,你可以把他们装载到页面中。

      调试浏览器远程实例或附着到嵌入式设备时,远程调试是特别有用的。Blink 端口业主负责暴露调试连接给外部用户。

      调试协议客户端

      许多应用程序和库已经使用该协议。一些用来收集性能数据,其他一些用来在另一个编辑器中进行断点调试。Node.js 和 Python 中有包含着原始协议的库。

      许多客户端展示在这里:Showcased Debugging Protocol Clients

      使用调试器扩展 API

      为了允许第三方用此协议进行交互,我们介绍了 chrome.debugger 扩展 API,来暴露这个 JSON 消息传输接口。其结果是,你不仅可以获取远程运行的 Chrome 实例,而且可以用自己的插件它装载它。

      Chrome 调试器扩展 API 在命令域提供了一个高等级的 API,name 和 body 在 SendCommand 调用中显式设置。这个 API 隐藏了请求 ID ,应答处理其响应,因此它允许 SendCommand 在回调函数中提交结果报告。也可以和其他扩展 API 结合着使用。

      如果你正在开发一个基于 Web 的 IDE ,你应该实现一个扩展功能,暴露你的网页调试功能,你的 IDE 就能够打开目标应用的页面,设置断点,在控制台计算表达式,实时编辑 JavaScript 和 CSS ,显示活动 DOM ,网络交互和任何其他任何开发者工具正在提交的方面。

      开放嵌入式开发工具将终止 (terminate) 远程连接,从而分离扩展。

      并发协议客户

      我们目前不支持多个客户端同时连接到协议。这包括打开工具时而另一个客户端处于连接状态。在 bug 跟踪系统中,crbug.com/129539 有如下条件;你可以为电子邮件更新标记。

      当处于 disconnnection 状态下,即将下线的客户将获得一个 detached 事件。例如:{"method":"Inspector.detached","params":{"reason":"replaced_with_devtools"}}断开连接后,一些应用程序选择暂停他们的状态,并提供一个重新连接按钮。

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录