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

1 環境の確認
2 launch.jsonの作成
3 デバック方法
- 3.1 ブレークポイント
  - 3.1.1 変数の中身を見る
4 おわり

環境の確認

angular-cliを使用していること
chromeがインストールされていること

launch.jsonの作成

launch.jsonを作成します。手動で作成しても良いのですが、VS Codeの機能を使って作成する方法を記載します。

メニューから[デバック]-[構成を開く(C)]

環境の選択で[Chrome]を選択

作業ディレクトリに「.vscode」フォルダと、その中にlaunch.jsonファイルが作成されます。launch.jsonを下記の内容に書換えます。

{
  "version": "0.2.0",
  "configurations": [
      {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome against localhost",
          "url": "http://localhost:4200",
          "webRoot": "${workspaceFolder}"
      },
      {
          "type": "chrome",
          "request": "attach",
          "name": "Attach to Chrome",
          "port": 9222,
          "webRoot": "${workspaceFolder}"
      }
  ]
}

{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:4200",

"webRoot": "${workspaceFolder}"

{

"type": "chrome",

"request": "attach",

"name": "Attach to Chrome",

"port": 9222,

"webRoot": "${workspaceFolder}"

}

]

}

デバック方法

ng serveでangularプロジェクトを実行状態にしておきます。その後、VS Codeのメニューから[デバック]-[デバックの開始]を実行します。するとchromeが起動します。

またはショートカットである［F5］キーで起動します。

ブレークポイント

ブレークポイントはtypescriptファイルのみのようです。VS Codeからブレークポイントをしたいファイルを開く、行番号のやや左側をクリックすることによりブレークポイントを設定することができます。

変数の中身を見る

ブレークポイント中ではデバックコンソールにて変数の中身を確認することができます。console.logを書いても良いのですが、チラっと確認したいときに便利です。

変数hogeが確定した所で、デバックコンソールを開き、hogeと入力します。

hogeを入力しEnterで確定させると変数の中身が確認できます。

objectの場合は階層の▶が表示されるので更に詳しく見ることができます。

おわり

chrome上でもdebugを行う事が出来ますが、こっちの方が好みです。