Chrome 提供以下内容 http 接口控制目标浏览器

获取所有可调页面信息

http://127.0.0.1:9222/json

获取调试目标 WebView/blink 的版本号

http://127.0.0.1:9222/json/version

创建新的 tab，并加载 url

http://127.0.0.1:9222/json/new?url

关闭 id 对应的 tab

http://127.0.0.1:9222/json/close/id
webSocketDebuggerUrl 调试页面需要使用的一个 WebSocket 连接。chrome 的 devtool 所有的调试功能都是基于 Remote Debugging Protocol 使用 WebSocket 数据传输。那么这个 WebSocket，我们从上面走 http://127.0.0.1:9222/json 获取的 webSocketDebuggerUrl，每个页面都有自己的不同 webSocketDebuggerUrl。这个 webSocketDebuggerUrl是通过 url 的 query 参数传递给 chrome devtool 的。

chrome 的 devtool 可以从 Chrome 从浏览器中提取 devtool 源码或者从 blink 获取源代码。部署好自己 chrome devtool 代码完成后，下面可以开始 Chrome 进行调试, 浏览器输入内容：

http://path_to_your_devtool/devtool.html?ws=127.0.0.1:9222/devtools/page/ebdace60-d482-4340-b622-a6198e7aad6e
其中 ws 这个参数的值出现在上面 webSocketDebuggerUrl。Chrome 的 devtool 会使用这个 url 创建 WebSocket 调试页面。

如何实现 JavaScript 调试
在进入 Chrome 的 devtool 之后可以调出控制台查看 devtool 的 WebSocket 数据。这个里面有很多数据，我这里只讲跟 JavaScript 调试相关。

图中，对于 JavaScript 调试，有一个很重要的消息，我选择蓝色的消息:

{"id":6,"method":"Debugger.enable"}
然后选择要调试的 JavaScript 我们来看看文件，然后设置断点。 WebSocket 消息：

devtool 像目标 Chrome 发送了 2 条消息

{
"id": 23,
"method": "Debugger.getScriptSource",
"params": {
"scriptId": "103"
}
}
{
"id": 24,
"method": "Debugger.setBreakpointByUrl",
"params": {
"lineNumber": 2,
"url": "https://g.alicdn.com/alilog/wlog/0.2.10/??aplus_wap.js,spm_wap.js,spmact_wap.js",
"columnNumber": 0,
"condition": ""
}
}
收到这些消息后，V8 你做了什么？
先简单看一下 V8 一小段源码片段：

// V8 Debugger.cpp
DispatcherImpl(FrontendChannel* frontendChannel, Backend* backend) : DispatcherBase(frontendChannel), m_backend(backend) {
m_dispatchMap["Debugger.enable"] = &DispatcherImpl::enable;
m_dispatchMap["Debugger.disable"] = &DispatcherImpl::disable;
m_dispatchMap["Debugger.setBreakpointsActive"] = &DispatcherImpl::setBreakpointsActive;
m_dispathMap["Debugger.setSkipAllPauses"] = &DispatcherImpl::setSkipAllPauses;
m_dispatchMap["Debugger.setBreakpointByUrl"] = &DispatcherImpl::setBreakpointByUrl;
m_dispatchMap["Debugger.setBreakpoint"] = &DispatcherImpl::setBreakpoint;
m_dispatchMap["Debugger.removeBreakpoint"] = &DispatcherImpl::removeBreakpoint;
m_dispatchMap["Debugger.continueToLocation"] = &DispatcherImpl::continueToLocation;
m_dispatchMap["Debugger.stepOver"] = &DispatcherImpl::stepOver;
m_dispatchMap["Debugger.stepInto"] = &DispatcherImpl::stepInto;
m_dispatchMap["Debugger.stepOut"] = &DispatcherImpl::stepOut;
m_dispatchMap["Debugger.pause"] = &DispatcherImpl::pause;
m_dispatchMap["Debugger.resume"] = &DispatcherImpl::resume;
m_dispatchMap["Debugger.searchInContent"] = &DispatcherImpl::searchInContent;
m_dispatchMap["Debugger.setScriptSource"] = &DispatcherImpl::setScriptSource;
m_dispatchMap["Debugger.restartFrame"] = &DispatcherImpl::restartFrame;
m_dispatchMap["Debugger.getScriptSource"] = &DispatcherImpl::getScriptSource;
m_dispatchMap["Debugger.setPauseOnExceptions"] = &DispatcherImpl::setPauseOnExceptions;
m_dispatchMap["Debugger.evaluateOnCallFrame"] = &DispatcherImpl::evaluateOnCallFrame;
m_dispatchMap["Debugger.setVariableValue"] = &DispatcherImpl::setVariableValue;
m_dispatchMap["Debugger.setAsyncCallStackDepth"] = &DispatcherImpl::setAsyncCallStackDepth;
m_dispatchMap["Debugger.setBlackboxPatterns"] = &DispatcherImpl::setBlackboxPatterns;
m_dispatchMap["Debugger.setBlackboxedRanges"] = &DispatcherImpl::setBlackboxedRanges;
}
你会发现，V8 有 m_dispatchMap 这样一个 Map。专门用来处理所有 JavaScript 调试相关的处理。
其中就有本文即将重点讲述的:

Debugger.enable
void V8Debugger::enable() {
if (m_enableCount++) return;
DCHECK(!enabled());
v8::HandleScope scope(m_isolate);
v8::Debug::SetDebugEventListener(m_isolate, &V8Debugger::v8DebugEventCallback,
v8::External::New(m_isolate, this));
m_debuggerContext.Reset(m_isolate, v8::Debug::GetDebugContext(m_isolate));
compileDebuggerScript();
}
这个接口的名称叫 Debugger.enable，但是收到这条消息，V8 其实就干了两件事情事情：

SetDebugEventListener：
给 JavaScript 调试安装监听器，并设置 v8DebugEventCallback 这个回调函数。JavaScript 所有的调试事件，都会被这个监听器捕获，包括：JavaScript 异常停止，断点停止，单步调试等等。

compileDebuggerScript:
编译 V8 内置的 JavaScript 文件 debugger-script.js。由于这文件比较长，我这里就不贴出来了，感兴趣的同学点击这个链接进行查看源码。debugger-script.js 主要是定义了一些针对 JavaScript 断点进行操作的函数，例如设置断点、查找断点以及单步调试相关的函数。那么这个 debugger-script.js 文件，被 V8 进行编译之后，保存在 global 对象上，等待对 JavaScript 进行调试的时候，被调用。

Debugger.getScriptSource
在 Chrome 解析引擎解析到