Chromeでのモニタリングのリクエスト

208

Firefoxでは、Firebugを使用して、私のajax呼び出しが行うすべてのhttp要求を表示できるようにしています。開発をChromeに切り替えましたが、今のところ気に入っています。ただし、私の唯一の不満は、開発者ツールでは各ajaxリクエストを表示できないようだということです。[リソース]パネルに同じリソースへの複数のリクエストが表示されたことが一度ありましたが、一度しか実行されず、二度と実行されませんでした。

Chrome内からJavaScriptを介してページが行うすべてのHTTPリクエストを確実に確認する方法はありますか？

[編集：2009年11月30日11:55]

現在、これを回避するために、Chromeの横にあるFiddlerを実行してリクエストを表示していますが、ブラウザー内から実行する方法がある場合は、それを使用します。

ajax google-chrome httprequest

— ウェスP
ソース

2

私は同じ問題を抱えています-ここですべての解決策を試しました。開発ツールのXHRウィンドウのレスポンス部分には何も表示されません。「このリクエストには応答データがありません」と表示されているだけです。firebugを使用して同じコードを実行すると、問題なく表示されます。cog dev tools設定で、「Log XMLHttpRequest」にチェックを入れてみましたが、これは役に立ちませんでした（応答タイプはapplication / jsonです）。Firebugですべてのデバッグを行う必要があります。FirebugはJSONも適切にフォーマットしますが、Chrome開発ツールは、それを取得して応答を表示できる場合（たとえば、ajaxを使用しない場合）はそれを行いません。

— ジョンリトル

359

私はこれが古い糸であることを知っていますが、私はチャイムを入れようと思いました。

Chromeには現在ソリューションが組み込まれています。

を使用してCTRL+SHIFT+I（またはに移動しCurrent Page Control > Developer > Developer Toolsます。新しいバージョンのChromeでは、レンチアイコン> [ツール]> [開発者ツール]をクリックして）、開発者ツールを有効にします。
開発ツール内からNetworkボタンをクリックします。まだ有効になっていない場合は、セッションまたは常に有効にします。
"XHR"サブボタンをクリックします。
を開始しAJAX callます。
の左側の列にアイテムが表示され始めます"Resources"。
リソースをクリックすると、ヘッダーと戻りコンテンツを表示する2つのタブがあります。

— フィル
ソース

2

フィルありがとう！私はこれを脇に置いて、主にフィドラーに頼っていました。しかし、そのXHRボタンが私が探していたものです：D

— Wes P

ちょうど昨日、Chromeツールでこれができれば完璧だと話していました。ありがとうございました。

— ヘルマン・ロドリゲス

3

こんにちは、「XHRサブボタン」を探してみてください。見当たらない可能性があります。誰かがそれを教えてくれますか？これは私の検査官がimgur.com/9e6yDcBの

— デビッドウィリアムズ

2

これは、AJAX呼び出しが応答を受け取った場合にのみ発生するようですが、応答を予期しない可能性のある発信要求は表示されません。誰かがそれを有効にする方法を知っていますか？

— MoMo 14

1

ページが同じウィンドウにリダイレクトする場合は、ネットワークタブオプションの上部にある[ログを保持]チェックボックスを使用できます（そうでない場合は、を設定して、そのリンクを同じウィンドウで開くように変更できますtarget='_self'）。次に、たとえば、リダイレクトされた後に送信されたフォームからの応答を確認できます。新しいページの読み込み時に応答が積み重なるので、フィルターにも注意してください。

— JeremyS 2017年

57

これに対する最新の答えは、開発者ツールの[ネットワーク]ボタンの下に表示され、以前の[リソース]の下には表示されなくなりました。

— Wouter
ソース

5

それは確かに今のところです。アップグレード後にスタックオーバーフローを検索して見つけました。

— Kzqai、2011

42

更新

Chromeはリクエストの検査方法を変更し、chrome：// net-export /からエクスポートされたログでCatapult Netlog Viewerを使用するように提案しました

chrome://net-export/

より詳しい情報

古いChromeバージョン

また、Chromeでこのリンクを使用して、検査官が行ったよりも詳細な情報を入手することもできます。

chrome://net-internals/#events

これは開いている間ブラウザのすべての要求のログを示します

— カールアドラー
ソース

エクスポートしてもらえますか？

— Pacerier 2017年

14

これが利用可能なChromeのバージョンについてはわかりませんが、「コンソール-XMLHttpRequestsをログに記録する」という設定を見つけました（MacのChromeの開発者ツールの右下隅にあるアイコンをクリックします）

— シェルマックス
ソース

3

これは、XHRリクエストを監視する最も簡単で最良の方法です。

— CourtDemone 2014

6

DevToolsを開き、F1を押して設定にアクセスします。コンソールセクションを探し、「Log XMLHttpRequests」のチェックボックスをオンにします。

これで、すべてのajaxおよびその他の同様の要求がコンソールに記録されます。

この方法を使用するのは、通常、ネットワークタブに移動しなくても、コンソールで探しているすべてのものを確認できるためです。

— シェーン・ドーティ
ソース

4

あなたは使用することができフィドラー良い無料のツールです。

— ジョシュバーク
ソース

1

ええ、私はこれを行うために使用しているフィドラーを持っています。ブラウザ内から実行する方法を探しています。少し便利です。

— ウェスP

3

この投稿に協力してくれたすべての人に感謝します

私はubuntu 13.10を持っています、そして私のクロムバージョンは34.0です

私の状況ではこれはうまくいきます

1.open developer tools in chrome(or use right click on your page and then select inspect element)
2.go to "Network" tab
3.find your ajax request in "Name Path" column 
4.click on the specific ajax link

これで、リクエストの前に新しいパネルが表示されます。

in this panel select "Response" tab

— masoud2011
ソース

1

Philのステップ5では、「リソース」はChromeの新しいバージョンでは使用できなくなりました。下のペインにリストされているAjaxページの横にあるページアイコンをクリックする必要があります。名前、メソッド、ステータスなどの列があります。

次に、エラーメッセージが表示されるパネルがさらに表示されます。

— wcb1
ソース

0

また、ブラウザでページを右クリックして[要素の検査]を選択するだけで、開発者ツールを表示できます。

https://developer.chrome.com/devtools

— BitByteDog
ソース