Lassen Sie uns über die Verwendungsfähigkeiten des Debuggers in vscode sprechen

Lernen nodejs Was ist das Wichtigste? Vielleicht hat jeder seine eigene Antwort.

Ich denke, dass beim Erlernen von NodeJS neben der Beherrschung der grundlegenden API und einiger häufig verwendeter Pakete die wichtigste Fähigkeit darin besteht, den Umgang mit dem Debugger zu erlernen. Denn wenn der Prozess komplex ist, kann Ihnen das Debuggen von Haltepunkten dabei helfen, die Logik besser zu klären, und wenn es Fehler gibt, können Sie das Problem auch schneller lokalisieren. [Empfohlenes Lernen: „nodejs-Tutorial“, „vscode-Tutorial“]

Onkel Wolf sagte, dass die Frage, ob Sie den Debugger verwenden können, ein wichtiger Indikator ist, um die NodeJS-Ebene eines Programmierers zu unterscheiden.

In diesem Artikel werden die Prinzipien des Debuggers und die Verwendungsfähigkeiten des vscode-Debuggers erläutert.

Debugger-Prinzip

Wenn Sie beim Ausführen von NodeJS-Code den Parameter --inspect（可以打断点） 或者 --inspect-brk mitbringen (Sie können den Punkt unterbrechen und in der ersten Zeile unterbrechen), wird er im Debugger-Modus gestartet:

Ja, sehen Sie, der Knoten wurde gestartet Bei einem Web-Socket-Server lautet die Adresse: ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

Warum startet der Debugger einen Web-Socket-Server?

Die Bedeutung des Debuggers besteht darin, irgendwo anzuhalten, ihn in einem einzigen Schritt auszuführen und Variablen in der Umgebung anzuzeigen. Das Festlegen von Haltepunkten und das Offenlegen der Variablen des aktuellen Kontexts besteht darin, einen WebSocket-Server zu starten. Zu diesem Zeitpunkt müssen Sie nur einen WebSocket-Client starten und eine Verbindung zum Server herstellen, um den NodeJS-Code zu debuggen.

v8-Debug-Protokoll

Wie kommunizieren der Debugger-Server und der Debugger-Client nach dem Herstellen der Verbindung? Dabei handelt es sich um das v8-Debug-Protokoll.

Kommunizieren Sie über ein Format, das von beiden Parteien erkannt werden kann, wie zum Beispiel:

Setzen Sie einen Haltepunkt in Zeile 100 von test.js:

{
    "seq":118,
    "type":"request",
    "command":"setbreakpoint",
    "arguments":{
        "type":"script",
        "target":"test.js",
        "line":100
    }
}

Sehen Sie sich dann die Variablen im aktuellen Bereich an:

{
    "seq":117,
    "type":"request",
    "command":"scope"
}

Nach dem Ausführen eines Ausdrucks:

{
    "seq":118,
    "type":"request",
    "command":"evaluate",
    "arguments":{
        "expression":"a()"
    }
}

Weiter ausführen:

{
    "seq":117,
    "type":"request",
    "command":"continue"
}

Auf diese Weise kann der Client dem Debugger-Server mitteilen, wie er den Code ausführen soll.

Debugger-Client

Debugger-Client verfügt im Allgemeinen über eine Benutzeroberfläche (natürlich können Sie das Debuggen auch über Befehle in der Befehlszeile durchführen, dies wird jedoch im Allgemeinen nicht durchgeführt). Zu den gängigen JS-Debugger-Clients gehören Chrome Devtools und Vscode Debugger.

Wir schreiben ein einfaches JS-Skript und führen es über den Knoten --inspect-brk aus:

Sie können sehen, dass es auf Port 9229 startet.

Dann verbinden wir uns jeweils über zwei Clients damit.

chrome devtools

Geben Sie chrome://inspect in die Chrome-Adressleiste ein und klicken Sie dann auf Konfigurieren, um den Zielport zu konfigurieren:

Geben Sie jetzt den Port 9229 ein:

Dann können Sie sehen, dass Chrome das Ziel gescannt hat, und auf „Inspizieren“ klicken, um eine Verbindung zum Debugger-Server herzustellen.

Danach können Sie Haltepunkte festlegen, Einzelschrittausführungen durchführen, Ausdrücke ausführen, Bereichsvariablen anzeigen usw. Diese Funktionen werden alle über das v8-Debugprotokoll implementiert.

vscode-Debugger

Das Schreiben von Code in vscode und das Debuggen in Chrome Devtools ist problematischer. vscode unterstützt auch den Debugger. Sie können vscode direkt zum Debuggen verwenden.

Die Möglichkeit, die Debugging-Funktionen von vscode zu nutzen, besteht darin, die Konfiguration .vscode/launch.json im Stammverzeichnis des Projekts zu ändern.

anhängen

Klicken Sie auf die Schaltfläche in der unteren rechten Ecke, um ein Konfigurationselement hinzuzufügen. Wählen Sie hier „nodejs attachment“ aus:

Da der Websocket-Debugger-Server über node --inspect-brk gestartet wurde, müssen Sie nur den Websocket-Client starten und dann eine Verbindung zum 9229-Port herstellen.

点击左侧的按钮，就可以连上 debugger server 开始调试：

launch

这样先通过 node --inspect-brk 启动 debugger server，然后再添加 vscode debug 配置来连接上太麻烦了，能不能把这两步合并呢？

当然可以，只要添加一个 launch 的配置：

这里的 type 是 launch，就是启动 debgger server 并且启动一个 debugger client 连接上该 server。运行的程序是根目录下的 index2.js，还可以设置 stopOnEntry 来在首行断住。

点击调试，就可以看到能够成功的调试该 js 文件。

vscode 会启动 debugger server，然后启动 debugger client 自动连接上该 server，这些都不需要我们去关心。

这样我们就可以成功的使用 vscode debugger 来调试 nodejs 代码。

vscode debugger 进阶

debugger client 中我们最常用的还是 vscode，这里着重讲一下 vscode debugger 的各种场景下的配置。

sourcemap

如果调试 ts 代码，肯定不能调试编译后的代码，要能够映射回源码，这个是 sourcemap 做的事情。调试工具都支持 sourcemap，比如 chrome devtools 和 vscode debugger，都支持文件末尾的 sourcemap url 的解析：

//# sourceMappingURL=index.js.map

这样当调试 index.js的时候，如果它是 ts 编译的出来的，就会自动找到对应的 ts。

当然，如果调试配置里面直接指定了 ts，那么要能够调试需要再配置 outFiles，告诉 vscode 去哪里找 sourcemap。

这样，在 ts 源码中打的断点和在编译出的 js 打的断点都能生效。

多进程调试

当代码中有子进程的时候，就有了第二条控制流，需要再启动一个 debugger。

比如 vscode，它是基于 electron，需要启动一个主进程，一些渲染进程。主进程是通过 launch 启动的，而渲染进程则是后来 attach 的。

主进程启动的时候，通过 --remote-debugging-port 来指定子进程自动的时候的 debugger server 的端口。

outFiles 来指定 sourcemap 的位置，这样才可以直接调试 ts 源码。runtimeExecutable 是用 vscode 的运行时替代掉了 nodejs（一般不需要设置）。

然后渲染进程是后面启动的，我们通过参数配置了会启动在 9222 端口，那么只要 attach 到那个端口就可以调试该进程了。

vscode 支持多 target 调试，也就是可以在 vscode 里面同时启动 多个 debugger。可以切换不同的 debugger 来调试不同的进程。

彩蛋

debugger 只能打断点么，不是的，它还可以这么用，加日志，不污染源码。

总结

debugger 的使用是一项很重要的能力，对于 nodejs 水平的提升很有帮助。

nodejs debugger 的原理是 js 引擎会启动 debugger server（websocket），等待客户端连接，我们可以通过各种 debugger client 连上来进行调试，比如 chrome devtools、vscode debugger。

Um NodeJS-Code zu debuggen, ist es besser, den vscode-Debugger zu verwenden (natürlich werden manchmal auch Chrome Devtools zum Debuggen verwendet, und eine Speicheranalyse basierend auf dem Speicher von Chrome Devtools ist sehr hilfreich beim Auffinden von Speicherverlustproblemen).

Die Verwendung des vscode-Debuggers dient hauptsächlich dem Hinzufügen einer Debugging-Konfiguration in .vscode/launch.json.

Die Debugging-Konfiguration ist in „Starten“ und „Anhängen“ unterteilt:

• Launch startet den Debugger-Server und stellt mit dem Debugger-Client eine Verbindung zu ihm her.
• Attach startet lediglich den Debugger-Client, um eine Verbindung zum vorhandenen Debugger-Server herzustellen. Sie müssen also angeben, was Port

spezifische Konfiguration. Häufig verwendete Elemente sind:

• outFiles gibt den Speicherort der Sourcemap an, die zum Debuggen von TS-Quellcode und anderen Codes verwendet wird, die kompiliert werden müssen.
• stopOnEntry stoppt in der ersten Zeile.
• args, um einen Befehl anzugeben Zeilenparameter
• runtimeAusführbar, wenn die Ausführung nicht nodejs ist Manchmal müssen Sie angeben, z. B. vscode oder einige andere Laufzeiten

Basierend auf diesen Konfigurationen können wir NodeJS-Code in verschiedenen Szenarien debuggen, der kompiliert werden muss, oder in mehreren Prozessen.

Es ist keine Übertreibung zu sagen, dass es viel einfacher sein wird, verschiedene NodeJS-Codes zu verstehen, wenn Sie mit der Verwendung des Debuggers vertraut sind. Ich hoffe, dieser Artikel kann jedem helfen, das Prinzip des Debuggers zu verstehen und Chrome Devtools oder Vscode Debugger zum Debuggen von NodeJS-Code verwenden zu können. Erfahren Sie, wie Sie mit Sourcemap und mehreren Prozessen debuggen.

Ursprüngliche Adresse: https://juejin.cn/post/6981820158046109703

Autor: zxg_Gott sagte, es muss Licht sein

Weitere Kenntnisse im Bereich Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Verwendungsfähigkeiten des Debuggers in vscode sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!