web-dev-qa-db-ja.com

ChromeのコードからJavaScriptブレークポイントを設定する方法

私はChromeデバッガを でコード で改行するか、console.break()のようなコメントタグを使用するよう強制します。

javascriptdebugginggoogle-chromebreakpoints
628
Paul

あなたのコードの中でdebugger;を使うことができます。開発者コンソールが開いていると、実行は中断されます。それは同様にFirebugで働きます。

1076
xn.

ボタンクリックリスナーを設定してdebugger;を呼び出す

例 

$("#myBtn").click(function() {
 debugger;   
});

デモ

http://jsfiddle.net/hBCH5/ /

JavaScriptでのデバッグに関するリソース

24
martynas

functionが呼び出されたときにブレークするためにdebug(function)を使用することもできます。

コマンドラインAPIリファレンス：debug

21
Protector one

他の人がすでに言ったように、debugger;は進むべき道です。関数呼び出しの直前にブレークポイントを設定および削除するためにブラウザのコマンドラインから使用できる小さなスクリプトを作成しました。 http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint /

16
Andrija Cacanovic

debuggerはEcmaScriptによって予約されているキーワードであり、ES5以降でオプションのセマンティクスが与えられます

その結果、ChromeだけでなくFirefoxやNode.js からnode debug myscript.js まで使用することができます。

標準は ：と言っています

構文

DebuggerStatement :
    debugger ;

意味論

DebuggerStatementプロダクションを評価すると、デバッガの下で実行されたときに実装がブレークポイントを引き起こす可能性があります。デバッガが存在しないかアクティブでない場合、この文は目に見える影響を及ぼしません。

本番DebuggerStatement：デバッガ。次のように評価されます。

  1. 実装定義のデバッグ機能が利用可能で有効になっている場合、
    1. 実装定義のデバッグアクションを実行します。
    2. Resultを実装定義のCompletion値にします。
  2. その他
    1. 結果を（normal、empty、empty）にします。
  3. 結果を返します。

ES6に変更はありません。

7
Ciro Santilli 新疆改造中心996ICU六四事件

[スクリプト]タブで、コードのある場所に移動します。行番号の左側にあるをクリックします。これはブレークポイントを設定します。

スクリーンショット

screenshot of breakpoint in chrome

スクリーンショットに示すように、右側のタブ内でブレークポイントを追跡できます。

7
Florian Margaine

それは可能であり、これをしたいと思うかもしれない多くの理由があります。たとえば、ページの読み込みが始まる近くでJavaScriptの無限ループをデバッグすると、クロム開発者ツールセット（またはfirebug）が正しく読み込まれなくなります。

のセクション2を参照

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/ /

または、必要なテストポイントでWordデバッガを含む行をコードに追加するだけです。

3
user2539341

ブレークポイント： -

ブレークポイントは実行を停止し、JavaScriptの値を調べることができます。

値を調べた後、コードの実行を再開できます（通常は再生ボタンを使用）。

デバッガ： -

デバッガJavaScriptの実行を停止し、デバッグ機能を呼び出します。

デバッガステートメントは実行を中断しますが、ファイルを閉じたり、変数を消去したりすることはありません。

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};
2
Parth Raval

関数をデバッグするためにdebug(functionName)を設定することもできます。

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function

2
Lance Pollard

JavaScriptコードをデバッグする方法はたくさんあります。次の2つのアプローチはコードを介してJavaScriptをデバッグするために広く使われています

  1. console.log()を使用してブラウザコンソールに値を表示します。 （これはあなたがあなたのコードの特定のポイントで値を理解するのを助けるでしょう）

  2. デバッガのキーワードデバッグしたい場所にdebugger;を追加し、ブラウザの開発者コンソールを開いて[ソース]タブに移動します。

JavaScriptコードをデバッグするためのより多くのツールや方法については、 W3Schoolによるこのリンク にあります。

0
Keet Sugathadasa