ひとりごと

文章の練習と自分のアウトプットのために書いていく日記です。

Angularのデバッグ方法について

 

はじめに

 Angularのデバッグを普段chromeで行なっているのですが、ブレークポイントを設定する際のやり方を隣の席の方に教えたら喜ばれたので、ここに書いておこうと思います。 

 

ブレークポイントを設定するファイルを簡単に探す方法

ちなみに以下キャプチャ取得時、chrome のバージョンは「72.0.3626.109 」です。

1.デバッグしたいページでデベロッパーツールを開く

2.Sourcesタブを選択して矢印の箇所をクリック

f:id:punipunityan:20190219014951p:plain
 

3.「Open file」を選択

f:id:punipunityan:20190219013856p:plain

 

4.ここにブレークポイントを設定したいファイル名を入力すればOK

Mac は commandキー + P で開く。windowsなら ctrl + P で開く。)

f:id:punipunityan:20190219014203p:plain

 

おわりに

IDEを使ったデバッグはやってないのですが、どっちが楽なのかな?と思って、試しに今日設定をしてみました。普段仕事で使っている IDEIntelliJ IDEA です。IDEでのデバッグはまだ慣れないですが、しばらく使ってみたり、皆さんどうされてるか聞いてみたりしようと思います。