Angular + Typescriptをブラウザでデバッグしたい

はじめに

Angularプロジェクトをブラウザでデバッグする際に、TypescriptファイルにBreakPointを設定する方法がわからなかったので調べた。

環境

• Angular: 2.4.7
• angular-cli: 1.0.0-beta.28.3
• webpack: 2.2.0
• Google Chrome: 53.0.2785.116
• 各種設定ファイルは、Angular CLIでプロジェクト作成後、デフォルト設定のまま
• エディタはVisual Studio Code(1.7.2)を使用

デバッグ方法

1. Angular CLIで雛形プロジェクトを作成した後、ng serveコマンドで開発ビルド&実行する
2. Chromeのdeveloper toolsを起動する
3. Sourcesタブを選択

webpack://配下にTypescriptファイルが配置されているのでBreakPointを設定することができる。

画像の例では、src/app/app.component.ts ファイルにBreakPointを設定している。