リダイレクトでChromeのネットワークデバッガーを使用する方法


379

Chromeネットワークデバッガーを使用すると、ページに読み込まれたすべてのHTTPリソースを確認できます。ただし、新しいトップレベルのHTMLページが読み込まれるたびにリストがクリアされます。これにより、何らかの理由で(スクリプトの実行または300応答)自動的に再読み込みされるページのデバッグが非常に困難になります。

新しいトップレベルのページが読み込まれたときにネットワークデバッガーをクリアしないようにChromeに指示できますか?または、前のページのネットワークリソースに戻って確認できますか?

または、リダイレクトを実行しているデバッグしようとしているページを制御していないときに、新しいページをロードする前にChromeを強制的に停止させることはできますか?OpenIDのダンスの一部で問題が発生しているため、SSLと認証情報の組み合わせにより、コマンドラインツールでのデバッグが非常に困難になっています。


この複製は、1か月前に投稿された複製よりもどのようにして賛成票を得たのですか?stackoverflow.com/q/10703944/632951
Pacerier

6
@Pacerierリンクしたものは投稿されていないようですが、タイトルに「Chrome」が含まれていない可能性があります。ユーザーがChromeに関連するものを探している場合、検索には通常Chromeというキーワードが含まれます。「Google Developer Tools」は非常にあいまいです。
Joel Mellon、

回答:


527

@Daniel Alexiucと@Thanatosのコメントに感謝して、これはv32以降変更されました。


現在(v32以上)

DevToolsの[ネットワーク]タブの上部に、[ログの保持]機能をオンにするチェックボックスがあります。オンにすると、ページの読み込み時にネットワークログが保持されます。

Chrome v33 DevToolsの[ネットワーク]タブ:ログの保持

左側の小さな赤い点は、ネットワークロギングのオンとオフを完全に切り替えることを目的としています。


古いバージョン

古いバージョンのChrome(ここではv21)では、[ネットワーク]タブのフッターにクリック可能な小さな赤い点があります。

Chrome v22 DevToolsネットワークタブ:ナビゲーション時にログを保持

カーソルを合わせると、アクティブ化されたときに「ナビゲーション時にログを保持する」ことが通知されます。それは約束を果たしています。


1
バージョン32ではまだ存在しますが、ネットワークパネルの上部に移動しました。
Daniel Alexiuc 14

4
実際、これは一番上にありますが、「ログの保存」と呼ばれ、チェックボックスです。紛らわしいことに、まだ赤いレコードアイコンがありますが、それはログに記録するかどうかだけです。
タナトス2014年

1
変更についてコメントしてくれてありがとう、それに応じて答えを更新しました。
bfncs 2014年

@ruben、インターフェイスは確かに今、ビット異なるように見えるんが、ネットワークタブの上部にある「ログを保存」というチェックボックスがまだあります:i.imgur.com/fhSDYSz.png
bfncs

14
@ rubenlop88 Documentsでフィルタリングしていないことを確認してください。そうしないと、Documentsで永続化されません。具体的には[ その他 ]タブで確認できます。
アレックス

173

Chromeに強制的にネットワークデバッガーをクリアさせない方法はわかりませんが、これはあなたが探しているものを達成するかもしれません:

  1. jsコンソールを開く
  2. window.addEventListener("beforeunload", function() { debugger; }, false)

これにより、ブレークポイントにヒットして新しいページをロードする前にクロムが一時停止します。


55
これは質問に対する正しい答えではありませんでしたが、実際に私が探しているのはそれです。ありがとう。
isaaclw 2013

2
これはとても滑らかです。「リダイレクトの前に一時停止する」ソリューションを探してここに来ました。受け入れられた答えは覚えやすいですが、これはラドです。
Joel Mellon、

19
ブラウザーが応答を受け取った直後にリダイレクトする場合、Chromeはサーバーの応答本文を表示しないため、これは非常に便利です。
クリストフDombi

23

@bfncs回答の更新のみ

Chrome 43の周りで動作が少し変更されたと思います。ロードされたドキュメントがDocの下に表示されると、ログを保持するには表示を有効にする必要がありますが、リダイレクトは[その他]タブに表示されます。

多くのネットワークリクエストがあり、XHR、Doc、JSなどのタイプでフィルタリングするため、これは常に私を混乱させます。しかし、リダイレクトの場合、[Doc]タブは空なので、推測する必要があります。


1
あなたは私が探していたヒーローです!
マシューハワース

23

他のページにリダイレクトする前にネットワーク呼び出しをデバッグするもう1つの優れたソリューションは、beforeunloadイベントブレークポイントを選択することです。

このようにして、別のページにリダイレクトする直前にフローを中断することが保証されます。これにより、すべてのネットワーク呼び出し、ネットワークデータ、およびコンソールログがまだ存在します。

この解決策は、通話の応答を確認する場合に最適です

Chrome beforeunloadイベントブレークポイント

PS:特定のコールまたはコールの直前に停止したい場合は、XHRブレークポイントを使用することもできます(画像の例を参照) XHRブレークポイント


2
これは素晴らしい。このloadイベントでは、最初に停止してブレークポイントを簡単に設定できます。ありがとう!
LeOn-Han Li
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.