vscodeでNode.jsプログラムをより簡単かつ効率的にデバッグする方法を詳しく解説！ ！

この記事では、vscode を使用して Node.js をデバッグする非常に簡単な方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

推奨学習: 「vscode チュートリアル 」、「nodejs チュートリアル 」

Let's Let's正直に言うと...Node.js のデバッグは常に面倒な作業でした。

Node.js のデバッグの問題点に到達する

幸運にもコードを書くことができた方はNode.js プロジェクトの場合、問題をデバッグして問題を見つけるのは簡単なことではありません。

ブラウザーの JavaScript や、IntelliJ のような強力な IDE を備えた Java とは異なり、どこにでもブレークポイントを設定したり、ページを更新したり、コンパイラーを再起動したりすることはできません。また、コードをゆっくりレビューしてオブジェクトを検査したり、関数を評価したりすることもできません。バリエーションや欠落している変数などを見つけます。それができないのは残念です。

ただし、Node.js もデバッグできますが、手間がかかるだけです。これらのオプションについて詳しく説明し、私が開発経験の中で遭遇した最も簡単なデバッグ方法を紹介します。

Node.js をデバッグするためのいくつかの代替方法

問題のある Node.js プログラムをデバッグする方法はいくつかあります。これらの方法を以下にリストしました (詳細なリンク付き)。興味のある方はぜひチェックしてみてください。

• Console.log() — JavaScript コードを書いたことがあるなら、この信頼できるスタンバイについてはこれ以上説明する必要はありません。これは、JavaScript に組み込まれてブラウザーのコンソールに印刷されるのと同じように、Node.js に組み込まれてターミナルに印刷されます。

Java 言語では、System.out.println() となります。 Python では、print() です。私の言いたいことはわかりますね。これは実装が最も簡単で、余分な情報行を含む「汚れた」クリーンなコードを最速で実現する方法ですが、(場合によっては) バグの発見と修正にも役立ちます。

• Node.js ドキュメント—-inspect — Node.js ドキュメントの作成者自身も、デバッグが簡単ではないことを理解しているため、いくつかの作業を行っていますデバッグを開始する際に役立つ便利なリファレンス 。

これは便利ですが、正直なところ、しばらくプログラムを作成したことがない限り、これを解読するのは簡単ではありません。彼らはすぐに UUID、WebSocket、セキュリティの脆弱性の罠にはまり、私は圧倒され始めました。私はこう考えました。もっと簡単にこれを行う方法があるはずです。

• Chrome DevTools — Paul Irish は、2016 年に Chrome デベロッパー ツールを使用して Node.js をデバッグすることについて ブログ投稿 を書きました (そして 2018 年に更新されました)。見た目は非常にシンプルで、デバッグが大幅に改善されました。

30 分経ってもまだ DevTools ウィンドウを単純な Node プログラムに正常に接続できていないので、もうよくわかりません。私が指示に従えないだけかもしれませんが、Chrome DevTools を使用するとデバッグが必要以上に複雑になるようです。

• JetBrains — JetBrains は私のお気に入りのソフトウェア開発会社の 1 つであり、IntelliJ と WebStorm の開発者の 1 つです。彼らのツールには素晴らしいプラグイン エコシステムがあり、最近まで私にとって頼りになる IDE でした。

このような専門的なユーザー ベースがあるため、Node のデバッグに役立つ記事がたくさんありますが、Node のドキュメントや Chrome DevTools オプションと同様に、それは簡単ではありません。 WebStorm の準備が整う前に、デバッグ構成を作成し、実行中のプロセスをアタッチし、環境設定で多くの構成を行う必要があります。

• Visual Studio Code — これは、ノードのデバッグに関する私の新しいゴールド スタンダードです。こんなことを言うとは思っていませんでしたが、私は VS Code に完全に投資しており、チームが新機能をリリースするたびに、この IDE がさらに好きになります。

VS Code は、Node.js のデバッグ の他のすべてのオプションが実行できないことを実行するため、確実に実行できます。デバッグをより高度なものにしたい場合は、それは確かに可能ですが、IDE、ノード、プログラミングの熟練度に関係なく、誰でもすぐに立ち上げて実行できるように非常にシンプルに分類されています。これはすごいですね。

Node.js をデバッグするための VS Code の構成

## さて、Node をデバッグするように VS Code を構成し、構成を開始しましょう。

[環境設定] > [設定] を開き、検索ボックスに node debug と入力します。 Extensions タブの下に Node debug という拡張機能があるはずです。最初のボックス (デバッグ > ノード: 自動接続 ) をクリックし、ドロップダウン ボックス オプションを on に設定します。これで設定はほぼ完了しました。はい、とても簡単です。

次に、プロジェクト ファイルに移動し、ファイルの左側のサイドバーをクリックして、コードが一時停止するのを確認したい場所にブレークポイントを設定します。ターミナルに

node --inspect と入力します。見てください、何か魔法のようなことが起こりました...

VS Code 進行中のコード デバッグ

Node .js プロジェクトが必要な場合は、テストしてください。私のリポジトリをダウンロードできます。これは、Node を使用して大量のデータを転送するさまざまな形式をテストすることを目的としていますが、このデモではうまく機能します。

Enter キーを押すと、VS Code ターミナルの下部がオレンジ色に変わり、デバッグ モードになっていることを示し、コンソールには Debugger のような内容が表示されます。添付のに関する情報。

このシーンが表示されたら、Node.js がデバッグ モードで実行されるようになりました。おめでとうございます。

この時点で、画面の左下隅に設定したブレークポイントが表示され (チェックボックスを使用してこれらのブレークポイントの有効ステータスを切り替えることができます)、デバッグに進むことができます。 IDE の上部中央には、コードをステップ実行するための小さな続行、ステップアウト、ステップイン、再実行などのボタンがあります。 VS Code では、ブレークポイントや停止した行も黄色で強調表示されるため、追跡しやすくなります。

あるブレークポイントから別のブレークポイントに切り替えると、プログラムが VS Code .log の下部にあるデバッグ コンソールに大量の

console を出力することがわかります。 、黄色のハイライトも一緒に移動します。

ご覧のとおり、プログラムを実行すると、デバッグ コンソールの出力が増えるほど、より多くのブレークポイントが表示され、その過程で、上部のツールを使用できるようになります。 VS Code の左隅をクリックして、ブラウザーでスコープやオブジェクトを探索できるのと同じように、ローカル スコープ内のオブジェクトと関数を探索します。良い！

それは簡単ですよね?

概要

Node.js のデバッグは、以前ほど面倒になる必要はなく、500 を超える

コンソールを含める必要もありません。コードベース # の log## を参照して、バグの場所を見つけます。 Visual Studio Code の

Debug > Node: Auto Attach

設定により、これは過去のものになり、これには非常に感謝しています。 数週間以内に、Puppeteer とヘッドレス Chrome を使用したエンドツーエンドのテスト、または Nodemailer を使用した MERN アプリのパスワードのリセットに関する記事をいくつか書く予定ですので、お見逃しないようフォローしてください。

読んでいただきありがとうございます。この記事が、VS Code を使用して Node.js プログラムをより簡単かつ効果的にデバッグする方法を理解するのに役立つことを願っています。拍手と私の記事をシェアしていただき、本当にありがとうございます！

元のアドレス: https://itnext.io/the-absolute-easyest-way-to-debug-node-js-with-vscode-2e02ef5b1bad

元の著者: Paige Niedringhaus

翻訳の永久リンク: https://github.com/xitu/gold-miner/blob/master/TODO1/the-absolute-easyest-way-to-debug-node-js-with- vscode.md

翻訳者:iceytea

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

プログラミング ビデオ

をご覧ください。 ！

以上がvscodeでNode.jsプログラムをより簡単かつ効率的にデバッグする方法を詳しく解説！ ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。