WEB WEBフロントエンド開発

Chromeを使ったAngular-cliのオンラインデバッグの方法について

投稿日:2017年4月5日 更新日:

当セクションでは、angular-cliの開発において、ブレイクポイントを設定するオンラインデバッグの方法について説明したいと思います。ChromeのデベロッパーツールによってTypescriptのソースファイル上にブレイクポイントを直接設定する事が可能です。デバッグ時にステップオーバー実行、ステップイン実行、及び、ステップアウト実行をする事で効率の良いデバッグ作業を行うことが出来ます。

 

デバッグの方法

  1. angular-cliで開発しているデバッグ対象のプロジェクトフォルダに移動して下さい。
  2. 「ng serve」コマンドでビルド&実行して開発用の簡易WEBサーバを起動します。
  3. Chromeでデバッグ対象のアプリケーションを実行して下さい。デフォルトのURLは「http://localhost:4200/」になります。
  4. Chromeのメニューより、[その他のツール(L)] - [デベロッパーツール(D)]を実行して、デベロッパーツールを起動します。Windowsの場合は[F12]キー、または[CTL]+[SHIFT]+[I]キーを操作して起動する事ができます。Macの場合は[CTL]+[SHIFT]+[I]キーになります。
  5. デベロッパーツールの[Sources]タブを選択して、Sourcesパネルを表示させて下さい。
  6. webpack://./src/app/配下にTypescriptファイルが配置されていますので、デバッグしたいTypeScriptファイルを選択してソースを表示させます。
  7. ソース表示の行番号をクリックする事でブレイクポイントを設定する事が可能です。

 

デベロッパーツールの具体的な使用方法については、『Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能』などを参考にして下さい。

今後は、Visual Studio 2015やVisual Studio Codeでのオンラインデバッグの方法について説明したいと思います。

 

 

スポンサーリンク

スポンサーリンク

-WEB, WEBフロントエンド開発

執筆者:

関連記事

lite-serverを使った開発サーバの構築

Lite-Serverのパッケージを使った開発サーバの構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。 記載した実行環境は以下の通りです。Node.jsのインストー ...

Webpackを使ったWEBフロントエンド開発

Webpackとはビルドツールの1つであり、モジュール管理ツールとしての側面も持っています。フロントエンドのビルドツールとしては、他にGulpとGruntなどがありますが、それらの仲間といった感じだと ...

(webpack2)TypeScriptとWebpackを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

JavaScriptのTips

valメソッド、htmlメソッド、textメソッド .html(): 引数をHTMLとして書き換え。タグが有効になる。 .text(): 引数を文字列として書き換え。タグはエスケープされて無効になる。 ...