はじめに
AngularをVSCodeでデバッグする手順です。
ng new でAngularプロジェクトを作成する
まずは、ng newでAngularプロジェクを作成します。
例では「my-app」というプロジェクトを作成します。
ng new my-app
AngularプロジェクトをVSCodeで開く
ng new my-appで生成されたmy-appフォルダをVSCodeで開きます。
こんなフォルダ構成になっていると思います。
.vscodeフォルダの中にVSCodeでの実行設定が出来上がっています。
サイドメニューの「デバッグと実行」を選択すると「実行とデバッグ」エリアに「ng serve」が選択されています。これが.vscode/launch.jsonで定義されている実行構成です。
緑色の実行ボタンをクリックするとmy-appが起動します。
ブラウザが起動してmy-appが起動しました。
ブレークポイントを試す
ターミナルでctrl + cを押下して、実行済みのmy-appを一旦終了します。
app.component.tsのtitleプロパティにブレークポイントを設定します。
あまりプロパティにブレークポイントを貼る人はいないと思いますが、ng newしたてのプロジェクトに処理がなかったのでここにしました。
サイドメニューの「デバッグと実行」を選択し、「実行とデバッグ」エリアの実行ボタンをクリックしてmy-appを起動すると、ブレークポイントで停止します。
