web-dev-qa-db-ja.com

Chrome開発者ツール？

Chrome Developer Toolsデバッガーからjavascriptファイルを省略して、そのスクリプトに対して行われた関数呼び出しを自動的にスキップする方法はありますか？

私のプロジェクトにはjQueryなどの大きなライブラリが含まれていることが多いので質問します。デバッグ中にChrome Developer Toolsでjavascriptをステップスルーするとき、スクリプトでjQuery呼び出しを行うたびにjQueryのlibをステップスルーする必要があります。

JQueryオブジェクトを呼び出すたびに1行後にブレークポイントを設定する必要があります。それは私が過去をスキップすることを見つけた唯一の方法であり、それは非常に迷惑です。

javascriptjquerygoogle-chrome-devtools
40
BumbleB2na

UPDATE 2
最新バージョンのChromeでは、この機能のユーザーフローが改善されています。 https://developer.chrome.com/devtools/docs/blackboxing を参照してください

UPDATE 1
Chromeバージョン38以降、開発ツールの実験を有効にする必要はありません。

以下の詳細は履歴のみです

これは、chromeバージョン30以降で可能になりました。

  1. chrome://flags/#enable-devtools-experimentsから「開発者ツールの実験を有効にする」を有効にします。 （はい、URLを入力する場所に入力する必要があります）
  2. Chromeを再起動します
  3. Chrome開発者ツール]の設定アイコンをクリックします
  4. 実験セクションに移動します。警告;）に注意してから、Enable frameworks debugging supportにチェックマークを付けます。 （Show step-in candidates while debuggingも試してみてください）
  5. ここで、Chrome Dev Toolsを閉じて、もう一度開きます。
  6. Chrome開発者ツール]の設定アイコンをクリックします
  7. 一般的なセクションでは、「特定の名前のソースをステップスルーするスキップ」があります。それをチェックして提供します 正規表現 ステップインをスキップしたいjavascriptファイル名。

Skip stepping into certain javascript files

出典： ヒントとコツ：Chromeでのデバッグ中にライブラリコードを無視する

58
IsmailS

iSid Chrome 38の時点で、devtools実験を有効にする必要がなくなったことを指摘したいと思います。代わりに、F12開発者ツール->設定->一般->ソースに直接移動する場合そこにある最後の項目は、フレームワークのブラックボックス化の管理です。良い部分は、各フレームワークを独自の行にセットアップするか、（firebug | angular | knockout | jquery | bootstrap | modernizr |のような一般的なcatchallパターンをまとめることができることです。応答）

13
Buvy

バージョン51では状況が少し異なります。

F12を押してからF1を押します。左側のメニューから「ブラックボックス化」を選択します。

enter image description here

12
FrenkyB

Chrome v68で、.jsファイルのデバッグ中に、左クリックしてブラックボックススクリプトを使用します。

https://developer.chrome.com/devtools/docs/blackboxing

2
Roger

[ステップアウト]ボタンを使用すると、JQueryコードからすばやく抜け出すことができます。

0
Dmitry B.