Node.js コードをデバッグする 2 つの方法について話しましょう

Node コードをデバッグするにはどうすればよいですか?次の記事では、Node.js をデバッグするための 2 つの一般的な方法を紹介します。これは一定の参考価値があるため、お役に立てれば幸いです。

Node.js のデバッグについて心配して、console.log という煩わしい方法しか使用しないことがよくありますが、実際には、Node.js では次のこともできます。ブラウザのデバッグと同じくらい便利です。

この記事の環境:

mac
Chrome 94.0.4606.81
node v12.12.0
vscode Version: 1.61.1

この記事の例

この記事の例では、以前に検討したタマネギ モデルを使用しています。ファイルは 1 つだけです。 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 を通じてクライアント/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 通信を通じて、Node.js の結果を Chrome 上でリアルタイムに確認することができます。

Chrome のデバッグ インターフェイスに入る方法

最初の方法 (自分で試してみるのは無効です)

Openhttp://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 から直接アクセスできると記載されていますが、試してみましたが、うまくいきませんでした。 [私の環境に関連している可能性があります]

2 番目の方法

# 情報を確認したところ、

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 アドレスに対応しています。 次のようなインターフェイスが表示されます。

3 番目のメソッド

Chrome ブラウザで HTTP リスニングが開きます。インターフェイス ページで開発ツールを開き、

node --inspect=8888 Index.js

を実行すると、次のアイコンが表示されるので、それをクリックします。

スクリプトを表示するソース パネル、パフォーマンスを監視するプロファイル パネルなど、ブラウザと同じデバッグ ページが表示されます。

さらに、

chrome://inspect/#devices

にアクセスすると、ブラウザで現在監視されているすべての検査を確認できます。

Vscode のデバッグ

ブラウザに加えて、すべての主要な IDE は Node.js のデバッグをサポートしています。この記事では例として Vscode を取り上げます。

起動構成

デバッグ ページを開き、Node プロジェクトに起動構成を追加します:

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"
    }
  ]
}

F5 を押すか、次のボタンをクリックしてください:

結果:

あなたが表示され、左側に現在のスコープの値、コールスタック、その他の情報が表示され、右上では関数を徐々にデバッグしたり、再起動したりすることもでき、非常に強力です。

ノード プロセス アクションにアタッチ

ノード プロセスにアタッチ アクションを使用すると、実行中の Node.js プロセスを直接デバッグできます。

たとえば、最初にプロジェクトを開始しましょう——npm run start。

次に、command Shift p (ウィンドウ Ctrl Shift p)、「Attach to Node Process Action」 と入力し、Enter キーを押して、実行中のアクションを選択します。プロセス もう一度 Enter キーを押すと、上記の構成に従ってコードをデバッグできます。

#概要

この記事では、Node.js をデバッグする 2 つの一般的な方法を要約します。最初の Node.js は WebSocket を通じて Chrome ブラウザに情報を送信し、Chrome で直接デバッグします。 2 つ目は、Vscode 起動構成とカスタム構成を通じてデバッグすることです。ノードにアタッチ プロセス アクションを使用すると、構成を行わずに実行中の Node.js コードを簡単にデバッグできます。

ノード関連の知識の詳細については、

nodejs チュートリアル を参照してください。 ！

以上がNode.js コードをデバッグする 2 つの方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。