当セクションでは、angular-cliの開発において、ブレイクポイントを設定するオンラインデバッグの方法について説明したいと思います。ChromeのデベロッパーツールによってTypescriptのソースファイル上にブレイクポイントを直接設定する事が可能です。デバッグ時にステップオーバー実行、ステップイン実行、及び、ステップアウト実行をする事で効率の良いデバッグ作業を行うことが出来ます。
デバッグの方法
- angular-cliで開発しているデバッグ対象のプロジェクトフォルダに移動して下さい。
- 「ng serve」コマンドでビルド&実行して開発用の簡易WEBサーバを起動します。
- Chromeでデバッグ対象のアプリケーションを実行して下さい。デフォルトのURLは「http://localhost:4200/」になります。
- Chromeのメニューより、[その他のツール(L)] － [デベロッパーツール(D)]を実行して、デベロッパーツールを起動します。Windowsの場合は[F12]キー、または[CTL]+[SHIFT]+[I]キーを操作して起動する事ができます。Macの場合は[CTL]+[SHIFT]+[I]キーになります。
- デベロッパーツールの[Sources]タブを選択して、Sourcesパネルを表示させて下さい。
- webpack://./src/app/配下にTypescriptファイルが配置されていますので、デバッグしたいTypeScriptファイルを選択してソースを表示させます。
- ソース表示の行番号をクリックする事でブレイクポイントを設定する事が可能です。
デベロッパーツールの具体的な使用方法については、『Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能』などを参考にして下さい。
今後は、Visual Studio 2015やVisual Studio Codeでのオンラインデバッグの方法について説明したいと思います。
お問い合わせ
