コメント
Visual Studio CodeでJavaScriptをデバッグする方法
編集済み 6 数か月前 によって ExtremeHow 編集チーム
ビジュアルスタジオコードデバッグジャバスクリプト拡張機能設定ツールブレークポイントコンソール統合セットアップソースコード開発ウェブ開発トラブルシューティングエラープログラミングNode.jsワークフロー効率テスト
翻訳が更新されました 6 数か月前
デバッグはソフトウェア開発プロセスの重要な一部です。Visual Studio Code（VS Codeとも呼ばれます）は、JavaScriptのデバッグを強力にサポートしています。デバッグツールは、開発者がコードのバグを特定して修正しやすくするための多くの機能を提供しています。このドキュメントでは、Visual Studio Codeを使用してJavaScriptを効果的にデバッグする方法を非常に簡単な言葉で説明します。セットアップ、ブレークポイント、コードのステップ実行、変数の表示方法について説明します。始めやすくするための例も提供します。
環境のセットアップ
まず、コンピュータにVisual Studio Codeがインストールされていることを確認してください。公式のVisual Studio Codeのウェブサイトからダウンロードできます。インストール後、最新のNode.jsランタイム環境がインストールされていることを確認してください。これはブラウザ外でJavaScriptを実行するために必要です。Node.jsは公式ウェブサイトからダウンロードできます。
必要な拡張機能のインストール
Visual Studio Codeは、追加機能のために拡張機能に大きく依存しています。JavaScriptを効果的にデバッグするには、次の拡張機能をインストールすることを検討してください:
- Chrome用デバッガー: この拡張機能を使用すると、Google Chromeで実行されているクライアントサイドJavaScriptをデバッグできます。
- Node.js拡張パック: これはNode.jsアプリケーションで作業している場合に便利な拡張機能のバンドルです。
これらの拡張機能をインストールするには、VS Codeを開き、ウィンドウのサイドバーのアクティビティバーにある拡張機能アイコンをクリックし、それぞれの拡張機能を名前で検索します。
デバッグセッションの開始
環境が設定されたら、デバッグセッションを開始できます。次の手順に従ってください:
- JavaScriptファイルを開く: VS Codeで、JavaScriptプロジェクトを含むフォルダを開き、デバッグしたいファイルを見つけます。
- ブレークポイントを設定する: ブレークポイントは、デバッガーが特定のポイントでコードの実行を停止するよう指示するマーカーです。ブレークポイントを設定するには、エディタの行番号の隣の左マージンをクリックします。赤いドットが表示され、ブレークポイントが設定されたことを示します。
- デバッグ開始: ウィンドウのサイドのアクティビティバーにあるデバッグアイコンをクリックします。緑の再生ボタンをクリックするか（またはF5キーを押して）デバッグセッションを開始します。環境を選択するよう求められた場合は、"Node.js" または "Chrome" を選択し、コードを実行する場所に応じて選択します。
ブレークポイントの使用
ブレークポイントは、コードの状態を検査するために実行を一時停止できる強力なデバッグツールです。変数とその値を検査することで、コードがどのように動作しているかについて情報を得ることができます。
ブレークポイントを管理するには:
- ブレークポイントの無効化/有効化: 既存のブレークポイントを右クリックして無効化または有効化します。ブレークポイントを無効にすると、デバッガーが実行中にそれを無視します。
- ブレークポイントの削除: エディタの赤いドットをクリックしてブレークポイントを削除します。
- 条件付きブレークポイント: ブレークポイントを右クリックして "条件付きブレークポイントの追加" を選択します。これにより、指定した条件が満たされたときにのみコードの実行が停止します。
コードをステップ実行する
ブレークポイントがヒットしたら、コードをさらに進めるためのいくつかのオプションがあります:
- 続行
>|: 次のブレークポイントに到達するまで実行を続けます。 - ステップオーバー
>|: 現在の関数内で次の行に進み、その行に含まれる関数やメソッドには入らずに移動します。 >>ステップイン: 行で使用されている関数やメソッドを順に進み、その関数内の最初の可能なポイントで停止します。- ステップアウト
|<: 関数に入った場合、完了して主な呼び出し関数に戻りたい場合、このオプションを使用して現在の関数を終了します。
変数の検査
デバッグセッション中に、変数の値を検査して期待されるデータが含まれているかどうかを確認する必要があります。Visual Studio Codeは変数を検査するためのさまざまな方法を提供しています:
- 変数パネル: デバッグ中に、デバッグセクションの変数パネルを見てください。現在スコープ内にあるすべての変数とその値が表示されます。
- ウォッチウィンドウ: 変数をウォッチウィンドウに追加して、その値を継続的に監視します。変数を追加するには、エディタで右クリックして "ウォッチに追加" を選択します。
- ホバー: コード内の変数の上にカーソルを合わせて、その現在の値を表示します。
コンソールとデバッグコンソール
Visual Studio Codeのデバッグコンソールはインタラクティブコンソールとして機能し、任意のコードを実行したり、式を評価したりできます。これは、コードの動作に関する仮説をリアルタイムで素早く変更したり確認したりするのに特に役立ちます。
標準のコンソールは、通常console.log()ステートメントと統合されたプログラミングを通じて、通常の使用のために引き続き利用可能です。これは、実行全体でデータの変更を追跡するための、シンプルですが効果的な方法です。
例
デバッグプロセスを理解するために簡単なプログラムを考えてみましょう:
function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } const result1 = add(10, 5); console.log('Result of addition: ', result1); const result2 = subtract(10, 5); console.log('Result of subtraction: ', result2);このJavaScriptプログラムをデバッグするには:
- ファイルを開く Visual Studio Codeで。
add()およびsubtract()関数にブレークポイントを設定。- F5を押してVS Codeデバッガーを使用してデバッグを開始。
- コードの実行がブレークポイントに到達したら、
aとbの値を検査します。
結論
Visual Studio Codeでのデバッグを学ぶことは初めは怖いかもしれませんが、練習を重ねることで非常に満足のいく経験になります。コードのエラーを特定し、ロジックをステップ実行し、コードがどう動くべきかに対する仮定を検証することが二次的なものになります。この強力なツールを装備することで、開発者としての効率と効果が大いに向上します。ブレークポイントを定期的に使用し、変数を検査し、デバッグコンソールを利用してコードロジックをその場でテストしてください。
デバッグは基本的な活動であり、Visual Studio Codeのような強力なツールを使用する強力なスキルを持つことは、高品質なコードをより提供する能力を向上させます。デバッグを楽しんでください！
記事の内容に誤りがある場合, あなたは