環境の確認
- angular-cliを使用していること
- chromeがインストールされていること
launch.jsonの作成
launch.jsonを作成します。手動で作成しても良いのですが、VS Codeの機能を使って作成する方法を記載します。
メニューから[デバック]-[構成を開く(C)]
環境の選択で[Chrome]を選択
作業ディレクトリに「.vscode」フォルダと、その中にlaunch.jsonファイルが作成されます。launch.jsonを下記の内容に書換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "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を行う事が出来ますが、こっちの方が好みです。