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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

デバッグ方法は人それぞれ。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 は、最近のアップデートによりもっと使いやすくなっているみたいです。

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...