ajax - Chrome開発者ツールでAJAX応答コンテンツを表示しますか？

Question

従来、私はFireBugを使用してAJAXリクエストをデバッグしていました。リクエストの内容とサーバーから返送されたレスポンスの両方を調べることができます。（これらが発生すると、コンソールにも通知されます。これは、Chromeにはないように見える便利な機能です）。

Chromeでは、応答ではなく、リクエストのみを表示できるようです。応答を調べようとすると、UIに「利用可能なコンテンツがありません」と表示されます（[開発者ツール]>[リソース]>[myRequest.php]> [コンテンツ]）。Chromeデベロッパーツールにこれらのリクエストを記憶させるには、何かをオンにする必要がありますか？

編集：重要な場合、これらの要求はFlashオブジェクト内で行われます。

score 87 · Accepted Answer

Google Chromeの開発チャネルを使用している場合：

http://www.chromium.org/getting-involved/dev-channel

...開発ツールコンソールで右クリックし、[XMLHttpRequestログを有効にする]をクリックできるはずです。

有効にすると、コンソールにXHRリクエストが表示され、それらをクリックしてリソースパネルに移動し、XHRのコンテンツを確認できます。

score 10 · Accepted Answer

表示される可能性があるのはOPTIONS、GoogleChromeインスペクターによってXHRリクエストとして扱われるCORSリクエストのリクエストのみです。したがって、XHRリクエストでフィルタリングすると、最初のOPTIONSプリフライトリクエストのみが表示され、そのレスポンスにはコンテンツが含まれず、Chromeがレスポンスの表示を拒否しているように見えるため混乱する可能性があります。フィルタを無効にして、同じURLの次のリクエストに移動します。これは、そのCORSプリフライトリクエストに対応する「実際の」リクエストである可能性があります。

score 3 · Accepted Answer

同じ問題が発生しました：フラッシュからのPOSTリクエスト+JSONレスポンス+Chromeインスペクターにレスポンスが表示されません。ただし、FF+FireBugでは問題ありません。

応答ヘッダーのContent-Typeにcharset=utf-8を追加すると、問題が解決しました。

コンテンツタイプ：application / json; charset = utf-8

これがこの問題の適切な解決策であるかどうかはわかりませんが、少なくともChromeInspectorでJSON応答を確認できます。

score 2 · Accepted Answer

リクエストがプラグインによって生成された場合、ajaxレスポンスのコンテンツはまだ表示されません。この問題はまもなく修正される可能性があります。

score 1 · Accepted Answer

リソース追跡をオンにしてから、[リソース]タブを確認します。「常にリソース追跡を使用する」をチェックすると、リソース追跡の方がはるかにうまく機能するようです。

score 1 · Accepted Answer

スクリプトがによって空のデータを送信していたため、空の応答がありました

die();

score 1 · Accepted Answer

解決策`PHP`：

理由は、requested-url（phpページ）にエラーがあることが原因である可能性があります。.phpただし、多くのホスティングでエラー出力が無効になっているため、要求されたファイル（ファイルの先頭のどこかに配置）でエラー出力を有効にする必要があります。

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

その後、そこに応答が表示されます。

フロントエンド応答のソリューション：

ブラウザコンソールで次のコードを実行すると、簡単なデバッグが行われる場合があります。

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        this.addEventListener('load', function() {
            console.log(this);
        });
        origOpen.apply(this, arguments);
    };
})();

score 0 · Accepted Answer

失敗コールバックでは、最初のパラメーターにresponseTextというプロパティがあります。

score 0 · Accepted Answer

その理由はクロームだけでなく、JSコードでもプレビューを止めることができます。たとえば、とVue.js呼ばれるプラグインがあり、次のvue-resorcese問題がありました： Chrome、OPTIONSリクエスト後に応答データがありませんか？今日その質問が見つかるまで、私はこの問題に数ヶ月住んでいました。現在の質問は答えを出さなかったので、ここで共有します。

詳細：このプラグインには、XHRオブジェクトを作成する次のコードがあります。

if ('responseType' in xhr && SUPPORTS_BLOB) {
       xhr.responseType = 'blob';
}

このコードは問題なくプレビューは機能しましたが、Chromeが更新されるまでは問題ありませんでした。今日、これをコメントすると、プレビューが再び表示されました！したがって、最初に、XHRラッパーを確認してみてください。このようなものがある可能性があります。

CORSプリフライトでのみ再現されたため、まれな問題でした。ところで、を右クリックしてOPTIONS XHRプレビューREPLAYも表示しました。

そこにあります

ajax - Chrome開発者ツールでAJAX応答コンテンツを表示しますか？

9 に答える 9

解決策PHP：

フロントエンド応答のソリューション：

Related

Reference

解決策`PHP`：