在 Chrome 开发者工具中查看 AJAX 响应内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3200329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
View AJAX response content in Chrome developer tools?
提问by Ender
Traditionally I use FireBug to debug my AJAX requests. It lets you examine both the contents of your request as well as the response that was sent back from the server. (it also notifies you in the console when these occur, which is a useful feature that Chrome seems to lack).
传统上我使用 FireBug 来调试我的 AJAX 请求。它允许您检查请求的内容以及从服务器发回的响应。（当这些发生时，它还会在控制台中通知您，这是 Chrome 似乎缺乏的一个有用功能）。
In Chrome, I only seem to be able to view the requests, not the responses. When I try to examine the response the UI just displays "No Content Available" (Developer Tools > Resources > myRequest.php > Content). Do I have to turn something on to make the Chrome developer tools remember these requests?
在 Chrome 中，我似乎只能查看请求，而不是响应。当我尝试检查响应时，UI 仅显示“无可用内容”（开发人员工具 > 资源 > myRequest.php > 内容）。我是否必须开启某些功能才能让 Chrome 开发者工具记住这些请求？
EDIT: In case it matters, these requests are being made inside a Flash object.
编辑：以防万一，这些请求是在 Flash 对象中进行的。
采纳答案by loislo
The content of ajax responses is not visible yet if the request is generated by a plugin. There is some chance that this problem will be fixed soon.
如果请求是由插件生成的，ajax 响应的内容尚不可见。这个问题有可能很快得到解决。
回答by Masterov
If you are on a dev channel of Google Chrome:
如果您使用的是 Google Chrome 的开发频道：
http://www.chromium.org/getting-involved/dev-channel
http://www.chromium.org/getting-involved/dev-channel
...you should be able to right-click in the Developer Tools console, and click "Enable XMLHttpRequest logging".
...您应该能够在开发人员工具控制台中右键单击，然后单击“启用 XMLHttpRequest 日志记录”。
Once it is enabled, you will see the XHR requests in the console, and will be able to click on them to take you to the resources panel, where you'll be able to see the content of an XHR.
启用后，您将在控制台中看到 XHR 请求，并且可以单击它们将您带到资源面板，在那里您将能够看到 XHR 的内容。
回答by Robin Green
What you might be seeing is only the OPTIONSrequest of a CORS request being treated as an XHR request by Google Chrome inspector. So if you filter by XHR requests, you might only see the initial OPTIONS preflight request, whose response has no content, and get confused because it seems like Chrome is refusing to show the response. Disable the filter and go to the next request for that same URL, which will most likely be the "real" request corresponding to that CORS preflight request.
您可能看到的只是OPTIONSCORS 请求被 Google Chrome 检查器视为 XHR 请求的请求。因此，如果您按 XHR 请求进行过滤，您可能只会看到初始 OPTIONS 预检请求，其响应没有内容，并且会感到困惑，因为 Chrome 似乎拒绝显示响应。禁用过滤器并转到同一 URL 的下一个请求，这很可能是对应于该 CORS 预检请求的“真实”请求。
回答by Cristian
I encountered the same problem: POST request from flash + JSON response + no response displayed in Chrome inspector. No problem with FF + FireBug though.
我遇到了同样的问题：来自 flash 的 POST 请求 + JSON 响应 + Chrome 检查器中没有显示响应。FF + FireBug 没问题。
Adding charset=utf-8 to Content-Type in the response headers solved the problem for me:
将 charset=utf-8 添加到响应头中的 Content-Type 为我解决了这个问题：
Content-Type: application/json; charset=utf-8
内容类型：应用程序/json；字符集=utf-8
I'm not sure if this is the proper solution for this issue, but at least I'm able to see now the JSON response in Chrome Inspector.
我不确定这是否是此问题的正确解决方案，但至少我现在可以在 Chrome Inspector 中看到 JSON 响应。
回答by Michal - wereda-net
I had empty response because the script was sending empty data by
我有空响应，因为脚本通过以下方式发送空数据
die();
回答by Dagg Nabbit
Turn on resource tracking, then check the resources tab. Resource tracking seems to work a lot better if you check "always use resource tracking."
打开资源跟踪，然后检查资源选项卡。如果您选中“始终使用资源跟踪”，则资源跟踪似乎工作得更好。
回答by Phillip Senn
In the fail callback, the first parameter has a property called responseText.
在失败回调中，第一个参数有一个名为 responseText 的属性。
回答by Ivan Borshchov
The reason can be not only in chrome, but also preview can be stopped even by JS code. For example, there is some plugin for Vue.jscalled vue-resorcese, and it had this issue:
Chrome, no response data after OPTIONS request?I lived with this issue several months until found that question today. Current question never gave an answer, so I now share it here.
原因不仅可以在chrome中，甚至可以通过JS代码停止预览。例如，有一些插件Vue.js被调用vue-resorcese，它有这个问题：
Chrome，在 OPTIONS 请求后没有响应数据？我在这个问题上生活了几个月，直到今天发现了这个问题。当前问题从未给出答案，所以我现在在这里分享。
Details: this plugin had next code that creates XHR object:
详细信息：这个插件有下一个创建 XHR 对象的代码：
if ('responseType' in xhr && SUPPORTS_BLOB) {
xhr.responseType = 'blob';
}
This code was ok and preview worked but until some chrome update. Today when I commented this away, preview appeared again! So first, try check your XHR wrapper, may be it has something like this.
这段代码没问题，预览有效，但直到一些 chrome 更新。今天当我评论完这个的时候，预览又出现了！所以首先，请尝试检查您的 XHR 包装器，可能是这样的。
It was the rare issue because it was reproduced only with CORS preflight. BTW right clicking on the OPTIONS XHRand REPLAYalso showed preview.
这是罕见的问题，因为它仅在 CORS 预检中重现。顺便说一句，右键单击OPTIONS XHR并REPLAY显示预览。
there you have it
你有它
回答by T.Todua
Solution for PHP:
解决方案PHP：
The reason could be that the requested-url (phppage) has errors. But as many hostings has disabled the error-output, you need to enable that in requested .phpfile (put somewhere in the top of file):
原因可能是请求的 url（php页面）有错误。但是由于许多主机已禁用错误输出，您需要在请求的.php文件中启用它（放在文件顶部的某个位置）：
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
After that, you will see the response there.
之后，您将在那里看到响应。
To hook manually:
手动挂钩：
(function() {
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
this.addEventListener('load', function() {
console.log(this);
});
origOpen.apply(this, arguments);
};
})();
