Chrome devtools大家普遍熟悉可以通过右键inspector或者cmd+opt+j打开控制台进行本地调试。还有一种方法就是可以通过一个浏览器调试另一个浏览器，或者通过usb连接手机调试手机webView。这两种方式都属于在新启一个窗口远程调试目标页面。这个新启的窗口打开了一个html页面（inspector.html），它的长相与内嵌的devtools一样。在inspector.html调试目标页面就像在内嵌devtools里调试一样。

关于协议

官方解释是允许工具对Chrome，Chromium及其他基于Blink的浏览器进行调试、审查的协议。它划分了多个不同的功能模块（域），如DOM, Debugger, Network, Timeline等，每个模块以结构化JSON的形式都定义了一些命令和事件。

远程调试原理

远程调试器页面（inspector.html）能做的事与目标页面内嵌的devtools一样。

启动chrome实例

Chrome的远程调试功能默认关闭的，可以通过--remote-debugging-port命令行创建一个chrome实例进行调试。 如：

sudo /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9527

这里启动Chrome，Chrome会作为Server host一个web app, 这个web app可以通过http://localhost:9527访问

操作chrome标签

获取所有开打标签的信息，返回一个json数组，type为page的为打开中的页面。type可能会有其他类型。

http://localhost:9527/json

会返回：

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9527/devtools/page/7FBA9CF445D4BF16990FEF94A6F32F76",
   "id": "7FBA9CF445D4BF16990FEF94A6F32F76",
   "title": "tigertrade-web",
   "type": "page",
   "url": "http://172.25.7.141:4000/client/quoteMain.html#symbol=GCmain&market=FUT&secType=FUT",
   "webSocketDebuggerUrl": "ws://localhost:9527/devtools/page/7FBA9CF445D4BF16990FEF94A6F32F76"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9527/devtools/page/61EDD947CB27F854C65B34005EFC2A85",
   "id": "61EDD947CB27F854C65B34005EFC2A85",
   "title": "tigertrade-web",
   "type": "page",
   "url": "http://172.25.7.141:4000/client/quoteInfoSide.html#symbol=GCmain&market=FUT&secType=FUT",
   "webSocketDebuggerUrl": "ws://localhost:9527/devtools/page/61EDD947CB27F854C65B34005EFC2A85"
} ]

inspector.html和Chrome host之间通过webSocket建立连接，这个websocket地址就是url中ws参数的值。

其中page/后是page id，每个页面都有一个唯一的page id，chrome就是通过这个id确定哪个是目标页面。页面和chrome 内核之间就是通过这个连接交换数据的。

chrome调试器实例和目标页面实例之间是进程通信，所以inspector.html可以通过chrome调试器实例加载目标页面的source文件，还可以操作目标页面，例如加断点、刷新、记录Network信息等。

• 关闭一个标签页，传入该页面的id

http://localhost:9527/json/close/7FBA9CF445D4BF16990FEF94A6F32F76

• 激活标签页

http://localhost:9527/json/activate/7FBA9CF445D4BF16990FEF94A6F32F76

• 查看chrome和协议的版本信息

http://localhost:9527/json/version