在 Chrome 开发者工具中查看 AJAX 响应内容？

Posted 2023-02-15

【中文标题】在 Chrome 开发者工具中查看 AJAX 响应内容？

【英文标题】：View AJAX response content in Chrome developer tools?

【发布时间】：2011-03-13 03:14:46

【问题描述】：

传统上我使用 FireBug 来调试我的 AJAX 请求。它允许您检查请求的内容以及从服务器发回的响应。 （当这些发生时，它还会在控制台中通知您，这是 Chrome 似乎缺乏的一个有用功能。

在 Chrome 中，我似乎只能查看请求，而不是响应。当我尝试检查响应时，UI 只显示“无可用内容”（开发人员工具 > 资源 > myRequest.php > 内容）。我是否必须开启某些功能才能让 Chrome 开发者工具记住这些请求？

编辑：以防万一，这些请求是在 Flash 对象中发出的。

【问题讨论】：

我也有同样的问题。我没有扩展名。我勾选了“log XMLHttpRequests”，并尝试了我能找到的所有建议。我必须使用 firefox + firebug 或 charles proxy 来使用 ajax 进行所有调试。 chrome 似乎不支持查看 ajax 响应，真是太痛苦了。

仅供参考，请求也是从 Flash 内部发出的，响应是 application/json

请重新接受正确答案。

【参考方案1】：

PHP 的解决方案：

原因可能是请求的 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);
    ;
)();

【讨论】：

谢谢，这对我有用。我有“致命错误：允许的内存大小为 134217728 字节用尽（试图分配 262144 字节）...”错误

【参考方案2】：

原因不仅可以在chrome中，还可以通过JS代码停止预览。例如，Vue.js 有一个名为 vue-resorcese 的插件，它有这个问题： Chrome, no response data after OPTIONS request? 我在这个问题上生活了几个月，直到今天发现了这个问题。当前问题从未给出答案，所以我现在在这里分享。

详情： 这个插件有下一个创建 XHR 对象的代码：

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

这段代码没问题，预览工作正常，但直到一些 chrome 更新。 今天我评论这个的时候，预览又出现了！所以首先，尝试检查你的 XHR 包装器，它可能有这样的东西。

这是一个罕见的问题，因为它仅在 CORS 预检中重现。顺便说一句，右键单击OPTIONS XHR 和REPLAY 也显示预览。

给你了

【参考方案3】：

您可能看到的只是 CORS 请求的 OPTIONS 请求被 Google Chrome 检查器视为 XHR 请求。因此，如果您按 XHR 请求进行过滤，您可能只会看到初始 OPTIONS 预检请求，其响应没有内容，并且会感到困惑，因为 Chrome 似乎拒绝显示响应。禁用过滤器并转到同一 URL 的下一个请求，这很可能是对应于该 CORS 预检请求的“真实”请求。

【参考方案4】：

我有空响应，因为脚本正在发送空数据

die();

【参考方案5】：

我遇到了同样的问题：来自 flash 的 POST 请求 + JSON 响应 + Chrome 检查器中没有显示响应。不过 FF + FireBug 没问题。

在响应标头中将 charset=utf-8 添加到 Content-Type 为我解决了这个问题：

内容类型：应用程序/json；字符集=utf-8

我不确定这是否是解决此问题的正确解决方案，但至少我现在能够在 Chrome Inspector 中看到 JSON 响应。

【讨论】：

这也解决了我的问题 - 缺少的字符集阻止了数据显示。

很高兴知道。希望 chrome 能解决这个问题，因为我能够更改正在更改的内容类型存在（由于操作系统升级而导致的其他不相关的工具链）问题，而且这样一个简单的问题导致如此大的转移是很愚蠢的。跨度>

很遗憾没有帮助，我已经在使用Content-Type:application/json; charset=utf-8

【参考方案6】：

在失败回调中，第一个参数有一个名为 responseText 的属性。

【参考方案7】：

如果您使用的是 Google Chrome 的开发频道：

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

...您应该可以在开发者工具控制台中右键单击，然后单击“启用 XMLHttpRequest 日志记录”。

启用后，您将在控制台中看到 XHR 请求，并能够单击它们将您带到资源面板，您将能够在其中看到 XHR 的内容。

【讨论】：

+1 - 这现在应该是公认的答案。这个问题很老了。

这对我不起作用。我启用了 XMLHTTPRequest 日志记录，但在开发工具网络 XHR 响应选项卡中，它始终显示“此请求没有可用的响应数据”。在 chrome 中看不到任何 ajax 响应（至少对我而言）。我必须使用显示它的萤火虫。

是的，我只看到我的 AJAX 函数名称。没有数据

and will be able to click them to take you to the resources panel - 当我这样做时，我会转到空的 CORS OPTION 请求（作为exceptexd），但数据响应仍然有“此请求没有可用的响应数据”，不幸的是回答没有帮助解决这个问题

这没有回答问题。这仅显示正在发出请求，但在控制台中。他正在尝试查看显示“此请求没有可用数据”的响应数据。

【参考方案8】：

如果请求是由插件生成的，则 ajax 响应的内容尚不可见。 这个问题很快就会得到解决。

【讨论】：

这不再是真的了。请参阅 Masterov 对这个问题的回答。

还可以考虑Fiddler 2 - 它是一个快速安装、免费且易于使用的工具。没有其他应用程序可以让您更全面、更详细地了解通过网络传输的所有内容、任何浏览器、任何插件，甚至是应用程序。它不止一次救了我:-)

我没有插件，我的所有 ajax 调用总是得到“此请求没有响应数据”。我必须改用 firefox + firebug。令人惊讶的是，chrome 不支持查看 ajax 响应。

【参考方案9】：

打开资源跟踪，然后检查资源选项卡。如果您选中“始终使用资源跟踪”，资源跟踪似乎会更好地工作。

【讨论】：

资源跟踪绝对开启。我可以看到正在发出的请求，以及这些请求的标头，而不是内容。 （注意：这仅适用于 AJAX 请求，并且可能仅适用于 Flash 中的请求）。

这很奇怪。我不使用闪存，也许这就是问题所在……如果您还没有尝试更新的 chrome/chromium 开发版本，可能值得。