Lassen Sie uns über zwei Möglichkeiten zum Debuggen von Node.js-Code sprechen

Wie debugge ich meinen Node-Code? Der folgende Artikel stellt Ihnen zwei gängige Methoden zum Debuggen von Node.js vor. Er hat einen gewissen Referenzwert und ich hoffe, er wird Ihnen hilfreich sein!

Oft mache ich mir Sorgen um das Debuggen von Node.js und verwende nur die aufdringliche Methode von console.log, aber tatsächlich kann Node.js auch so praktisch sein wie das Browser-Debuggen.

Umgebung dieses Artikels:

mac
Chrome 94.0.4606.81
node v12.12.0
vscode Version: 1.61.1

Beispiel dieses Artikels

Das Beispiel dieses Artikels verwendet das zuvor untersuchte Zwiebelmodell. Es gibt nur eine Datei, nämlich index.js Stammverzeichnis wie folgt: index.js，如下：

const Koa = require('koa');

const app = new Koa();
console.log('test')

// 中间件1
app.use((ctx, next) => {
  console.log(1);
  next();
  console.log(2);
});

// 中间件 2 
app.use((ctx, next) => {
  console.log(3);
  next();
  console.log(4);
});

app.listen(9000, () => {
    console.log(`Server is starting`);
});

V8 Inspector Protocol + Chrome DevTools

v8 Inspector Protocol 是 nodejs v6.3 新加入的调试协议，通过 websocket与 Client/IDE 交互，同时基于 Chrome/Chromium 浏览器的 devtools 提供了图形化的调试界面。

我们进入项目根目录，执行（留意这个 8888 端口，后面会用到）：

node --inspect=8888 index.js

结果如下：

结果出来一个链接——ws://127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d。这个链接是 Node.js 和 Chrome 之前通信的 websocket 地址，通过 websocket 通信，我们可以在 Chrome 中实时看到 Node.js 的结果。

如何进入 Chrome 的调试界面

第一种方式（自己尝试无效）

打开 http://localhost:8888/json/list，其中 8888 是上面 --inspect 的参数。

[
    {
        "description": "node.js instance",
        "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "faviconUrl": "https://nodejs.org/static/images/favicons/favicon.ico",
        "id": "5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d",
        "title": "index.js",
        "type": "node",
        "url": "file:///Users/gpingfeng/Documents/Personal/Test/test-onion/index.js",
        "webSocketDebuggerUrl": "ws://localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d"
    }
]

很多资料说，可以通过 devtoolsFrontendUrl 就可以直接访问到，但尝试了一下，并没有成功。【可能跟我的环境有关】

第二种方式

查了一下资料，在 stackoverflow 找到对应的方案，如下：

devtools://devtools/bundled/inspector.html?experiments=true&ws=127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d

其中 devtools://devtools/bundled/inspector.html?experiments=true 是固定的，ws 参数对应的就是 websocket 地址。

可以看到界面如下：

第三种方式

Chrome 浏览器打开 HTTP 监听接口页面，打开 dev tool，执行完 node --inspect=8888 index.js 后可以看到这个图标，点击一下：

就可以出现跟浏览器一样的调试页面，比如 Sources Panel查看脚本、Profile Panel 监测性能等。

另外，可以访问访问 chrome://inspect/#devices，可以看到当前浏览器监听的所有 inspect。

Vscode 调试

除了浏览器之外，各大主流的 IDE 都支持 Node.js 的调试，本文以 Vscode 为例。

Launch Configuration

打开调试页面，给我们 Node 项目添加一个 launch 配置：

选择 Node.js

这样就会在项目根目录生成对应的文件 .vscode/launch.json（当然你也可以手动创建），其中 program 指的就是文件入口，${workspaceFolder}

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

V8 Inspector Protocol + Chrome DevTools

v8 Inspector Protocol ist ein neu hinzugefügtes Debugging-Protokoll in NodeJS v6.3. Es interagiert mit dem Client /IDE über Websocket und basiert auf dem Chrome/Chromium-Browser. Devtools bietet eine grafische Debugging-Oberfläche.

Wir geben das Projektstammverzeichnis ein und führen es aus (beachten Sie den 8888-Port, der später verwendet wird): rrreee

Die Ergebnisse sind wie folgt:

Das Ergebnis ist ein Link——ws://127.0 .0.1:8888/5f5c59fc -d42b-4ab0-be15-6feb1a05ed2d. Dieser Link ist die Websocket-Adresse, die Node.js und Chrome zuvor für die Kommunikation verwendet haben. Durch die Websocket-Kommunikation können wir die Ergebnisse von Node.js in Chrome in Echtzeit sehen.

So rufen Sie die Debugging-Oberfläche von Chrome auf

Die erste Methode (es selbst auszuprobieren funktioniert nicht)

🎜Öffnen Sie http: // localhost:8888/json/list, wobei 8888 der Parameter von --inspect oben ist. 🎜rrreee🎜Viele Informationen besagen, dass der Zugriff direkt über devtoolsFrontendUrl möglich ist, aber ich habe es versucht und es hat nicht funktioniert. [Es hängt möglicherweise mit meiner Umgebung zusammen]🎜🎜Zweite Methode🎜🎜Ich habe die Informationen überprüft und sie unter stackoverflow🎜 Finden Sie die entsprechende Lösung , Wie folgt: 🎜rrreee🎜wobei devtools://devtools/bundled/inspector.html?experiments=true fest ist und der Parameter ws der Websocket-Adresse entspricht. 🎜🎜Sie können die Schnittstelle wie folgt sehen: 🎜🎜🎜🎜Die dritte Methode🎜🎜Öffnen Sie die Seite der HTTP-Listening-Schnittstelle im Chrome-Browser, öffnen Sie das Entwicklungstool und beenden Sie die Ausführung von node --inspect=8888 index .js Sie können dieses Symbol sehen, nachdem Sie auf Folgendes geklickt haben: 🎜🎜🎜🎜Es erscheint dieselbe Debugging-Seite wie im Browser, z. B. das Quellenfenster zum Anzeigen von Skripts, das Profilfenster zum Überwachen der Leistung usw. 🎜🎜🎜🎜Auch , können Sie chrome://inspect/#devices besuchen und alle vom aktuellen Browser überwachten Inspektionen sehen. 🎜🎜🎜

Vscode-Debugging🎜🎜Zusätzlich zu Browsern unterstützen alle wichtigen IDEs das Node.js-Debugging. In diesem Artikel wird Vscode als Beispiel verwendet. 🎜

Startkonfiguration

🎜Öffnen Sie die Debugging-Seite und fügen Sie eine Startkonfiguration zu unserem Node-Projekt hinzu: 🎜🎜🎜🎜Wählen Sie Node.js🎜🎜🎜🎜Dadurch wird die entsprechende Datei im Projektstammverzeichnis generiert . vscode/launch.json (Sie können es natürlich auch manuell erstellen), wobei sich program auf den Dateieintrag und ${workspaceFolder bezieht das Stammverzeichnis. 🎜rrreee🎜Drücken Sie F5 oder klicken Sie auf die folgende Schaltfläche: 🎜🎜🎜🎜🎜Ergebnis: 🎜🎜🎜🎜🎜Sie können sehen, dass links der Wert des aktuellen Bereichs, der Aufrufstapel und andere Informationen sowie die Funktion angezeigt werden können Kann auch oben rechts Schritt für Schritt debuggt werden, Neustart und andere Funktionen, sehr leistungsstark. 🎜

Attach to Node Process Action

Mit der Attach to Node Process Action können wir den laufenden Node.js-Prozess direkt debuggen.

Lassen Sie uns zum Beispiel zuerst das Projekt starten – npm run start. npm run start。

然后 command + shift + p（window Ctrl+Shift+p），输入 Attach to Node Process Action

Dann Befehl + Umschalt + P (Fenster Strg+Umschalt+p), geben Sie Attach to Node Process Action ein, drücken Sie die Eingabetaste und wählen Sie aus Wenn der Prozess ausgeführt wird und Sie die Eingabetaste drücken, können Sie den Code wie oben konfiguriert debuggen.

Zusammenfassung

Dieser Artikel fasst zwei gängige Methoden zum Debuggen von Node.js zusammen. Das erste Node.js überträgt Informationen über Websocket an den Chrome-Browser und wir debuggen direkt in Chrome. Die zweite besteht darin, über die Vscode-Startkonfiguration und die benutzerdefinierte Konfiguration zu debuggen. Mit der Aktion „An Knotenprozess anhängen“ können Sie den laufenden Node.js-Code bequem und ohne Konfiguration debuggen.

Weitere Informationen zu Knoten finden Sie unter: nodejs-Tutorial

! ! 🎜

Das obige ist der detaillierte Inhalt vonLassen Sie uns über zwei Möglichkeiten zum Debuggen von Node.js-Code sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!