Parlons de deux façons de déboguer le code Node.js

Comment déboguer votre code Node ? L'article suivant vous présentera deux façons courantes de déboguer Node.js. Il a une certaine valeur de référence et j'espère qu'il vous sera utile !

Souvent, je m'inquiète du débogage de Node.js, et j'utilise uniquement la méthode intrusive de console.log, mais en fait, Node.js peut aussi être aussi pratique que le débogage du navigateur.

Environnement de cet article :

mac
Chrome 94.0.4606.81
node v12.12.0
vscode Version: 1.61.1

Exemple de cet article

L'exemple de cet article utilise le modèle onion qui a été exploré précédemment. Il n'y a qu'un seul fichier, qui est index.js dans le fichier. répertoire racine, comme suit : 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 est un protocole de débogage nouvellement ajouté dans nodejs v6.3. Il interagit avec le client. /IDE via websocket et est basé sur le navigateur Chrome/Chromium et fournit une interface de débogage graphique.

Nous entrons dans le répertoire racine du projet et exécutons (notez le port 8888, qui sera utilisé plus tard) : rrreee

Les résultats sont les suivants :

Le résultat est un lien——ws://127.0 .0.1:8888/5f5c59fc -d42b-4ab0-be15-6feb1a05ed2d. Ce lien est l'adresse websocket que Node.js et Chrome utilisaient auparavant pour communiquer. Grâce à la communication websocket, nous pouvons voir les résultats de Node.js dans Chrome en temps réel.

Comment accéder à l'interface de débogage de Chrome

La première méthode (l'essayer vous-même ne fonctionne pas)

🎜Ouvrez http : // localhost:8888/json/list, où 8888 est le paramètre de --inspect ci-dessus. 🎜rrreee🎜Beaucoup d'informations indiquent qu'il est accessible directement via devtoolsFrontendUrl, mais je l'ai essayé et cela n'a pas fonctionné. [Cela peut être lié à mon environnement]🎜🎜Deuxième méthode🎜🎜J'ai vérifié l'information et je l'ai trouvée sur stackoverflow🎜 Trouver la solution correspondante , Comme suit : 🎜rrreee🎜où devtools://devtools/bundled/inspector.html?experiments=true est corrigé et le paramètre ws correspond à l'adresse websocket. 🎜🎜Vous pouvez voir l'interface comme suit : 🎜🎜🎜🎜La troisième méthode🎜🎜Ouvrez la page de l'interface d'écoute HTTP dans le navigateur Chrome, ouvrez l'outil de développement et terminez l'exécution de node --inspect=8888 index .js Vous pouvez voir cette icône après avoir cliqué : 🎜🎜🎜🎜La même page de débogage que le navigateur apparaîtra, comme le panneau Sources pour afficher les scripts, le panneau de profil pour surveiller les performances, etc. 🎜🎜🎜🎜Aussi , vous pouvez visiter chrome://inspect/#devices et vous pouvez voir toutes les inspections surveillées par le navigateur actuel. 🎜🎜🎜

Débogage Vscode🎜🎜En plus des navigateurs, tous les principaux IDE prennent en charge le débogage Node.js. Cet article prend Vscode comme exemple. 🎜

Configuration de lancement

🎜Ouvrez la page de débogage et ajoutez une configuration de lancement à notre projet Node : 🎜🎜🎜🎜Choisissez Node.js🎜🎜🎜🎜Cela générera le fichier correspondant dans le répertoire racine du projet . vscode/launch.json (bien sûr, vous pouvez également le créer manuellement), où program fait référence à l'entrée du fichier et ${workspaceFolder} fait référence à le répertoire racine. 🎜rrreee🎜Appuyez sur F5 ou cliquez sur le bouton suivant : 🎜🎜🎜🎜🎜Résultat : 🎜🎜🎜🎜🎜Vous pouvez voir que la valeur de la portée actuelle, de la pile d'appels et d'autres informations peuvent être affichées sur la gauche, et la fonction peut également être débogué étape par étape en haut à droite, redémarrage et autres fonctions, très puissantes. 🎜

Attach to Node Process Action

Avec Attach to Node Process Action, nous pouvons directement déboguer le processus Node.js en cours d'exécution.

Par exemple, commençons d'abord le projet——npm run start. npm run start。

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

Puis commande + shift + p (fenêtre Ctrl+Shift+p), entrez Attach to Node Process Action, appuyez sur Entrée et sélectionnez Lorsque le processus est en cours d'exécution et appuyez sur Entrée, vous pouvez déboguer le code comme configuré ci-dessus.

Résumé

Cet article résume deux méthodes courantes de débogage de Node.js. Le premier Node.js transmet les informations au navigateur Chrome via websocket, et nous débogueons directement dans Chrome. La seconde consiste à déboguer via la configuration de lancement de Vscode et la configuration personnalisée. Grâce à Attach to Node Process Action, vous pouvez facilement déboguer le code Node.js en cours d’exécution sans configuration.

Pour plus de connaissances sur les nœuds, veuillez visiter : tutoriel Nodejs

 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!