[Chrome Development Tool デバック方法] JS ループを条件指定してステップ実行

[Chrome Development Tool デバック方法] JS ループを条件指定してステップ実行

デバッグ方法は人それぞれ。JSをステップ実行させるには、少し面倒ですよね。
自分が作ったJSプログラムをデバッグするのは、わりと簡単ですが、お客様のページで利用しているJSプログラムのデバッグは自分で手をいれることはできません。

例えば、何かしらのイベントが発生した際に、駆動する関数や、ループの中で、特定の条件の時に処理を止めてステップ実行したい!

等、便利なことができるのに、毎回console.log();やalert();を多様していませんか?

今回は、ブレークポイントに条件を指定して、処理を止める方法を紹介します。

デバックポイントについて

ブレークポイントの機能は、幾つか種類があり、以下のようになっています。

image19

・この場所を継続ブレイク
・ブレイクポイントの付与
・条件付きブレイクポイントの付与

image15

・この場所を継続ブレイク
・ブレイクポイント削除
・条件付きブレイクポイントの条件編集
・ブレイクポイントの有効化・無効化

これらを駆使して、デバッグを行います。

今回はタイトル通り、条件によって処理を止めてデバッグする方法をとりますので、条件付きブレイクポイントを利用します。

条件付きブレイクポイントの設置

まず、デバッグするページで、Development Tool を開きます。

image14

処理をストップさせたい部分にブレイクポイントを設置します。

image05

ブレイクポイントを設置したら、この部分で処理が止まってデバッグ作業ができるわけですが、更にこのブレイクポイントに条件をつけてその時だけ止まるようにします。

設置したブレイクポイントの場所で、右クリックして[Edit Breakpoint…]をクリックして、条件入力欄を表示します。

image12

image17

image16

上図の入力欄にそこで使える条件を記入します。

この例で設定してみます。

上記のループの中で、i の値が 2の時にmetaTag = metaTags[i];でストップさせようと思います。

image10

入力欄に、「i == 2」と記述して「Enter」キーで終了します。

下図が実行結果です。

image09

iの値が2なったので、処理がストップしています。

このように、ループ処理を行っている箇所などで、何回目の時どうなるのかや、ループ内で利用している変数の値が特定の物に変わった時とかに、そこからステップ実行させるなどできるので、いい感じにデバッグできます。

おわりに

今回、条件付きブレイクポイントの設置方法を紹介しました。
また、Chrome development Tool は、最近のアップデートによりもっと使いやすくなっているみたいです。

実行結果の画像にもあるように、処理の中身が横に表示されるようになっているようで、まだまだ、これからも良くなっていくようですね〜。

コメント