Angular - Visual Studio Code でのデバッグ実行

Angular アプリケーションを Visual Studio Code 上でデバッグ実行する方法です。

Debugger for Chrome のインストール

Debugger for Chrome というエクステンションというがありますので、インストールします。

Visual Studio のデバッグ設定

Visual Studio のデバッグ設定を行います。虫マークのデバッグメニューをクリックし、「デバッグの開始」ボタンの右隣にあるドロップダウンを開きます。そこから、「構成の追加…」を選択します。

すると、コマンドパレットにデバッグの実行環境が一覧表示されます。ここから「Chrome」を選択します。

プロジェクトルート配下に .vscodelaunch.json というファイルが生成され、開かれます。configurations > url で設定されているポートが 8080 になっているので、4200 に変更して保存します。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

デバッグの開始

Angular アプリケーションを 4200 ポートで実行し、「デバッグの開始」ボタンをクリックします。（緑の再生ボタン）

デバッグ実行が始まると、Chrome ブラウザが立ち上がってきます。 Visual Studio Code 上でブレークポイントをはっておくと、処理が止まります。

ウォッチ式も使うことができます。