Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@Shinji-Hashimoto

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

More than 3 years have 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ではいろいろなタイミングでブレイクできます。
ソース上のどこで発生しているかわからないタイミングで止めたい場合などに今回紹介した方法を使いこなせば非常に効率的にデバッグできると思います。

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
Shinji-Hashimoto
2年ほどフロントエンド開発に特化しています。
basic
道具にこだわるアーキテクト集団でありたい。 オープンソースをベースにエッジ・テクノロジーを研鑽し お客様に価値を提供するIT企業です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?