浅谈Node Inspector 代理实现(2)

上面实现了比较简单的一个代理服务，通过 pipe 方法将两个服务的数据连通起来。client 有数据的时候会被转发到 server 中，server 有数据的时候也会转发到 client 中。

当完成这个 Tcp 代理功能之后，就已经可以实现 vscode 的调试需求了，在 vscode 中项目下 launch.json 中指定端口为代理端口，在 configurations 中添加配置

{
 "type": "node",
 "request": "attach",
 "name": "Attach",
 "protocol": "inspector",
 "restart": true,
 "port": 9229
}

那么当应用重启，或者更换 inspect 的端口，vscode 都能自动重新通过代理端口 attach 到你的应用。

二、获取 websocketId

这一步开始，就是为了解决 devtools 链接不变的情况下能够重新 attach 的问题了，在启动 node inspector server 的时候，inspector 服务还提供了一个 /json 的 http 接口用来获取 websocket id。

这个就相当简单了，直接发个 http 请求到目标端口的 /json，就可以获取到数据了：

[ { description: 'node.js instance',
  devtoolsFrontendUrl: '...',
  faviconUrl: 'https://nodejs.org/static/favicon.ico',
  id: 'e7ef6313-1ce0-4b07-b690-d3cf5274d8b0',
  title: '/Users/wanghx/Workspace/larva-team/vscode-log/index.js',
  type: 'node',
  url: 'file:///Users/wanghx/Workspace/larva-team/vscode-log/index.js',
  webSocketDebuggerUrl: 'ws://127.0.0.1:5858/e7ef6313-1ce0-4b07-b690-d3cf5274d8b0' } ]

上面数据中的 id 字段，就是我们需要的 websocket id 了。

三、Inspector 代理

拿到了 websocket id 后，就可以在 tcp 代理中做 websocket id 的动态替换了，首先我们需要固定链接，因此先定一个代理链接，比如我的代理服务端口是 9229，那么 chrome devtools 的代理链接就是：

chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/__ws_proxy__

上面除了最后面的 ws=127.0.0.1:9229/__ws_proxy__ 其他都是固定的，而最后这个也一眼就可以看出来是 websocket 的链接。其中 __ws_proxy__则是用来占位的，用于在 chrome devtools 向这个代理链接发起 websocket 握手请求的时候，将 __ws_proxy__ 替换成 websocket id 然后转发到 node 的 inspector 服务上。

对上面的 tcp 代理中的 pipe 逻辑的代码做一些小修改即可。

const through = require('through2');
...

client
   .pipe(through.obj((chunk, enc, done) => {
    if (chunk[0] === 0x47 && chunk[1] === 0x45 && chunk[2] === 0x54) {
     const content = chunk.toString();
     if (content.includes('__ws_proxy__')) {
      return done(null, Buffer.from(content.replace('__ws_proxy__', websocketId)));
     }
    }
    done(null, chunk);
   }))
   .pipe(server)
   .pipe(client);
...