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

環境の確認

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

launch.jsonの作成

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

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

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

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

デバック方法

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

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

ブレークポイント

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

変数の中身を見る

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

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

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

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

おわり

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