COLUMN コラム

VSCodeでAngularプロジェクトソースをデバッグ実行する

2020年06月29日
VSCodeでAngularプロジェクトソースをデバッグ実行する

1 前提条件
2 Debugger For Chromeのインストール
3 デバッガー設定(launch.json)
4 デバッカー起動
- - - 4.0.0.1 宮山龍太郎

前提条件

VS CodeのdebuggerはOSの標準ブラウザが「Chrome」に設定されていることを前提とする。
※１

Debugger For Chromeのインストール

Visual Studio Codeの機能拡張画面を選び、入力ボックスに「Debugger For Chrome」を入力
機能拡張一覧の「Debugger for Chrome」を選択して、Debugger for Chromeの機能拡張をインストール

参考:https://ics.media/entry/11356

デバッガー設定(launch.json)

Visual Studio Codeのメニューから「デバック」-「構成を開く(c)」で「launch.json」が開くので以下の設定を行う
※すでに.vscode/launcher.jsonがあるなら直接編集してもよい

注：Wordpressの仕様でタブのインデントが入らなかったので適宜入れて下さい。

launch.json{ // 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}", }, { "type": "chrome", "request": "attach jasmin", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceFolder}" } ] }

デバッカー起動

ng startまたはng startでAngularプロジェクトが実行可能になったところで、Visual Studio Codeのメニューから「デバッグ」-「デバッグを開始」または「F5」するとhttp://localhost:4200のURLでChromeが起動されるる。
ステップ実行したいメソッドのところに行番号のところをマウスでクリックしてブレークポイントを設定するブレークポイントを指定した該当箇所が実行されるとデバッカーが止まるのでデバックを行う。

※１：VSCode1.25（May 2020）のStableからVSCode自体にJavaScritのdebuggerが入りました。
https://code.visualstudio.com/updates/v1_46

まだPreviewですが以下のオプションで利用可能です。
Karma/JasminでUnitTest書いている時のデバッグ実行はやりやすくなりました。
挙動はちょっと遅いようですが。

debug.javascript.usePreview
参考: