Angularプロジェクトを Visual Studio Codeでデバッグする

2021年11月23日時点のWindows10での情報です。

Angularプロジェクトを VsCodeでデバッグできるように設定します。

まずはVsCodeの設定を変更せずにデバッグ実行してみる

AngularプロジェクトをVsCodeで開きます。
ターミナルより「npx ng serve --open」をローカルサーバーで実行してみます。

npx ng serve --open

localhostサーバーの4200ポートで実行されています。

一旦ブラウザを終了し、ローカルサーバーが起動されている状態(ng serveされている状態)で、デバッグ実行してみます。
デバッグ実行は「F5」キー または、VsCodeのメニューから「実行」 > 「デバッグの開始」で実行できます。

localhostサーバーの8080ポートで実行されてることが確認できます。

launch.jsonの修正

launch.jsonとは、VSCodeでデバッグ実行するための設定ファイルです。
urlに「localhost:8080」とありますので「localhost:4200」と書き換えます。

「F5」キーでデバッグ実行すると、ブレークポイントで止まっていることが確認できます。

src/app/app.component.tsにブレークポイントを付けています。

「F5」キーでデバッグを続行させます。
「localhost:4200」でプロジェクトが起動しました。

Chromeでデバッグする場合、VsCodeの拡張機能「Debugger for Chrome」をインストールしていましたが、この拡張機能は非推奨になりました。

Microsoft Edgeでデバッグする

Edgeでデバッグする場合は拡張機能「Debugger for Microsoft Edge」が必要です。
VsCodeに「Debugger for Microsoft Edge」をインストールします。

launch.jsonのtypeをedgeにします。

以上でedgeでデバッグ実行できるようになります。
「npx ng serve」でローカルサーバーを起動し、F5キーでデバッグ実行してみます。
ブレークポイントで停止し、デバッグ続行でEdgeでAngularプロジェクトが起動を確認します。