Parlons de deux façons de déboguer le code Node.js-js tutoriel-php.cn

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 !

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

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

Copier après la connexion

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(&#39;koa&#39;);

const app = new Koa();
console.log(&#39;test&#39;)

// 中间件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`);
});

Copier après la connexion

V8 Inspector Protocol + Chrome DevTools

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

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

node --inspect=8888 index.js

Copier après la connexion

结果如下：

Parlons de deux façons de déboguer le code Node.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"
    }
]

Copier après la connexion

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

第二种方式

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

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

Copier après la connexion

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

可以看到界面如下：

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

第三种方式

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

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

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

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

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

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

Vscode 调试

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

Launch Configuration

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

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

选择 Node.js

Parlons de deux façons de déboguer le code 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"
    }
  ]
}

Copier après la connexion

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) : Parlons de deux façons de déboguer le code Node.js rrreee

Les résultats sont les suivants :

Parlons de deux façons de déboguer le code Node.js 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.