Visual Studio Code を使用してデバッグする
前の演習では、Node.js で提供されるデバッガーを使用して、コードをステップ バイ ステップで実行できることの重要性について学習しました。 Tailwind Traders アプリケーションでの作業には、IDE (統合開発環境) 内のより包括的なデバッグ環境が必要です。
Node.js でそれを使用するように Visual Studio Code デバッガーを構成する方法について説明します。
Node.js デバッグに Visual Studio Code を使用する方法
Visual Studio Code では、[実行] タブからデバッガーにアクセスします。
エディター ウィンドウで
.jsファイルを開いている場合は、[実行/デバッグ] をクリックしてから [Node.js] を選択して、この JavaScript ファイルを直接デバッグできます。
Visual Studio Code でデバッグを開始するには、他にもいくつかの方法があります。 次の演習では、launch.json ファイルを使用します。 開発チームは、多くの場合、launch.json ファイルを使用して実行構成をカスタマイズします。 .json ファイルで指定された構成を使用して、ソース管理にチェックインできます。 ソース管理から、チーム全体で構成を共有できます。
ブレークポイントを追加してフローを制御する
組み込みの Node.js コマンド ライン デバッガーとは異なり、Visual Studio Code デバッガーはすぐにコードの実行を開始します。 プログラムが短時間で終了した場合、デバッガーと対話する機会がない可能性があります。 そのため、コードを実行する前にブレークポイントを追加する場合があります。 次の演習では、ブレークポイントをいくつか追加および削除します。
コードにブレークポイントを追加するには、中断を追加する JavaScript (.js) ファイル内のコード行を見つけます。 コード ステートメントの行番号の横にある左側の余白をクリックします。 ブレークポイントが追加されると、行番号の横に赤い円が表示されます。 ブレークポイントを削除するには、赤い円をクリックしてください。
また、右クリックのコンテキスト メニューを使ってブレークポイントを追加することもできます。 コンテンツ メニューには、コード実行を中断するための "条件" を入力する [条件付きブレークポイントを追加する] オプションが含まれています。 条件付きブレークポイントは、指定した条件が満たされた場合にのみアクティブになります。
このブレークポイントは、convertedValue の値が未定義の場合にのみ実行を停止します。
Visual Studio Code デバッガーの概要
ブレークポイントを設定し、アプリを起動すると、新しい情報パネルとコントロールが画面に表示されます。
| number | 氏名 | 説明 |
|---|---|---|
| 1. | デバッガー起動コントロール | サイドバーの上部には、起動コントロールがあります。 |
| 2. | 変数の状態 | [変数] パネルには、変数の現在の状態が表示されます。 |
| 3. | ウォッチ対象の変数の状態 | [ウォッチ] パネルには、監視対象の変数の現在の状態が表示されます。 |
| 4. | 現在の呼び出し履歴 | [呼び出し履歴] パネルには、現在の呼び出し履歴が表示されます。 |
| 5. | 読み込み済みスクリプト ファイル | [読み込まれたスクリプト ファイル] パネルには、これまでに読み込まれた JavaScript ファイルが表示されます。 |
| 6. | ブレークポイント | [ブレークポイント] パネルには、コードに配置したすべてのブレークポイントが表示されます。 |
| 7. | 実行コントロール | これらのコントロールを使用して、プログラムの実行フローを制御できます。 |
| 8. | 現在実行中のステップ | 現在の実行ステップがエディター ウィンドウで強調表示されます。 |
| 9. | デバッグ コンソール | [デバッグ コンソール] を使用すると、アプリケーション コンソールのログを視覚化したり、式を評価したり、現在の実行コンテキストでコードを実行したりすることができます。 |
デバッガー起動コントロール
サイドバーの上部には、起動コントロールがあります。
| number | 氏名 | 説明 |
|---|---|---|
| 1. | デバッグを開始する | アプリケーションのデバッグを開始します。 |
| 2. | アクティブな起動構成を選択する | アクティブな起動構成を選択します。 |
| 3. | launch.json ファイルを編集します |
launch.json ファイルを編集します。 必要に応じて json ファイルを作成します。 |
| 4. | [デバッグ コンソール] を開く | [デバッグ コンソール] を開き、[変数]、[ウォッチ]、[呼び出し履歴]、[ブレークポイント] パネルの表示を切り替えます。 |
変数の状態を表示および編集する
プログラムの欠陥の原因を分析するときは、変数の状態を監視して、予期しない変更がないか探します。 これを行うには、[変数] パネルを使用できます。
変数は、スコープ別に表示されます。
| Scope | 説明 |
|---|---|
| ローカル | "ローカル変数" は、現在のスコープでアクセスできます (通常は現在の関数)。 |
| グローバル | "グローバル変数" は、プログラム内のどこからでもアクセスできます。 また、JavaScript ランタイムのシステム オブジェクトも含まれているので、たくさんの情報が表示されても驚かないでください。 |
| クロージャ | "クロージャ変数" は、現在のクロージャからアクセスできます (存在する場合)。 クロージャによって、関数のローカル スコープが、それが属する外部関数からのスコープと結合されます。 |
使用できるアクションは次のとおりです。
スコープを展開する:矢印を選択すると、スコープと変数を展開できます。 オブジェクトを展開すると、このオブジェクトで定義されているすべてのプロパティを表示できます。
変数の値を変更する:変数をダブルクリックして、その場で変数の値を変更することができます。
変数をクイック表示する:エディター ウィンドウで関数のパラメーターまたは変数を直接ポイントすることにより、その値を見ることもできます。
変数をウォッチする
変数の状態を、時間や異なる関数にわたって追跡するときに、毎回検索するのは面倒な場合があります。 そのような場合は、[ウォッチ] パネルが便利です。
プラス ボタンを選択すると、ウォッチする変数名または式を入力できます。 別の方法として、[変数] ペインで変数を右クリックし、[ウォッチに追加] を選択することもできます。
コードを実行すると、[ウォッチ] ペイン内のすべての式が自動的に更新されます。
呼び出し履歴
プログラムで関数に入るたびに、エントリが呼び出し履歴に追加されます。 アプリケーションが複雑になり、関数内で何度も呼び出される関数がある場合、呼び出し履歴は関数呼び出しの痕跡を表します。
これは例外の原因を見つけるのに役立ちます。 プログラムで予期しないクラッシュが発生した場合、コンソールにこのようなものが表示されることがよくあります。
/Users/learn/nodejs/index.js:22
return value.toFixed(2);
^
TypeError: Cannot read property 'toFixed' of undefined
at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
at printForeignValues (/Users/learn/nodejs/index.js:31:28)
at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
at internal/main/run_main_module.js:17:11
エラー メッセージの下の at [...] 行のグループは、"スタック トレース" と呼ばれます。 スタック トレースにより、例外が発生する前に呼び出されたすべての関数の名前と始点が示されます。 しかし、Node.js ランタイムの内部関数も含まれているので、解読が少し難しくなることがあります。
その場合は、Visual Studio Code の [呼び出し履歴] パネルが便利です。 また、不要な情報をフィルターで除外して、独自のコードから関連する関数だけが既定で表示されます。 次に、この呼び出し履歴をアンワインドして、例外の発生元を調べることができます。
さらに便利にするため、スタックで関数名をポイントしたときに表示される [フレームの再起動] ボタンを選択することができます。 この場合、そのポイントまでプログラムを実際に再起動することにより、実行がその関数の先頭に "巻き戻されます"。
読み込み済みスクリプト ファイルを表示する
このパネルには、これまでに読み込まれたすべての JavaScript ファイルが表示されます。 大規模なプロジェクトでは、現在のコードが実行されているファイルを確認するのに役立つ場合があります。
ブレークポイント
[ブレークポイント] パネルでは、コードに配置したすべてのブレークポイントを表示および切り替えることができます。 また、キャッチされた、あるいはキャッチされていない例外で中断するようにオプションを切り替えることもできます。 [ブレークポイント] ペインを使用してプログラムの状態を調べ、例外の発生時に [呼び出し履歴] を使用して発生元を追跡できます。
実行を制御する
これらのコントロールを使用して、プログラムの実行フローを制御できます。
左から右に、コントロールは次のように示されます。
- 実行の続行または一時停止。 実行が一時停止されている場合は、次のブレークポイントにヒットするまで続行されます。 プログラムが実行されている場合、ボタンは一時停止ボタンに切り替わり、実行を一時停止するのに使用できます。
- ステップ オーバー。 現在のコンテキストで次のコード ステートメントを実行します (組み込みデバッガーの
nextコマンドと同じ)。 - ステップ イン。 ステップ オーバーと似ていますが、次のステートメントが関数呼び出しの場合は、この関数の最初のコード ステートメントに移動します (
stepコマンドと同じ)。 - ステップ アウト。関数内にある場合は、この関数の残りのコードを実行して、最初の関数呼び出しの後のステートメントに戻ります (
outコマンドと同じ)。 - 再起動。 プログラムを最初から再起動します。
- 停止。 実行を終了し、デバッガーを終了します。
デバッグ コンソールを使用する
Ctrl + Shift + Y キー (Windows、Linux) または Cmd + Shift + Y キー (Mac) を選択すると、デバッグ コンソールを表示または非表示にすることができます。 これを使用すると、組み込みの Node.js デバッガーの exec コマンドのように、アプリケーション コンソールのログを視覚化したり、現在の実行コンテンツで式を評価したり、コードを実行したりすることができます。
デバッグ コンソールの下部にある入力フィールドに、JavaScript 式を入力することができます。 その後、Enter キーを押し、それを評価します。 結果はコンソールに直接表示されます。
このように、変数値をすばやく確認したり、さまざまな値で関数をテストしたり、現在の状態を変更したりできます。
console.log の代わりにログポイントを追加する
リンターは console.log ステートメントにエラーとしてフラグを設定します。 console.log ステートメントと同じ効果を得るには、代わりに Visual Studio Code ログポイントを使用します。これは、デバッグ コンソールに出力されます。
ブレークポイントの追加に使用したのと同じ領域を右クリックし、[ログポイントを追加] を選択してログポイントを追加します。 コード内のそのポイントで表示するメッセージを入力します。
ブレークポイントと同様に、ログポイントによってコードが変更されることはなく、これらはデバッグ中にのみ使用されます。 console.log('here') を忘れていて、運用環境までそのままにしてしまった、と言い訳をすることはなくなります。