浅谈Node Inspector 代理实现

一文掌握Node Inspector代理实现，长沙网络推广为你解读

背景

在Node.js开发过程中，使用Node Inspector进行断点调试是常见的调试方式。但在实际应用中，可能会遇到一些挑战，降低调试效率。比如当你使用VSCode进行断点调试时，如果你的应用是通过cluster模块启动的，每次worker进程重启后，Inspector的端口都会自动递增。虽然在Node 8.x版本中可以通过指定inspectPort来固定调试端口，但在较旧的Node 6.x版本中并不支持这一功能。使用devtools进行调试时，每次都需要复制devtools链接到Chrome浏览器上，如果端口变更或websocket id变化，链接也会失效。为了解决这些问题，我们需要深入Node Inspector代理的实现方式。

解决方案

目前业界已经有一些解决方案，如Chrome插件Node Inspector Manager（Nim）。Nim只能解决在同一Inspector端口下应用重启后链接更改的问题，对于cluster启动导致的端口自增问题却无能为力。而且Nim主要针对Chrome浏览器，对于VSCode中的调试则无法直接适用。最佳的解决方案是使用Node.js实现Inspector代理。

对于第一个问题，VSCode会自动调用/json接口获取的websocket id，并使用新的websocket id连接到Node Inspector服务上。我们的解决方案是实现一个TCP代理功能进行数据转发。对于第二个问题，由于devtools不会自动获取新的websocket id，我们需要通过动态替换的方式解决。代理服务会去/json获取websocket id，并在websocket握手时将其动态替换到请求头中。

实现步骤

一、TCP代理创建

我们需要实现一个TCP代理功能。这个过程其实非常简单，只需要通过Node.js的net模块创建一个代理端口的TCP Server。当有连接请求时，我们再创建一个连接到目标端口即可。这样就可以进行数据的转发了。以下是一个简易的实现示例：

（代码实现）

在上面的代码中，我们使用了net模块创建了一个代理服务器，通过pipe方法将客户端和服务器的数据相互转发。在实际应用中，我们还需要监听错误和关闭事件，以便在连接关闭时及时销毁创建的socket。

通过实现这样一个简单的代理服务，我们可以有效解决VSCode和devtools在调试过程中因Node Inspector端口变更或websocket id变更导致的连接问题。这样，我们就可以更加高效地进行Node.js应用的调试和开发了。在完成Tcp代理功能后，我们已经能够满足VSCode的调试需求。在VSCode的项目下，我们需要在launch.json文件中指定代理端口，并在configurations中添加相应的配置。配置如下：

```json

{

"type": "node",

"request": "attach",

"name": "Attach",

"protocol": "inspector",

"restart": true,

"port": 9229

}

```

这样，无论应用重启或更换inspect端口，VSCode都能通过代理端口自动重新连接到你的应用。

接下来，我们需要获取websocketId。这一步是为了解决在devtools链接不变的情况下，如何重新attach的问题。在启动node inspector server时，inspector服务提供了一个/json的http接口，我们可以使用这个接口获取websocket id。

通过发送http请求到目标端口的/json，我们可以获取到如下数据：

```json

[

{

"description": "node.js instance",

"devtoolsFrontendUrl": '...',

"faviconUrl": '

"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。

获取到websocket id后，我们可以在Tcp代理中实现动态替换。为了固定链接，我们需要设置一个代理链接，例如我的代理服务端口是9229。Chrome devtools的代理链接如下：

```html

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__`其他部分都是固定的。其中`__ws_proxy__`是一个占位符，当chrome devtools向这个代理链接发起websocket握手请求时，我们会将`__ws_proxy__`替换成实际的websocket id，然后转发到node的inspector服务上。

为了实现这个功能，我们需要对Tcp代理中pipe逻辑的代码进行小修改。在数据流转的海洋中，我们借助一个强大的工具——through2，创建了一个灵活的数据转换流。这个流如同一个精巧的数据处理器，对每一个数据块进行细致的检查和改造。

当我们接收到一个数据块时，首先查看其开头的三个字节，它们是否构成“GET”的标识。这个标识，如同一个暗号，告诉我们这可能是一个HTTP请求，更具体地说，可能是websocket的协议升级请求。这就像揭开了一层面纱，露出了隐藏在其中的信息。

当我们捕获到这样的请求时，就会进一步处理。我们把请求头中的"__ws_proxy__"路径替换成特定的websocketId。这个过程如同在信息的海洋中导航，找到正确的航道，确保信息能够准确无误地到达目的地。完成这个改造后，我们将这个请求转发到node的inspector server上，从而完成websocket的握手。

接下来的websocket通信变得更加简单。我们不再需要对数据进行任何处理，只需将其直接转发即可。这就像一条畅通无阻的信息高速公路，让我们的数据能够迅速、准确地到达目的地。

即使在应用重启或需要更换inspector端口时，我们也不需更换debug链接。只需在inspector server重启时，点击一下Reconnect DevTools按钮，就能迅速恢复debug。这个过程如同魔术般神奇，让我们在调试的过程中更加高效、便捷。

关于上述内容的详细代码实现，你可以在狼蚁网站SEO优化的git仓库中找到。我们也提供了Tcp代理和Inspector代理的相关信息，希望对你的学习和实践有所帮助。

本文的内容旨在帮助你理解如何通过through2创建一个数据转换流，如何处理HTTP请求和websocket通信，以及如何便捷地进行debug。希望这些内容能对你的学习和实践有所帮助。也希望大家能支持狼蚁SEO，共同学习，共同进步。

让我们用一句诗来结束这篇文章：“数据流转如江河，通过流水得真知。”在这个信息爆炸的时代，我们要学会像江河一样灵活地流转和处理数据，从中获取真正的知识和价值。

现在，让我们开始这个充满无限可能的数据世界吧！ Cambrian.render('body')的指令，是启动这段生动描述和数据流转之旅的开关。让我们一起踏上这个旅程，发现更多的秘密和可能性。