一般社団法人 全国個人事業主支援協会

COLUMN コラム

前提条件 

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

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が起動されるる。
  • ステップ実行したいメソッドのところに行番号のところをマウスでクリックしてブレークポイントを設定する ブレークポイントを指定した該当箇所が実行されるとデバッカーが止まるのでデバックを行う。

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

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

debug.javascript.usePreview
参考:

【Angular】VS Codeでデバック設定

The following two tabs change content below.

宮山龍太郎

PADI RED、Tec40、PADIスノーケルガイド、プレーパーク活動など。 2020年8月現在、平日フルタイムのリモートワーク、開発マネージャー以外に週末スノーゲルガイドの見習いアシスタントとしても海で活動しています。

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア