web-dev-qa-db-ja.com

Chrome JavaScriptデバッグ-ページの更新とコード経由のブレークの間のブレークポイントを保存する方法は？

ChromeとJavaScriptデバッガーを使用している場合、ページ/スクリプトをリロードするたびにブレークポイントが失われ、ポップアップでスクリプトファイルを見つけ、コード行を見つける必要がありますブレークポイントについては、クリックして追加します。

これらのブレークポイントを保存して、ページを更新した後でもブレークする方法はありますか（私が使用した他のデバッガーはこれを行います）？

または、JavaScriptコードにchromeを指定してトレースを開始する（行で一時停止する））と入力できるクリーンな方法はありますか？

javascriptdebugginggoogle-chromebreakpoints
71
Scott Szretter

あなたは置くことができます

debugger;

ほとんどのJavaScript環境で中断します。それらは確実に持続します。これらを使用している場合、デバッガーと本番環境のconsole.log呼び出しを取り除くミニファイヤを用意しておくと便利です。

Chromeブラウザーの最近のバージョンでは、コンソールパネルの上部、フィルターの横に[ログの保存]オプションがあります。古いバージョンでは、空のコンソールウィンドウを右クリックしますconsole.logステートメントやハードコードされたデバッガー呼び出しがない場合に便利です（「ナビゲーション時にログを保存する」）。

更新：githubで chimney と呼ばれるツールを見つけました。このツールはファイルを取得し、すべてのconsole.log呼び出しを削除します。デバッガー呼び出しを削除する方法についての良いアイデアを提供します。

67
Ege Özcan

ブレークポイントを設定し、[ネットワーク]タブに切り替えて、ナビゲーション時のログを保持トグルボタンを選択します。これで、リフレッシュ時にブレークポイントが存在するはずです。

またはJavaScriptの方法は使用することです

debugger;
36
pradeek

また、JavaScriptファイルをサーバーからクライアントに 現在のエポック時間のURLに添付されたクエリパラメーター で送信しますか？これは、JavaScriptファイルのキャッシュを防ぐために使用されます。

この場合、Chrome Developer Toolsは、更新後にファイルを別のファイルと解釈し、ブレークポイントを（正しく）削除するようです。

私にとって、クエリパラメータを削除すると、更新後にCDTがブレークポイントを保持するようになりました。

19
sjogren_me

これはおそらく、他のスクリプトから動的にロードまたは評価しているスクリプトで発生していますか？ sourceURLプロパティを発見するまで、このシナリオは本当に私を苛立たせたと自分で言うことができます。デバッグするスクリプトの最後の行に次の特別な形式のコメントを配置すると、Chrome内に「アンカー」されるため、参照フレームがあります。

//＃sourceURL = filename.js

手動で配置されたブレークポイントは、ページがロードされるまで持続します！慣習は実際にはsourcemap仕様から始まりましたが、Chromeは少なくともスタンドアロンの手法としてそれを尊重しています。ここに reference があります。

9
jtrick

ExtJs 6.xを使用している場合：
Ext.LoaderのdisableCachingの代わりに、ページのURLに"cache"または"disableCacheBuster"クエリパラメーターを追加できます。これにより、ファイルから「_dc」パラメーターが削除され、chromeデバッガーがブレークポイントを保持できるようになります。

アプリケーションでbootstrap.jsを参照してください（configパラメーターdisableCaching）。

1
kaah

デバッガーを配置できます。デバッグを開始するコードの前。ページの読み込みが開始されると、デバッガで停止します。ステートメント。その後、要件に応じてデバッグポイントを簡単に適用できます。

1
sandeepConnected

ソースでdebugger;ステートメントを使用して、そこでデバッガーをブレークできます。

0
SLaks

Chromeデベロッパーツールは期待どおりに動作するはずですが、debugger;ステートメント（開発中！）のコードで実行を一時停止します。

0
J. K.