这是我参与第五届青训营伴学笔记创作活动的第十四天
远程调试协议Webkit 在 2012 年就已经引入，目前所有 Webkit 内核的浏览器都支持这一特性。远程调试协议基于 WebSocket，利用 WebSocket 建立连接 客户端（如DevTools） 和浏览器内核的快速数据通道，Chrome的Devtools仅仅只是Webkit远程调试协议的一个应用案例。
- 通讯模式和消息结构： 对于每个页面的所有操作，远程调试协议将其划分成了不同的命令域，如Browser、Dom、Debugger和Network等等，每个域定义了不同的命令和事件。在开发调试过程中，浏览器内核和远程客户端通过WebSocket发送消息进行通信，消息基本上分两种格式，一种是含有 message id 的，另一种是不含 message id 的，分别代表俩种通讯模式：
- request/response：就如同一个异步调用，通过请求的信息，获取相应的返回结果。这样的通讯必然有一个 message id，否则两方都无法正确的判断请求和返回的匹配状况。
- notification：和第一种不同，这种模式用于由一方单方面的通知另一方某个信息。和 “事件” 的概念类似。
- Chrome的上层封装： 为了更加方便Chrome extension的开发，Chrome调试器扩展API提供了更高级别的API ——Chrome Debugger API。此API隐藏请求ID并处理请求与其响应的绑定，因此允许sendCommand在回调函数调用中处理结果。每个 command 包含 request 和 response 两部分，request 部分指定所要进行的操作以及操作说要的参数，response 部分表明操作状态，成功或失败。
以Debugger Domain为例，
- command结构如下：
- 事件结构如下：
Debugger API： developer.chrome.com/extensions/…
我们可以通过devtools来查看Devtools Extension与浏览器内核实际通信的数据情况，步骤如下：
1、开启开发者工具实验模式：
- 浏览器进入chrome://flags
- 找到Developer Tools Experiments
- 状态改为enable
- 重启浏览器
2、打开协议监控tab
- 点击devtools工具右上角菜单图标，进入“settings”，左边选择“Experiments”tab，将“Protocol Monitor”打上勾
- 关闭devtools后重新打开，点击devtools工具右上角菜单图标，再进入“More Tools”，选择“Protocol monitor"
之后我们便可以看到:
