Help us understand the problem. What is going on with this article?

chromeでのブレイクポイントのいろいろな設定方法

More than 1 year has passed since last update.

ここのところchromeを使ったデバッグをする機会が多いので便利なデバッグ方法をご紹介したいと思います。
chromeではさまざまなブレイクポイントの設定方法が用意されており、うまく使うと非常に効率的にデバッグできる場合があります。

Break on

要素の変更時にブレイクする方法です。

Elementsパネルでブレイクさせたい要素を右クリックして「Break on...」よりブレイクタイミングを選択します。
値の変更時にはブレイクできないのが残念…

選択肢 ブレイクタイミング
subtree modifications 子要素の変更時
attribute modifications 該当要素の属性変更時
node removal 要素削除時

image.png

ソースの任意の行

ソースコードの任意の位置にブレイクする方法です。

Sourcesパネルでソースを開いてブレイクさせたい行の行番号をクリックします。
image.png

条件付きブレイク

また、ブレイクの条件を指定することもできます。
ブレイクポイントを右クリックして「Edit breakpoint」を選択します。
image.png

ブレイク条件を設定します。
以上で、条件に一致したときだけブレイクします。
image.png

Pause on exceptions

どこかで例外が発生した時にブレイクする方法です。
どこかしらで例外が発生しているけどどこか分からないときに便利です。

Sourcesパネルの赤丸のボタンを押します。
image.png

XHR Breakpoints

指定したURLへのAjax通信が発生した時にブレイクする方法です。

SourcesパネルのXHR Breakpointsのアコーディオンを開いて、右クリックまたは右の+ボタンで任意のURLを設定します。
URLを空で設定するとすべての通信時にブレイクする「Any HXR」が設定されます。
image.png

Event Listender Breakpoints

どこかでイベントが発生した時にブレイクする方法です。
例えば、どこかの要素でクリックイベントが発生した時などに使用します。

SourcesパネルのEvent Listner Breakpointsのアコーディオンを開くとイベントが分類されて表示されます。
任意のイベントを選択状態にしておくとイベント発生時にブレイクします。
image.png

以上のようにchromeではいろいろなタイミングでブレイクできます。
ソース上のどこで発生しているかわからないタイミングで止めたい場合などに今回紹介した方法を使いこなせば非常に効率的にデバッグできると思います。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away