深入理解 Node.js 的 Inspector

靳哲發表於 2021-8-24 09:35:00

<blockquote data-tool="mdnice编辑器">
<code>Node.js</code> 提供的 <code>Inspector</code> 非常强大，不仅可以用来调试 <code>Node.js</code> 代码，还可以实时收集 <code>Node.js</code> 进程的 <code>Heap Snapshot</code>、<code>Cpu Profile</code> 等数据，同时支持静态、动态开启，是一个非常强大的工具，也是我们调试和诊断 <code>Node.js</code> 进程非常好的方式。本文从使用和原理详细讲解 <code>Node.js</code> 的 <code>Inspector</code>。
</blockquote>
<code>Node.js</code> 的文档中对 <code>Inspector</code> 的描述很少，但是如果深入探索，其实里面的内容还是挺多的。我们先看一下 <code>Inspector</code> 的使用。
<h1 data-tool="mdnice编辑器">1 Inspector 的使用</h1>
<h2 data-tool="mdnice编辑器">1.1  本地调试</h2>
我们先从一个例子开始，下面是一个简单的 HTTP 服务器。
<div class="cnblogs_code">
<pre data-tool="mdnice编辑器"><code>const http = require('http'); http.createServer((req, res) => {     res.end('ok'); }).listen(80);</code></pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
然后我们以 <code>node --inspect httpServer.js</code> 的方式启动。我们可以看到以下输出。
<pre data-tool="mdnice编辑器"><code>Debugger listening on ws://127.0.0.1:9229/fbbd9d8f-e088-48cc-b1e0-e16bfe58db44 For help, see: https://nodejs.org/en/docs/inspector </code></pre>
<code>9229</code> 端口是 <code>Node.js</code> 默认选择的端口，当然我们也可以自定义，具体可参考 <code>Node.js</code> 官方文档。这时候我们去浏览器打开开发者工具，菜单栏多了一个调试 Node.js 的按钮。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092323617-1700955024.png" alt="" loading="lazy">
 
 
点击这个按钮。我们可以看到以下界面（点击切换到 Sources Tab）。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092334646-1973873324.png" alt="" loading="lazy">
 
 
我们可以选择某一行代码打断点，比如我在第三行，这时候我们访问 <code>80</code> 端口，开发者工具就会停留在断点处。这时候我们可以看到一些执行上下文。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092342354-325221626.png" alt="" loading="lazy">
 
 
<h2 data-tool="mdnice编辑器">1.2 远程调试</h2>
但很多时候我们可能需要远程调试。比如我在一台云服务器上部署以上服务器代码。然后执行
<div class="cnblogs_code">
<pre>node --inspect=0.0.0.0:8888 httpServer.js</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
我们打开开发者工具发现按钮置灰或者找不到我们远程服务器的信息。这时候我们需要用另一种方式，通过在浏览器url输入框输入：
<div class="cnblogs_code">
<pre>devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws={host}:{port}/{path} </pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
的方式（替换 <code>{}</code> 里面的内容为你执行 <code>Node.js</code> 时输出的信息），浏览器就会去连接指定的地址，比如执行上面的命令输出的是 <code>ws://0.0.0.0:8888/f6e42278-d915-48dc-af4d-453a23d330ab</code>，假设公网IP是 1.1.1.1。那么最后浏览器url输入框里就填入 <code>devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=1.1.1.1:8888/f6e42278-d915-48dc-af4d-453a23d330ab</code> 就可以开始调试了，这种方式比较适合于常用的场景。
<h2 data-tool="mdnice编辑器">1.3 自动探测</h2>
如果是我们自己调试的话，1.2 这种方式看起来就有点麻烦，我们可以使用浏览器提供的自动探测功能。
<ol class="list-paddingleft-2" data-tool="mdnice编辑器">
<li>URL 输入框输入 <code>chrome://inspect/#devices</code> 我们会看到以下界面</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092428034-1003117035.png" alt="" loading="lazy">
 
 
<ol class="list-paddingleft-2" start="2" data-tool="mdnice编辑器">
<li>点击 <code>configure</code> 按钮，在弹出的弹框里输入你远程服务器的地址</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092436441-736431988.png" alt="" loading="lazy">
 
 
<ol class="list-paddingleft-2" start="3" data-tool="mdnice编辑器">
<li>配置完毕后，我们会看到界面变成这样了（或者打开新的 Tab，我们看到开发者工具的调试按钮也变亮了）。</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092444596-2008531301.png" alt="" loading="lazy">
 
 
<ol class="list-paddingleft-2" start="4" data-tool="mdnice编辑器">
<li>这时候我们点击 <code>inspect</code> 按钮、<code>Open dedicated DevTools for Node</code> 按钮或者打开新 Tab 的开发者工具，就可以开始调试，而且还可以调试 <code>Node.js</code> 的原生 JS 模块。</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092453657-1565200573.png" alt="" loading="lazy">
 
 
<h2 data-tool="mdnice编辑器">1.4 收集数据</h2>
<code>V8 Inspector</code> 是一个非常强大的工具，调试只是它其中一个能力，他还可以获取 <code>Heap Snapshot</code>、<code>CPU Profile</code> 等数据，具体能力请参考文章后面列出的指令文档和 <code>Chrome Dev Tools</code>。
<ol class="list-paddingleft-2" data-tool="mdnice编辑器">
<li>收集 Cpu Profile 信息</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092504097-1406547093.png" alt="" loading="lazy">
 
 
<ol class="list-paddingleft-2" start="2" data-tool="mdnice编辑器">
<li>获取 Heap Snapshop</li>
</ol>
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092513867-52068476.png" alt="" loading="lazy">
 
 
<h2 data-tool="mdnice编辑器">1.5 动态开启 Inspector</h2>
默认打开 <code>Inspector</code> 能力是不安全的，这意味着能连上服务器的客户端都能通过协议控制 Node.js 进程（虽然 URL 并不容易猜对），通常我们是在 Node.js 进程出现问题的时候，动态开启 Inspector，我们看一下下面的例子。
<div class="cnblogs_code">
<pre>const inspector = require('inspector');
const http = require('http');

let isOpend = false;

function getHTML() {
return `<html>
 <meta charset="utf-8" />
 <body>
 复制到新 Tab 打开该 URL 开始调试 devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=${inspector.url().replace("ws://", '')}
 </body>
</html>`;
}

http.createServer((req, res) => {
if (req.url == '/debug/open') {
 // 还没开启则开启
 if (!isOpend) {
 isOpend = true;
 // 打开调试器
 inspector.open();
 }
 // 返回给前端的内容
 const html = getHTML() ;
 res.end(html);
} else if (req.url == '/debug/close') {
 // 如果开启了则关闭
 if (isOpend) {
 inspector.close();
 isOpend = false;
 }
 res.end('ok');
} else {
res.end('ok');
}
}).listen(80);</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
当我们需要调试的时候，通过访问 /debug/open 打开调试器。前端界面可以看到以下输出。
<div class="cnblogs_code">
<pre>复制到新 Tab 打开该 URL 开始调试 devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/9efd4c80-956a-4422-b23c-4348e6613304</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
接着新开一个 Tab，然后复制上面的 URL，粘贴到浏览器 URL 地址栏访问，我们就可以看到调试页面。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092545421-2060080178.png" alt="" loading="lazy">
 
 
然后打个断点，接着新开一个 Tab 访问 <code>http://localhost</code> 就可以进入调试，调试完成后访问 /debug/close 关闭调试器。浏览器界面就会显示断开连接了。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092554399-87486153.png" alt="" loading="lazy">
 
 
以上方式支持调试和收集数据，如果我们只是需要收集数据，还有另一种动态开启 <code>Inspector</code> 的方式
<div class="cnblogs_code">
<pre>const http = require('http');
const inspector = require('inspector');
const fs = require('fs');

function getCpuprofile(req, res) {
// 打开一个和 V8 Inspector 的会话
const session = new inspector.Session();
session.connect();
// 向V8 Inspector 提交命令，开启 Cpu Profile 并收集数据
session.post('Profiler.enable', () => {
session.post('Profiler.start', () => {
 // 收集一段时间后提交停止收集命令
 setTimeout(() => {
 session.post('Profiler.stop', (err, { profile }) => {
 // 把数据写入文件
 if (!err) {
 fs.writeFileSync('./profile.cpuprofile', JSON.stringify(profile));
 }
 // 断开会话
 session.disconnect();
 // 回复客户端
 res.end('ok');
 });
 }, 3000)
});
});
}

http.createServer((req, res) => {
if (req.url == '/debug/getCpuprofile') {
 getCpuprofile(req, res);
} else {
 res.end('ok');
}
}).listen(80);</pre>
</div>
 
<pre data-tool="mdnice编辑器"><code> </code></pre>
我们可以通过 <code>Inspector Session</code> 的能力，实时和 <code>V8 Inspector</code> 交互而不需要启动一个 <code>WebSocket</code> 服务。本地调试时还可以在 <code>VSCode</code> 里点击 <code>Profile</code> 文件直接看到效果。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092613867-1256929084.png" alt="" loading="lazy">
 
 
<h1 data-tool="mdnice编辑器">2 Inspector 调试的原理</h1>
下面以通过 URL 的方式调试（可以看到 Network ），来看看调试的时候都发生了什么，浏览器和远程服务器建立连接后，是通过 WebSocket 协议通信的，下面是一次通信的信息。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092625647-636730067.png" alt="" loading="lazy">
 
 
我们看一下这命令是什么意思（具体可以参考 Inspector 协议文档）。
<blockquote data-tool="mdnice编辑器">
Debugger.scriptParsed # Fired when virtual machine parses script. This event is also fired for all known and uncollected scripts upon enabling debugger.
</blockquote>
从说明中我们看到，当 V8 解析脚本的时候就会触发这个事件，告诉浏览器相关的信息。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092636819-2041461403.png" alt="" loading="lazy">
 
 
我们发现返回的都是一些元数据，没有脚本的具体代码内容，这时候浏览器会再次发起请求（点击对应脚本对应的 JS 文件时），
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092647111-1170654950.png" alt="" loading="lazy">
 
 
我们看到这个脚本的 scriptId 是 103。所以请求里带了这个 scriptId。对应的请求 id 是 11。接着看一下响应。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092657781-1178811256.png" alt="" loading="lazy">
 
 
至此，我们了解了获取脚本内容的过程，然后我们看看调试的时候是怎样的过程。当我们在浏览器上点击某一行设置断点的时候，浏览器就会发送一个请求。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092706022-715425921.png" alt="" loading="lazy">
 
 
这个命令的意义顾名思义，我们看一下具体定义：
<blockquote data-tool="mdnice编辑器">
Debugger.setBreakpointByUrl # Sets JavaScript breakpoint at given location specified either by URL or URL regex. Once this command is issued, all existing parsed scripts will have breakpoints resolved and returned in locations property. Further matching script parsing will result in subsequent breakpointResolved events issued. This logical breakpoint will survive page reloads.
</blockquote>
接着服务返回响应。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092714909-1568469928.png" alt="" loading="lazy">
 
 
这时候我们从另外一个 Tab 访问 80 端口，服务器就会在我们设置的断点处停留，并且通知浏览器。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092721747-297609879.png" alt="" loading="lazy">
 
 
我们看一下这个命令的意思。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092729520-1271195414.png" alt="" loading="lazy">
 
 
这个命令就是当服务器执行到断点时通知浏览器，并且返回执行的一些上下文，比如执行到哪个断点停留了。这时候浏览器侧也会停留在对应的地方，当我们 hover 某个变量时，就会看到对应的上下文。这些都是通过具体的命令获取的数据。就不一一分析了。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092737359-243097081.png" alt="" loading="lazy">
 
 
<h2 data-tool="mdnice编辑器">3 Node.js Inspector 的实现</h2>
大致了解了浏览器和服务器的交互过程和协议后，我们再来深入了解一下关于 Inspector 的一些实现。当然这里不是分析 V8 中 Inspector 的实现，而是分析如何使用 V8 的 Inspector 以及 Node.js 中关于 Inspector 的实现部分。
当我们以以下方式执行应用时
<div class="cnblogs_code">
<pre>node --inspect app.js</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<h2 data-tool="mdnice编辑器">3.1 初始化</h2>
Node.js 在启动的过程中，就会初始化 Inspector 相关的逻辑。
<div class="cnblogs_code">
<pre>inspector_agent_ = std::make_unique<inspector::Agent>(this);</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
Agent 是负责和 <code>V8 Inspector</code> 通信的对象，创建完后接着执行 <code>env->InitializeInspector({})</code> 启动 <code>Agent</code>。
<div class="cnblogs_code">
<pre>inspector_agent_->Start(...);</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
Start 继续执行 <code>Agent::StartIoThread</code>。
<div class="cnblogs_code">
<pre>bool Agent::StartIoThread() {
io_ = InspectorIo::Start(client_->getThreadHandle(), ...);
return true;
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>StartIoThread</code> 中的 <code>client_->getThreadHandle()</code> 是重要的逻辑，我们先来分析该函数。
<div class="cnblogs_code">
<pre>std::shared_ptr<MainThreadHandle> getThreadHandle() {
if (!interface_) {
 interface_ = std::make_shared<MainThreadInterface>(env_->inspector_agent(), ...);
}
return interface_->GetHandle();
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>getThreadHandle</code> 首先创建来一个 <code>MainThreadInterface</code> 对象，接着又调用了他的 GetHandle 方法，我们看一下该方法的逻辑。
<div class="cnblogs_code">
<pre>std::shared_ptr<MainThreadHandle> MainThreadInterface::GetHandle() {
if (handle_ == nullptr)
handle_ = std::make_shared<MainThreadHandle>(this);
return handle_;
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>GetHandle</code> 了创建了一个 <code>MainThreadHandle</code> 对象，最终结构如下所示。
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092826538-766056529.png" alt="" loading="lazy">
 
 
分析完后我们继续看 <code>Agent::StartIoThread</code> 中 <code>InspectorIo::Start</code> 的逻辑。
<div class="cnblogs_code">
<pre>std::unique_ptr<InspectorIo> InspectorIo::Start(std::shared_ptr<MainThreadHandle> main_thread, ...) {
auto io = std::unique_ptr<InspectorIo>(new InspectorIo(main_thread, ...));
return io;
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>InspectorIo::Star</code> 里新建了一个 <code>InspectorIo</code> 对象，我们看看 <code>InspectorIo</code> 构造函数的逻辑。
<div class="cnblogs_code">
<pre>InspectorIo::InspectorIo(std::shared_ptr<MainThreadHandle> main_thread, ...)
:
// 初始化 main_thread_
 main_thread_(main_thread)) {
// 新建一个子线程，子线程中执行 InspectorIo::ThreadMain
uv_thread_create(&thread_, InspectorIo::ThreadMain, this);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
这时候结构如下:
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092851547-2039977919.png" alt="" loading="lazy">
 
 
<code>InspectorIo</code> 创建了一个子线程， <code>Inspector</code> 在子线程里启动的原因主要有两个。
<ol class="list-paddingleft-2" data-tool="mdnice编辑器">
<li>如果在主线程里运行，那么当我们断点调试的时候，<code>Node.js</code> 主线程就会被停住，也就无法处理客户端发过来的调试指令。</li>
<li>如果主线程陷入死循环，我们就无法实时抓取进程的 <code>Profile</code> 数据来分析原因。</li>
</ol>
接着继续看一下子线程里执行 <code>InspectorIo::ThreadMain</code> 的逻辑：
<div class="cnblogs_code">
<pre>void InspectorIo::ThreadMain(void* io) {
static_cast<InspectorIo*>(io)->ThreadMain();
}

void InspectorIo::ThreadMain() {
uv_loop_t loop;
loop.data = nullptr;
// 在子线程开启一个新的事件循环
int err = uv_loop_init(&loop);
std::shared_ptr<RequestQueueData> queue(new RequestQueueData(&loop), ...);
// 新建一个 delegate，用于处理请求
std::unique_ptr<InspectorIoDelegate> delegate(
 new InspectorIoDelegate(queue, main_thread_, ...)
);
InspectorSocketServer server(std::move(delegate), ...);
server.Start();
// 进入事件循环
uv_run(&loop, UV_RUN_DEFAULT);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>ThreadMain</code> 主要有三个逻辑：
<ol class="list-paddingleft-2" data-tool="mdnice编辑器">
<li>创建一个 delegate 对象，该对象是核心的对象，后面我们会看到有什么作用。</li>
<li>创建一个服务器并启动。</li>
<li>开启事件循环。</li>
</ol>
接下来看一下服务器的逻辑，首先看一下创建服务器的逻辑：
<div class="cnblogs_code">
<pre>InspectorSocketServer::InspectorSocketServer(std::unique_ptr<SocketServerDelegate> delegate, ...)
: // 保存 delegate
 delegate_(std::move(delegate)),
 // 初始化 sessionId
 next_session_id_(0) {
// 设置 delegate 的 server 为当前服务器
delegate_->AssignServer(this);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
执行完后形成以下结构：
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092915422-1337803873.png" alt="" loading="lazy">
 
 
接着我们看启动服务器的逻辑：
<div class="cnblogs_code">
<pre>bool InspectorSocketServer::Start() {
// DNS 解析,比如输入的是localhost
struct addrinfo hints;
memset(&hints, 0, sizeof(hints));
hints.ai_flags = AI_NUMERICSERV;
hints.ai_socktype = SOCK_STREAM;
uv_getaddrinfo_t req;
const std::string port_string = std::to_string(port_);
uv_getaddrinfo(loop_, &req, nullptr, host_.c_str(),
 port_string.c_str(), &hints);
// 监听解析到的 IP 列表 
for (addrinfo* address = req.addrinfo;
 address != nullptr;
 address = address->ai_next) {

auto server_socket = ServerSocketPtr(new ServerSocket(this));
err = server_socket->Listen(address->ai_addr, loop_);
if (err == 0)
 server_sockets_.push_back(std::move(server_socket));

}

return true;
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
首先根据参数做 <code>DNS</code> 解析，然后根据拿到的 <code>IP</code> 列表（通常是一个），创建对应个数的 <code>ServerSocket</code> 对象，并执行它的 <code>Listen</code> 方法。<code>ServerSocket</code> 表示一个监听 <code>socket</code>，看一下 <code>ServerSocket</code> 的构造函数：
<div class="cnblogs_code">
<pre>ServerSocket(InspectorSocketServer* server) :
tcp_socket_(uv_tcp_t()), server_(server) {}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
执行完后结构如下：
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824092938990-917742388.png" alt="" loading="lazy">
 
 
接着看一下 <code>ServerSocket</code> 的 <code>Listen</code> 方法：
<div class="cnblogs_code">
<pre>int ServerSocket::Listen(sockaddr* addr, uv_loop_t* loop) {
uv_tcp_t* server = &tcp_socket_;
uv_tcp_init(loop, server)
uv_tcp_bind(server, addr, 0);
uv_listen(reinterpret_cast<uv_stream_t*>(server),
 511,
 ServerSocket::SocketConnectedCallback);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>Listen</code> 调用 <code>Libuv</code> 的接口完成服务器的启动。至此，<code>Inspector</code> 提供的 <code>Weboscket</code> 服务器启动了。
<h2 data-tool="mdnice编辑器">3.2 处理连接</h2>
从刚才分析中可以看到，当有连接到来时执行回调 <code>ServerSocket::SocketConnectedCallback</code>。
<div class="cnblogs_code">
<pre>void ServerSocket::SocketConnectedCallback(uv_stream_t* tcp_socket,
 int status) {
if (status == 0) {
// 根据 Libuv handle 找到对应的 ServerSocket 对象
ServerSocket* server_socket = ServerSocket::FromTcpSocket(tcp_socket);
// Socket 对象的 server_ 字段保存了所在的 InspectorSocketServer
server_socket->server_->Accept(server_socket->port_, tcp_socket);
}
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
接着看 <code>InspectorSocketServer</code> 的 <code>Accept</code> 是如何处理连接的：
<div class="cnblogs_code">
<pre>void InspectorSocketServer::Accept(int server_port,
 uv_stream_t* server_socket) {

std::unique_ptr<SocketSession> session(
 new SocketSession(this, next_session_id_++, server_port)
);

InspectorSocket::DelegatePointer delegate =
 InspectorSocket::DelegatePointer(
 new SocketSession::Delegate(this, session->id())
 );

InspectorSocket::Pointer inspector =
 InspectorSocket::Accept(server_socket, std::move(delegate));

if (inspector) {
session->Own(std::move(inspector));
connected_sessions_.second = std::move(session);
}
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>Accept</code> 的首先创建里一个 <code>SocketSession</code> 和 <code>SocketSession::Delegate</code> 对象。然后调用 <code>InspectorSocket::Accept</code>，从代码中可以看到 <code>InspectorSocket::Accept</code> 会返回一个 <code>InspectorSocket</code> 对象。<code>InspectorSocket</code> 是对通信 <code>socket</code> 的封装（和客户端通信的 <code>socket</code>，区别于服务器的监听 <code>socket</code>）。然后记录 <code>session</code> 对象对应的 <code>InspectorSocket</code> 对象，同时记录 <code>sessionId</code> 和 <code>session</code> 的映射关系。结构如下图所示：
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824093015718-1952866749.png" alt="" loading="lazy">
 
 
接着看一下 <code>InspectorSocket::Accept</code> 返回 <code>InspectorSocket</code> 的逻辑：
<div class="cnblogs_code">
<pre>InspectorSocket::Pointer InspectorSocket::Accept(uv_stream_t* server,
 DelegatePointer delegate) {
auto tcp = TcpHolder::Accept(server, std::move(delegate));
InspectorSocket* inspector = new InspectorSocket();
inspector->SwitchProtocol(new HttpHandler(inspector, std::move(tcp)));
return InspectorSocket::Pointer(inspector);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>InspectorSocket::Accept</code> 的代码不多，但是逻辑还是挺多的：
<ol class="list-paddingleft-2" data-tool="mdnice编辑器">
<li><code>InspectorSocket::Accept</code> 再次调用 <code>TcpHolder::Accept</code> 获取一个 <code>TcpHolder</code> 对象。</li>
</ol>
<div class="cnblogs_code">
<pre>TcpHolder::Pointer TcpHolder::Accept(
uv_stream_t* server,
InspectorSocket::DelegatePointer delegate) {

// 新建一个 TcpHolder 对象，TcpHolder 是对 uv_tcp_t 和 delegate 的封装
TcpHolder* result = new TcpHolder(std::move(delegate));
// 拿到 TcpHolder 对象的 uv_tcp_t 结构体
uv_stream_t* tcp = reinterpret_cast<uv_stream_t*>(&result->tcp_);
// 初始化
int err = uv_tcp_init(server->loop, &result->tcp_);
// 摘取一个 TCP 连接对应的 fd 保存到 TcpHolder 的 uv_tcp_t 结构体中（即第二个参数的 tcp 字段）
uv_accept(server, tcp);
// 注册等待可读事件，有数据时执行 OnDataReceivedCb 回调
uv_read_start(tcp, allocate_buffer, OnDataReceivedCb);
return TcpHolder::Pointer(result);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<ol class="list-paddingleft-2" start="2" data-tool="mdnice编辑器">
<li>新建一个 <code>HttpHandler</code> 对象：</li>
</ol>
<div class="cnblogs_code">
<pre>explicit HttpHandler(InspectorSocket* inspector, TcpHolder::Pointer tcp)
 : ProtocolHandler(inspector, std::move(tcp)){

llhttp_init(&parser_, HTTP_REQUEST, &parser_settings);
llhttp_settings_init(&parser_settings);
parser_settings.on_header_field = OnHeaderField;
// ...
}

ProtocolHandler::ProtocolHandler(InspectorSocket* inspector,
 TcpHolder::Pointer tcp)
 : inspector_(inspector), tcp_(std::move(tcp)) {
// 设置 TCP 数据的 handler，TCP 是只负责传输，数据的解析交给 handler 处理 
tcp_->SetHandler(this);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>HttpHandler</code> 是对 <code>TcpHolder</code> 的封装，主要通过 HTTP 解析器 <code>llhttp</code> 对 HTTP 协议进行解析。
<ol class="list-paddingleft-2" start="3" data-tool="mdnice编辑器">
<li>调用 inspector->SwitchProtocol() 切换当前协议处理器为 HTTP，建立 TCP 连接后，首先要经过一个 HTTP 请求从 HTTP 协议升级到 WebSocket 协议，升级成功后就使用 Websocket 协议进行通信.</li>
</ol>
我们看一下这时候的结构图：
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824093047905-1530657318.png" alt="" loading="lazy">
 
 
至此，就完成了连接处理的分析！（撒花，你学废了么）
<h2 data-tool="mdnice编辑器">3.3 协议升级</h2>
完成了 TCP 连接的处理后，接下来要完成协议升级，因为 <code>Inspector</code> 是通过 <code>WebSocket</code> 协议和客户端通信的，所以需要通过一个 HTTP 请求来完成 HTTP 到 <code>WebSocekt</code> 协议的升级。从刚才的分析中看当有数据到来时会执行 <code>OnDataReceivedCb</code> 回调：
<div class="cnblogs_code">
<pre>void TcpHolder::OnDataReceivedCb(uv_stream_t* tcp, ssize_t nread,
 const uv_buf_t* buf) {
TcpHolder* holder = From(tcp);
holder->ReclaimUvBuf(buf, nread);
// 调用 handler 的 onData，目前 handler 是 HTTP 协议
holder->handler_->OnData(&holder->buffer);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
TCP 层收到数据后交给应用层解析，直接调用上层的 OnData 回调。
<div class="cnblogs_code">
<pre>void OnData(std::vector<char>* data) override {
// 解析 HTTP 协议
llhttp_execute(&parser_, data->data(), data->size());
// 解析完并且是升级协议的请求则调用 delegate 的回调 OnSocketUpgrade
delegate()->OnSocketUpgrade(event.host, event.path, event.ws_key);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>OnData</code> 可能会被多次回调，并通过 <code>llhttp_execute</code> 解析收到的 HTTP 报文，当发现是一个协议升级的请求后，就调用 <code>OnSocketUpgrade</code> 回调。<code>delegate</code> 是一个 <code>SocketSession::Delegate</code> 对象。来看一下该对象的 OnSocketUpgrade 方法：
<div class="cnblogs_code">
<pre>void SocketSession::Delegate::OnSocketUpgrade(const std::string& host,
 const std::string& path,
 const std::string& ws_key) {
std::string id = path.empty() ? path : path.substr(1);
server_->SessionStarted(session_id_, id, ws_key);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>OnSocketUpgrade</code> 又调用了 <code>server_</code> （<code>InspectorSocketServer</code> 对象）的 <code>SessionStarted</code>：
<div class="cnblogs_code">
<pre>void InspectorSocketServer::SessionStarted(int session_id,
 const std::string& id,
 const std::string& ws_key) {
// 找到对应的 session 对象 
SocketSession* session = Session(session_id);
connected_sessions_.first = id;
session->Accept(ws_key);
delegate_->StartSession(session_id, id);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
首先通过 <code>session_id</code> 找到建立 TCP 连接时分配的 <code>SocketSession</code> 对象：
<ol class="list-paddingleft-2" data-tool="mdnice编辑器">
<li>执行 session->Accept(ws_key) 回复客户端同意协议升级：</li>
</ol>
<div class="cnblogs_code">
<pre>void Accept(const std::string& ws_key) {
ws_socket_->AcceptUpgrade(ws_key);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
从结构图我们可以看到 <code>ws_socket_</code> 是一个 <code>InspectorSocket</code> 对象：
<div class="cnblogs_code">
<pre>void AcceptUpgrade(const std::string& accept_key) override {
char accept_string;
generate_accept_string(accept_key, &accept_string);
const char accept_ws_prefix[] = "HTTP/1.1 101 Switching Protocols\r\n"
 "Upgrade: websocket\r\n"
 "Connection: Upgrade\r\n"
 "Sec-WebSocket-Accept: ";
// ...
// 回复 101 给客户端 
 WriteRaw(reply, WriteRequest::Cleanup);
// 切换 handler 为 WebSocket handler
inspector_->SwitchProtocol(new WsHandler(inspector_, std::move(tcp_)));
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>AcceptUpgradeh</code> 首先回复客户端 101 表示同意升级到 <code>WebSocket</code> 协议，然后切换数据处理器为 <code>WsHandler</code>，即后续的数据按照 <code>WebSocket</code> 协议处理。
<ol class="list-paddingleft-2" start="2" data-tool="mdnice编辑器">
<li>执行 <code>delegate_->StartSession(session_id, id)</code> 建立和 <code>V8 Inspector</code> 的会话。<code>delegate_</code>  是 <code>InspectorIoDelegate</code> 对象：</li>
</ol>
<div class="cnblogs_code">
<pre>void InspectorIoDelegate::StartSession(int session_id,
 const std::string& target_id) {
auto session = main_thread_->Connect(
 std::unique_ptr<InspectorSessionDelegate>(
 new IoSessionDelegate(request_queue_->handle(), session_id)
 ),
 true);
if (session) {
sessions_ = std::move(session);
fprintf(stderr, "Debugger attached.\n");
}
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
首先通过 <code>main_thread_->Connect</code> 拿到一个 <code>session</code>，并在 <code>InspectorIoDelegate</code> 中记录映射关系。结构图如下：
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824093148555-2063319530.png" alt="" loading="lazy">
 
 
接下来看一下 <code>main_thread_->Connect</code> 的逻辑（<code>main_thread_</code> 是 <code>MainThreadHandle</code> 对象）：
<div class="cnblogs_code">
<pre>std::unique_ptr<InspectorSession> MainThreadHandle::Connect(
std::unique_ptr<InspectorSessionDelegate> delegate,
bool prevent_shutdown) {

return std::unique_ptr<InspectorSession>(
 new CrossThreadInspectorSession(++next_session_id_,
 shared_from_this(),
 std::move(delegate),
 prevent_shutdown));
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>Connect</code> 函数新建了一个 <code>CrossThreadInspectorSession</code> 对象。<code>CrossThreadInspectorSession</code> 构造函数如下:
<div class="cnblogs_code">
<pre> CrossThreadInspectorSession(...) {
// 执行 MainThreadSessionState::Connect 
state_.Call(&MainThreadSessionState::Connect, std::move(delegate));
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
继续看 <code>MainThreadSessionState::Connect</code>：
<div class="cnblogs_code">
<pre>void Connect(std::unique_ptr<InspectorSessionDelegate> delegate) {
Agent* agent = thread_->inspector_agent();
session_ = agent->Connect(std::move(delegate), prevent_shutdown_);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
继续调 <code>agent->Connect</code>：
<div class="cnblogs_code">
<pre>std::unique_ptr<InspectorSession> Agent::Connect(
std::unique_ptr<InspectorSessionDelegate> delegate,
bool prevent_shutdown) {

int session_id = client_->connectFrontend(std::move(delegate),
 prevent_shutdown);
return std::unique_ptr<InspectorSession>(
 new SameThreadInspectorSession(session_id, client_));
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
继续调 <code>connectFrontend</code>：
<div class="cnblogs_code">
<pre>int connectFrontend(std::unique_ptr<InspectorSessionDelegate> delegate,
 bool prevent_shutdown) {
int session_id = next_session_id_++;
channels_ = std::make_unique<ChannelImpl>(env_,
 client_,
 getWorkerManager(),
 std::move(delegate),
 getThreadHandle(),
 prevent_shutdown);
return session_id;
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>connectFrontend</code> 创建了一个 <code>ChannelImpl</code> 并且在 <code>channels_</code> 中保存了映射关系。看看 <code>ChannelImpl</code> 的构造函数：
<div class="cnblogs_code">
<pre>explicit ChannelImpl(Environment* env,
 const std::unique_ptr<V8Inspector>& inspector,
 std::unique_ptr<InspectorSessionDelegate> delegate, ...)
 : delegate_(std::move(delegate)) {

session_ = inspector->connect(CONTEXT_GROUP_ID, this, StringView());
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>ChannelImpl</code> 调用 <code>inspector->connect</code> 建立了一个和 <code>V8 Inspector</code> 的会话。结构图大致如下：
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824093238420-1122413890.png" alt="" loading="lazy">
 
 
客户端到 <code>Node.js</code> 到 <code>V8 Inspector</code> 的整体架构如下：
<img src="https://img2020.cnblogs.com/blog/1313648/202108/1313648-20210824093249482-877617746.png" alt="" loading="lazy">
 
 
<h2 data-tool="mdnice编辑器">3.4 客户端到 V8 Inspector 的数据处理</h2>
TCP 连接建立了，协议升级也完成了，接下来就可以开始处理业务数据。从前面的分析中我们已经知道数据到来时会执行 <code>TcpHoldler</code> 的 <code>handler_->OnData</code> 回调。因为已经完成了协议升级，所以这时候的 <code>handler</code> 变成了 <code>WeSocket handler</code>：
<div class="cnblogs_code">
<pre>void OnData(std::vector<char>* data) override
int processed = 0;
do {
 processed = ParseWsFrames(*data);
 // ...
} while (processed > 0 && !data->empty());
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>OnData</code> 通过 <code>ParseWsFrames</code> 解析 <code>WebSocket</code> 协议：
<div class="cnblogs_code">
<pre>int ParseWsFrames(const std::vector<char>& buffer) {
int bytes_consumed = 0;
std::vector<char> output;
bool compressed = false;
// 解析WebSocket协议
ws_decode_result r =decode_frame_hybi17(buffer,
 true /* client_frame */,
 &bytes_consumed, &output,
 &compressed);
// 执行delegate的回调 
delegate()->OnWsFrame(output);
return bytes_consumed;
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
前面已经分析过 <code>delegate</code> 是 <code>TcpHoldler</code> 的 <code>delegate</code>，即 <code>SocketSession::Delegate</code> 对象：
<div class="cnblogs_code">
<pre>void SocketSession::Delegate::OnWsFrame(const std::vector<char>& data) {
server_->MessageReceived(session_id_,
 std::string(data.data(),
 data.size()));
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
继续回调 <code>server_->MessageReceived</code>。从结构图可以看到 <code>server_</code> 是 <code>InspectorSocketServer</code> 对象：
<div class="cnblogs_code">
<pre>void MessageReceived(int session_id, const std::string& message) {
delegate_->MessageReceived(session_id, message);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
继续回调 <code>delegate_->MessageReceived</code>，<code>InspectorSocketServer</code> 的 <code>delegate_</code> 是 <code>InspectorIoDelegate</code> 对象：
<div class="cnblogs_code">
<pre>void InspectorIoDelegate::MessageReceived(int session_id,
 const std::string& message) {
auto session = sessions_.find(session_id);
if (session != sessions_.end())
session->second->Dispatch(Utf8ToStringView(message)->string());
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
首先通过 <code>session_id</code> 找到对应的 <code>session</code>。<code>session</code> 是一个 <code>CrossThreadInspectorSession</code> 对象。看看他的 <code>Dispatch</code> 方法：
<div class="cnblogs_code">
<pre> void Dispatch(const StringView& message) override {
state_.Call(&MainThreadSessionState::Dispatch,
 StringBuffer::create(message));
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
执行 <code>MainThreadSessionState::Dispatch</code>：
<div class="cnblogs_code">
<pre>void Dispatch(std::unique_ptr<StringBuffer> message) {
session_->Dispatch(message->string());
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>session_</code> 是 <code>SameThreadInspectorSession</code> 对象：
<div class="cnblogs_code">
<pre>void SameThreadInspectorSession::Dispatch(
const v8_inspector::StringView& message) {
auto client = client_.lock();
if (client)
client->dispatchMessageFromFrontend(session_id_, message);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
继续调 <code>client->dispatchMessageFromFrontend</code>：
<div class="cnblogs_code">
<pre> void dispatchMessageFromFrontend(int session_id, const StringView& message) {
channels_->dispatchProtocolMessage(message);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
通过 <code>session_id</code> 找到对应的 <code>ChannelImpl</code>，继续调 <code>ChannelImpl</code> 的 <code>dispatchProtocolMessage</code>：
<div class="cnblogs_code">
<pre> voiddispatchProtocolMessage(const StringView& message) {
session_->dispatchProtocolMessage(message);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
最终调用和 <code>V8 Inspector</code> 的会话对象把数据发送给 V8。至此客户端到 <code>V8 Inspector</code> 的通信过程就完成了。
<h2 data-tool="mdnice编辑器">3.5 V8 Inspector 到客户端的数据处理</h2>
接着看从 <code>V8 inspector</code> 到客户端的数据传递逻辑。<code>V8 inspector</code> 是通过 <code>channel</code> 的 <code>sendResponse</code> 函数把数据传递给客户端的：
<div class="cnblogs_code">
<pre> void sendResponse(
 int callId,
 std::unique_ptr<v8_inspector::StringBuffer> message) override {

sendMessageToFrontend(message->string());
}

void sendMessageToFrontend(const StringView& message) {
delegate_->SendMessageToFrontend(message);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>delegate_</code> 是 <code>IoSessionDelegate</code> 对象：
<div class="cnblogs_code">
<pre>void SendMessageToFrontend(const v8_inspector::StringView& message) override {
request_queue_->Post(id_, TransportAction::kSendMessage,
 StringBuffer::create(message));
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> request_queue_ 是 RequestQueueData 对象。 </code></pre>
<div class="cnblogs_code">
<pre> void Post(int session_id,
 TransportAction action,
 std::unique_ptr<StringBuffer> message) {

Mutex::ScopedLock scoped_lock(state_lock_);
bool notify = messages_.empty();
// 消息入队
 messages_.emplace_back(action, session_id, std::move(message));
if (notify) {
 CHECK_EQ(0, uv_async_send(&async_));
 incoming_message_cond_.Broadcast(scoped_lock);
}
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>Post</code> 首先把消息入队，然后通过异步的方式通知 <code>async_</code>，接着看 <code>async_</code> 的处理函数（在子线程的事件循环里执行）：
<div class="cnblogs_code">
<pre>uv_async_init(loop, &async_, [](uv_async_t* async) {
// 拿到async对应的上下文
RequestQueueData* wrapper = node::ContainerOf(&RequestQueueData::async_, async);
// 执行RequestQueueData的DoDispatch
wrapper->DoDispatch();
});</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
回调函数里调用了 <code>wrapper->DoDispatch()</code>：
<div class="cnblogs_code">
<pre>void DoDispatch() {
for (const auto& request : GetMessages()) {
 request.Dispatch(server_);
}
}

request 是 RequestToServer 对象。
void Dispatch(InspectorSocketServer* server) const {
switch (action_) {
 case TransportAction::kSendMessage:
 server->Send(
 session_id_,
 protocol::StringUtil::StringViewToUtf8(message_->string()));
 break;
}
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
接着看 <code>InspectorSocketServer</code> 的 <code>Send</code>：
<div class="cnblogs_code">
<pre>void InspectorSocketServer::Send(int session_id, const std::string& message) {
SocketSession* session = Session(session_id);
if (session != nullptr) {
session->Send(message);
}
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>session</code> 代表可客户端的一个连接：
<div class="cnblogs_code">
<pre>void SocketSession::Send(const std::string& message) {
ws_socket_->Write(message.data(), message.length());
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
接着调用 <code>WebSocket handler</code> 的 <code>Write</code>：
<div class="cnblogs_code">
<pre>void Write(const std::vector<char> data) override {
std::vector<char> output = encode_frame_hybi17(data);
WriteRaw(output, WriteRequest::Cleanup);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
<code>WriteRaw</code> 是基类 <code>ProtocolHandler</code> 实现的：
<div class="cnblogs_code">
<pre>int ProtocolHandler::WriteRaw(const std::vector<char>& buffer,
 uv_write_cb write_cb) {
return tcp_->WriteRaw(buffer, write_cb);
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
最终是通过 TCP 连接返回给客户端：
<div class="cnblogs_code">
<pre>int TcpHolder::WriteRaw(const std::vector<char>& buffer, uv_write_cb write_cb) {
// Freed in write_request_cleanup
WriteRequest* wr = new WriteRequest(handler_, buffer);
uv_stream_t* stream = reinterpret_cast<uv_stream_t*>(&tcp_);
int err = uv_write(&wr->req, stream, &wr->buf, 1, write_cb);
if (err < 0)
delete wr;
return err < 0;
}</pre>
</div>
<pre data-tool="mdnice编辑器"><code> </code></pre>
新建一个写请求，<code>socket</code> 可写的时候发送数据给客户端。
<h1 data-tool="mdnice编辑器">4 总结</h1>
从以上介绍和分析中，我们了解了 <code>Node.js Inspector</code> 的工作原理和使用。它方便了我们对 <code>Node.js</code> 的调试和问题排查，提高开发效率。通过它可以收集 <code>Node.js</code> 进程的堆快照分析是否有内存泄漏，可以收集 <code>CPU Profile</code> 分析代码的性能瓶颈，从而帮助提高服务的可用性和性能。另外，它支持动态开启，降低了安全风险，同时支持对子线程进行调试，是一个非常强大的工具。
参考内容：1 Debugging Guide 2 inspector 3 开源的 inspector agent 实现 4 inspector 协议文档 5 Debugging Node.js with Chrome DevTools
转自https://mp.weixin.qq.com/s/-fFwUGJrV5Rxia7KtoPkhg 
来源：https://www.cnblogs.com/cangqinglang/p/15178838.html

頁: [1]

琼殿技术论坛's Archiver

深入理解 Node.js 的 Inspector