Google chrome Chrome开发工具无法显示响应，即使返回的内容具有标题内容类型：text/html；字符集=UTF-8

当返回的内容类型为text/html时，为什么我的chrome developer工具在响应中显示“未能显示响应数据”

---

在开发人员工具中查看返回的响应的替代方法是什么？

我认为只有当您选中“保留日志”并且在导航离开后尝试查看以前请求的响应数据时，才会发生这种情况

例如，我查看了加载此堆栈溢出问题的响应。你可以看到

第二次，我重新加载了这个页面，但没有查看标题或响应。我浏览了另一个网站。现在，当我查看响应时，它显示“加载响应数据失败”

这是一个众所周知的，已经存在了一段时间，并且争论了很多。但是，有一种解决方法，您可以暂停onload上的

onunload

，这样您就可以在响应导航离开之前查看它，从而在导航离开时不会丢失数据

window.onunload = function() { debugger; }

---

如果您正在执行跨域请求，并且远程主机未正确处理CORS头，也可能发生“显示响应数据失败”的情况。检查您的js控制台是否有错误。

正如Gideon所描述的，这是Chrome的一个已知问题，已经存在5年多了，显然没有兴趣修复它

---

不幸的是，在我的例子中，

window.onunload=function（）{debugger；}

变通方法也不起作用。到目前为止，我发现最好的解决方法是使用Firefox，它即使在导航之后也会显示响应数据。Firefox开发工具在Chrome中还缺少很多优秀的功能，例如语法高亮显示响应数据（如果是html）并自动解析它（如果是JSON）。

对于在请求JSON数据时出错的用户：

如果您正在请求JSON数据，则JSON可能太大，从而导致错误发生

我的解决方案是将请求链接复制到新选项卡（

get

request from browser）

---

将数据复制到JSON viewer online，您可以在那里进行自动解析和处理。

正如Gideon所述，这是一个已知问题。

---

用于替代使用

window.onunload=function（）{debugger；}

。
但您可以在“源”选项卡中添加断点，然后就可以解决您的问题。 这样地：

---

对于在请求大型JSON数据时收到此错误的用户来说，正如Blauhirn所述，如果您使用的是身份验证头之类的东西，那么这不是一个在新选项卡中打开请求的解决方案

FORTURNY chrome还有其他选项，如复制->复制为卷曲。 通过cURL从commandoline运行此调用将完全复制原始调用

我在commando的最后一部分添加了

~/result.json

，以将结果保存到文件中。

---

否则，它将被输出到控制台。

如果您使用

fetch

发出AJAX请求，则不会显示响应，除非使用

.text（）

，

.json（）

等读取响应

如果你只是这样做：

 r = fetch("/some-path");

响应不会显示在开发工具中。
它会在您运行后显示：

r.then(r => r.text())

Bug仍然处于活动状态。 当JS成为新页面（200）或重定向（301/302）的启动器时，就会发生这种情况 1种可能的修复方法-它会根据请求禁用JavaScript。 也就是说，在Puppeter中，您可以在拦截请求（page.on（'request'）时使用：page.setJavaScriptEnabled（false）

用于那些来自谷歌的人，对于那些之前的答案无法解开谜团的人…

如果使用XHR进行服务器调用，但不返回响应，则会发生此错误

示例（来自Nodejs/React，但也可以是js/php）：

App.tsx

const handleClickEvent = () => {
    fetch('/routeInAppjs?someVar=someValue&nutherVar=summat_else', {
        method: 'GET',
        mode: 'same-origin',
        credentials: 'include',
        headers: {
          'content-type': 'application/json',
          dataType: 'json',
        },
    }).then((response) => {
        console.log(response)
    });
}

App.js

app.route('/getAllPublicDatasheets').get(async function (req, res) {
    const { someVar, nutherVar } = req.query;
    console.log('Ending here without a return...')
});

Console.log将在此处报告：

Failed to show response data

要修复此问题，请将返回响应添加到路由的底部（服务器端）：

---

另一种可能是服务器不处理选项请求。

一种解决方法是使用具有相同请求url、标题和负载的邮递员

---

它肯定会给出响应。

对我来说，当返回的JSON文件太大时，就会出现问题

如果你只想看到回复，你可以在邮递员的帮助下得到。请参见以下步骤：

通过chrome开发者工具->网络选项卡->查找请求->右键单击它->复制->复制为cURL，从chrome调试器复制包含所有信息（包括URL、标题、令牌等）的请求

打开postman，导入->Rawtext，粘贴内容。邮递员将重新创建相同的请求。然后运行请求，您将看到JSON响应。 [邮递邮件输入][1]：https://i.stack.imgur.com/dL9Qo.png

如果要减小API响应的大小，可能可以在响应中返回更少的字段。对于mongoose，您可以通过在调用find（）方法时提供字段名列表来轻松实现这一点。 对于exmaple，将方法转换为：

const users = await User.find().lean();

致：

---

在我的例子中，有一个名为description的字段，它是一个大字符串。将其从字段列表中删除后，响应大小从6.6MB减少到404KB。

我遇到了同样的问题，但所有答案都不起作用，最后我注意到我犯了一个巨大的错误，选择了

其他

，如您所见

现在这似乎是一个愚蠢的错误，但问题是，即使在删除并重新安装chrome之后，问题仍然存在（删除chrome时默认不会卸载设置），因此我花了一段时间才找到这个问题并再次选择

All

。。。！

---

这是因为我的后端没有处理

选项

方法，而且我错误地点击了

其他

，这导致我花了几天时间尝试答案

无法查看响应数据几乎完全扼杀了“保留日志”的意义！不，在Chrome 61中，它肯定可以

const users = await User.find().lean();

const users = await User.find({}, '_id username email role timecreated').lean();