Visual Studio Codeのデバッグ機能を理解しよう

Visual Studio Code（以下、VS Code）は、その優れたデバッグ機能を鍵として、多くの開発者に愛用されています。この記事では、VS Codeのデバッグ機能の基本から応用までをわかりやすく解説します。

VS Codeのデバッグ機能とは？

VS Codeのデバッグ機能は、あなたのコード編集、コンパイル、デバッグのサイクルを加速するための強力なツールです。VS CodeはNode.jsランタイムに対する組み込みのデバッグサポートを持ち、JavaScript、TypeScript、またはJavaScriptにトランスパイルされる他の言語をデバッグすることができます。

また、PHP、Ruby、Go、C#、Python、C++、PowerShellなどの他の言語とランタイムをデバッグするためには、VS Code Marketplaceでデバッガーの拡張機能を探すか、トップレベルの「Run」メニューから「Install Additional Debuggers」を選択します。

デバッグの開始

デバッグを開始するためには、まずサンプルのNode.jsアプリケーションを作成することが有効です。Node.jsのウォークスルーをフォローしてNode.jsをインストールし、シンプルな「Hello World」JavaScriptアプリケーション（app.js）を作成します。シンプルなアプリケーションのセットアップが完了したら、このページでVS Codeのデバッグ機能を学ぶことができます。

Run and Debugビュー

Run and Debugビューを表示するには、VS CodeのサイドバーにあるActivity BarのRun and Debugアイコンを選択します。また、キーボードショートカットの⇧⌘D（Windows、LinuxではCtrl+Shift+D）を使用することもできます。

Run and Debugビューは、実行とデバッグに関連するすべての情報を表示し、デバッグコマンドと設定設定のためのトップバーを持っています。実行とデバッグがまだ設定されていない場合（launch.jsonが作成されていない場合）、VS CodeはRun startビューを表示します。

ランチ設定

VS Codeでは、Debug startビューのRun and Debugを選択するか、F5を押すことで、シンプルなアプリを実行またはデバッグすることができます。しかし、ほとんどのデバッグシナリオでは、ランチ設定（launch.json）を作成してデバッグセッションをカスタマイズすることが必要です。ランチ設定は、VS Codeのデバッグ機能を制御するための設定ファイルで、プロジェクトのルートディレクトリにある.vscodeフォルダに保存されます。

ランチ設定を作成するには、Run and DebugビューのRun and Debugボタンを選択し、”create a launch.json file”リンクをクリックします。次に、環境のリストからNode.jsを選択します。これにより、VS Codeはデフォルトのlaunch.jsonを作成します。

デバッグの実行

ランチ設定が完了したら、デバッグを開始することができます。F5キーを押すか、Run and DebugビューのRun and Debugボタンをクリックすることでデバッグを開始できます。デバッグが開始されると、VS Codeはデバッグツールバーを表示し、デバッグセッションを制御するための一連のアイコンを提供します。

ブレークポイントの設定

デバッグ中にコードの特定の行で実行を一時停止するには、その行にブレークポイントを設定します。ブレークポイントを設定するには、行番号の左側をクリックします。ブレークポイントが設定されると、その行は赤でハイライト表示されます。

デバッグ情報の表示

デバッグ中にVS Codeは、変数、ウォッチ、コールスタック、ブレークポイントの情報を表示します。これらの情報は、デバッグセッション中にコードの状態を理解するのに役立ちます。

関連動画

まとめ

VS Codeのデバッグ機能は、コードの問題を特定し、解決するための強力なツールです。この記事では、デバッグの基本的な流れと、それを支えるVS Codeの機能について解説しました。これらの知識を活用して、より効率的なコーディングを行いましょう。