vscode でのデバッガーの使用スキルについて話しましょう

学習 nodejs 最も重要なことは何ですか?おそらく誰もが独自の答えを持っています。

nodejs を学習するときに、基本的な API といくつかの一般的に使用されるパッケージを習得することに加えて、最も重要な能力はデバッガーの使用方法を学ぶことだと思います。プロセスが複雑な場合、ブレークポイント デバッグはロジックを明確にするのに役立ち、バグがある場合は問題をより早く特定できるためです。 [推奨学習: "nodejs チュートリアル"、"vscode チュートリアル"]

ウルフおじさんは、プログラマの nodejs レベルのロゴを区別するには、デバッガを使用できるかどうかが重要であると述べました。

この記事では、デバッガーの原則と vscode デバッガーの使用スキルについて説明します。

デバッガの原則

nodejs コードを実行するときに、--inspect (ブレークポイントの可能性あり) または - -inspect- を指定すると、 brk (ポイントをブレークし、最初の行でブレークできます) パラメーターを指定すると、デバッガー モードで開始されます:

が表示され、ノードが Web ソケット サーバーを開始しました。 、アドレスは次のとおりです: ws://127.0.0.1:9229/78637688-e8e0-4582-80cc-47655f4bff66

デバッガーが WebSocket サーバーを開始するのはなぜですか?

デバッガーの意味は、どこかで停止し、単一ステップで実行し、環境内の変数を表示することです。したがって、ブレークポイントを設定し、現在のコンテキストの変数を公開するには、WebSocket サーバーを起動する必要があります。現時点では、WebSocket クライアントを起動し、サーバーに接続して、nodejs コードをデバッグするだけです。

v8 デバッグ プロトコル

接続後、デバッガー サーバーとデバッガー クライアントはどのように通信しますか?これには、v8 デバッグ プロトコルが関係します。

双方が認識できる形式で通信します。例:

test.js の 100 行目にブレークポイントを設定します:

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

次に、次の変数を表示します。現在のスコープ:

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

式を実行:

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

その後実行を継続:

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

このようにして、クライアントはデバッガー サーバーにコードの実行方法を伝えることができます。 。

デバッガ クライアント

デバッガ クライアントには通常、UI があります (もちろんコマンド ラインでのデバッグ)コマンドを使用することも可能ですが、通常は行われません)。一般的な JS デバッガー クライアントには、chrome devtools や vscode デバッガーが含まれます。

簡単な JS スクリプトを作成し、ノード --inspect-brk を通じて実行します。

これがポート 9229 で開始されることがわかります。

次に、2 つのクライアントをそれぞれ経由して接続します。

chrome devtools

Chrome アドレス バーに chrome://inspect と入力し、[configure] をクリックしてターゲット ポートを構成します。

今、ポート 9229 を入力します。

Chrome がターゲットをスキャンしたことがわかります。[検査] をクリックして接続します。このデバッガ サーバー。

その後、ブレークポイントの設定、シングルステップ実行、式の実行、スコープ変数の表示などを行うことができます。これらの関数はすべてこれは、v8 デバッグ プロトコルを使用して実装されます。

vscode デバッガー

vscode でコードを記述し、Chrome devtools でデバッグするのはさらに面倒です。vscode はデバッガーもサポートしており、vscode を直接使用して次のことを行うことができます。デバッグ。

vscode デバッグ機能を使用する方法は、プロジェクトのルート ディレクトリにある .vscode/launch.json 構成を変更することです。

attach

右下隅のボタンをクリックして構成アイテムを追加します。ここで、nodejs のアタッチを選択します。

WebSocket のデバッガー サーバーは、node --inspect-brk を通じて起動されているため、WebSocket クライアントを起動するだけで済みます。次に、ポート 9229 に接続します。

点击左侧的按钮，就可以连上 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。

nodejs コードをデバッグするには、vscode デバッガーを使用することをお勧めします (もちろん、デバッグに chrome devtools が使用されることもあります。chrome devtools のメモリに基づくメモリ分析は、メモリ リークの問題を特定するときに非常に役立ちます)。

vscode デバッガーの使用は、主に .vscode/launch.json にデバッグ構成を追加することです。

デバッグ構成は起動とアタッチに分かれています。

• 起動はデバッガー サーバーを起動し、デバッガー クライアントを使用してそれに接続します。
• アタッチはデバッガー クライアントを開始するだけです既存の 1 つのデバッガー サーバーに接続するため、ポート

一般的に使用される特定の構成項目は次のとおりです。

• outFiles はソースマップの場所を指定します。 ts ソース コードおよびコンパイルが必要なその他のコードをデバッグするために使用されます。ランタイムが vscode やその他のランタイムなど、nodejs ではない場合に指定する必要があります。
• これらの構成に基づいて、コンパイルが必要なさまざまなシナリオまたは複数のプロセスで、nodejs コードをデバッグできます。
• デバッガーの使用に慣れていれば、さまざまな Nodejs コードを理解するのがはるかに簡単になると言っても過言ではありません。
この記事が、誰もがデバッガーの原理を理解し、Chrome devtools または vscode デバッガーを使用して nodejs コードをデバッグできるようになることを願っています。ソースマップと複数のプロセスを使用してデバッグする方法を理解します。

元のアドレス: https://juejin.cn/post/6981820158046109703

作者: zxg_God は光があるに違いないと言いました

その他のプログラミング関連知識については、

プログラミング入門

をご覧ください。 ！

以上がvscode でのデバッガーの使用スキルについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。