JavaScript:Chromeデバッガーツールで条件付きブレークポイントを設定する方法


100

私は、日付を連続的に出力するこの単純なjsファイルを持っています。

Google Chromeデバッガツール(F12)を使用しています

私の質問は、「Google Chromeで条件付きブレークポイントを設定することは可能ですか?」

私のコードでは、秒の値が50に等しい場合にブレークポイントを設定したいですか?

s = date.getSeconds();

これは私のソースがあるjsfiddleです

(なぜそれがjsfiddleで機能しないのかわからない)

とにかく私の質問は、クロムデバッガツールで条件付きブレークポイントを設定することは可能ですか?


1
+1は、この質問に答えるためにドキュメントを確認するまで、それが可能であるとは知りませんでした。ありがとう!
Theraot 2013年

回答:


141

はい、可能です。

ブレークポイントのマーカーを右クリックして[ブレークポイントの編集...]を選択すると、条件を設定できます。

developers.google.com(Emphasis mine)のブレークポイントにあるChromeデベロッパーツールから:

注:設定したすべてのブレークポイントは、右側のサイドバーの[ブレークポイント]に表示されます。エントリをクリックすると、ソースファイルの強調表示された行にジャンプします。ブレークポイントを設定したら、青いタグのブレークポイントインジケーターを右クリックして、そのブレークポイントの条件ステートメント設定します。式を入力すると、条件がtrueの場合にのみブレークポイントが一時停止します。


おかげで、私はあなたが言ったように、ブレークポイントを編集してif(s == 50)を設定しましたが、なぜその状態で停止しないのですか?
Pawan 2013年

2
@PreethiJainは、条件 "s == 50"(引用符なし)のみを書き込みます。ところで、私はなんとかjsfiddleを動作させることができました: jsfiddle.net/nVpXN/6
Theraot

6
そもそもブレークポイントを追加する必要さえありません。すぐに行を右クリックし、[ 条件付きブレークポイントを追加... ]をクリックします。
マーティンエンダー2013

2
2017年です。Chromeの新しい基本的なことを学んでいます。#Awesomeness
Qodesmith

1
これは、コード実行のこの時点でステートメントをチェックし、ifステートメント内のブレークポイントと同じように、そうであればブレークします。OPは、デバッガーが各ステートメントの実行で条件が満たされているかどうかをチェックするかどうか、そしてそれがデバッガーであるかどうかをこの行でブレークするかどうかを知りたかったと思います。この動作は、変数が予期しない何かを行うときを検出するために探偵をプレイする必要がないため、はるかに便利です。
イジェクタメント

27

debugger声明を見てください。基本的には、利用可能なデバッガツールを呼び出し、Chromeではインタプリタがブレークポイントに到達したかのように動作します。

あなたのコードは次のようになります:

s = date.getSeconds();
if (s == 50) {
   debugger;
}

参照から:

[デバッガ]使用可能なデバッグ機能を呼び出します。デバッグ機能が利用できない場合、このステートメントは効果がありません。


これは実際には、元の質問が尋ねられた元の方法の精神に沿っていますが、それは素晴らしい情報です。本当の問題はECMAscriptではなくChrome Toolsに関するものだったと思います。言われていること; 追加すべき警告がありdebuggerます。製品コードのすべての呼び出しを削除してください。(デバッガーが周りにある場合は、lintingがエラーをスローすると確信していますが、トピックが発生するたびに呼び出す必要があります)。
Crispen Smith 14年

1
デバッガーステートメントは必要ありません。if内に空のステートメントを記述して、そこにブレークポイントを追加することもできます。
イジェクタメンタ2018年

8

次の手順に従って、Google Chromeで条件付きブレークポイントを設定できます。

1.停止したいブレークポイントを右クリックし、chkをオンにしてください ここに画像の説明を入力してください

2.「条件付きブレークポイントを追加」をクリックすると、1つのテキストが表示され、条件を追加できます(条件が満たされた場合、結果は「true」になり、それ以外の場合は「false」)、ブレークポイントの色は条件が追加された後にオレンジ色になります。チェックオン ここに画像の説明を入力してください

3.同じページをリロードすると、次のように条件が満たされた場合にブレークポイントが機能することがわかります ここに画像の説明を入力してください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.