Angularアプリをデバッグする！VSCodeやChromeを使ったデバッグ方法。
この記事では、Angularでアプリ開発をするうえでまず最初に知っておきたいデバッグの方法について解説する。
Angularアプリをデバッグするには、VSCodeを使う方法やVSCodeを使う方法などいくつかの方法がある。
自分のやり慣れたやり方でおこなうのもいいが、ちょっとしたテクニックを知っている事により、作業スピードが何倍も高まったりする事もある。
ぜひ、Angularのデバッグ方法をマスターして効率よくバグ修正をおこなえるようになろう。
デバッグとは？
デバッグ（debugging・debug）は本来はバグを取り除く作業全般を指して生まれた言葉。
現在はデバッグと言うと、「プログラムの処理をステップごとに実行し、プログラム内で予期せぬ挙動が起きている箇所を見つける作業」を指す。
デバッグのために使われるツールやデバッグをおこなうチーム要員は「デバッガー」と呼ばれる。
JavaScriptはインターネットブラウザ上で動作することを想定して開発されたプログラミング言語。ブラウザとの結びつきは強く、JavaScriptのデバッグというと通常はブラウザ上でおこなう。
デバッグ方法にはおもに以下の２種類がある。
- ブラウザのデベロッパーツールでおこなう
- VSCodeなどのIDEでおこなう
それぞれの方法について説明していこう。
ブラウザを使ったデバッグ方法
まずは手軽なインターネットブラウザを使った方法を見ていこう。
ここではGoogle Chormeのデベロッパーツールを例にして方法を説明するが、同じような方法でFireFox・MS Edge・Safariなどでもデバッグすることができる。
デベロッパーツールを開く
「ng serve」などのコマンドでアプリを実行したうえで、アプリをChrome上で開く。
以下の3つの方法のいずれかでChromeのデベロッパーツールを開く。
- Ctrl+shift+i
- 右クリックでコンテクストメニューを開き「検証」を選ぶ
- Chromeのメニューから「その他のツール ➡ デベロッパーツール」を選ぶ
デバッグしたいコードを探す
次にデベロッパーツール内でデバッグしたい箇所のコードを探す。
コードを探すには「コンポーネントから探す」か「関数名から探す」のがオススメだ。
コンポーネントから探す
コンポーネントから探す場合は「Ctrl+p」を入力してファイルを探すためのポップアップを開く。
コンポーネント名を入力すると候補が絞り込まれるので、目的のコンポーネントを選択する。
選択するとSourcesタブ内にコンポーネントの内容が表示される。
コンポーネントからデバッグ箇所を探すメリットは、IDEで表示されているのと同様にコードが表示されるので該当箇所が探しやすいという点だ。
関数名から探す
次にコード全体から関数名で関数を探してみよう。
デベロッパーツールにて「Ctrl+Shift+f」を入力してSearchタブを開く。
サーチフィールドに関数名を記入すると該当する箇所が一覧で表示される。
デバッグしたい箇所を含むファイルを探しクリックすると、Sourcesタブに目的の関数が表示される。
ブレークポイントを付ける
次にプログラム全体からデバッグを行いたい箇所を探しブレークポイントを付ける。
デバッグしたい行の左側をクリックしてブレークポイント設置する。
Chromeのデベロッパーツールではこの青い矢印がブレークポイントの印だ。
IDE内でブレークポイントを指定する
ブラウザでデバッグをおこなう際のブレークポイントの設置はIDE上でもおこなうことができる。
実践においてはコードの追加・修正をおこないながら、そのままIDEでブレークポイントを指定したほうが手っ取り早いだろう。
方法は簡単でデバッグしたい箇所に「debugger」と記述するだけだ。
アプリの呼び出しや使用中に該当する箇所が呼び出されとデバッグモードに入る。
デバッグ中の操作
デバッグ中の操作について確認しておこう。
Chromeがデバッグモードに入っている間は画面の上部に「Paused in debugger」ポップアップが表示され、画面は暗く表示され操作が出来ない状態になる。
この際、デベロッパツールではDebuggerタブがアクティブとなり、ここでデバッグの進行をコントロールすることができる。
Debuggerタブにのデバッグツールについて詳しく見ていこう。
ボタンは左からそれぞれ以下のような役割を持つ。
- Resume
ブレークポイントを通過する。次のブレークポイントが呼び出されない場合はデバッグモードが終了される。 - Step over
次のステップに移動する。 - Step in
呼び出した先の関数に移動する。 - Step out
呼び出した先の関数から抜け出す。 - Step
呼び出し先の関数を含め、次のステップに移動する。 - ブレークポイントの無効化
このボタンがオンになっている間はすべてのブレークポイントが無効となる。
作業中にブレークポイントが呼びだせなくなってしまった時はこのボタンがオンになっていないか確認する。 - 例外による中断を無効化する
通常、デバッグ中に例外が発生したらエラー内容が表示されデバッグは中断される。
このボタンをオンにするとこれらを無効化することができる。
値の確認とコールスタック
次にDebuggerタブの見方について簡単に説明したい。
Debuggerタブの中で一番よく使用するのは「Scope」だ。
ここでは、現在のスコープ内の変数などの値が確認できる。
また「Call Stack」では関数が呼び出されるまでの経路を確認することができる。
HTMLファイルをデバッグする
Angularで開発をおこなっているとHTML内の値をデバッグしたい時がある。
HTMLファイルにブレークポイントを設置して直接デバッグをすることは出来ないが、値を確認する方法はある。
まずはコンポーネント内にdebuggerをセットした関数を作成する。
public testValue(value: any) {
debugger;
return true;
}テンプレート側では*ngIfを使いその関数を呼び出す。
<div *ngFor="let person of personArray">
<pre *ngIf="testValue(person)"></pre>
</div>こうする事により、表示する内容を変えずにデバッガーにて値を確認することができる。
オブジェクトの内容を画面に表示して確認したいだけならば、jsonパイプを使うのが手っ取り早い。
<div *ngFor="let person of personArray">
<pre>{{ person | json }}</pre>
</div>VSCodeを使ったデバッグ方法
次にVSCodeを使ったデバッグの方法について見ていこう。
VSCodeには標準でJavaScriptファイルのデバッガーが備わっており、簡単な設定をするだけでデバッグをおこなうことができる。
デバッグの設定ファイル
まずはデバッグの設定ファイルを作成する。
「Run and Debug」メニューを開き「create a launch.json file」リンクをクリックする。
ドロップダウンから「Chrome」を選択する。
プロジェクトのルート直下に「.vscode」フォルダが作られその中に「launch.json」ファイルが作成される。
launch.jsonを開き、urlプロパティを修正する。
最初の状態だとポートが「8080」に設定されているので、これをAngularアプリのデフォルトポートである「4200」に変更する。
ブレークポイントを設置してデバッグを実行する
ブレークポイントを設置してデバッグをおこなう。
コンポーネントのエディタを開き、デバッグをおこなう箇所にブレークポイントを設置する。
VSCodeではブレークポイントは赤い点で示される。
ng serveなどのコマンドでアプリを実行した状態で先ほど作成したlaunch.jsonを実行する。
実行は「Run and Debug」メニューから行う。
実行すると新しいウィンドウ内でアプリが開かれる。
ブレークポイントが呼び出されるとVSCodeがデバッグモードに入る。
デバッグの操作方法やデバッガータブの見方については、Chromeでデバッグをおこなう時と大きな違いは無いので前章を参考にしてほしい。
Angular DevTools
Angular DevToolsはGoogle Chromeの拡張機能。
このツールはGoogleによって開発されているオフィシャルなツールであり、コンポーネントの構造の解析や状態の変化を確認するのに役立つ。
Angularの開発者であればまずは導入しておきたい拡張機能だ。