如何在Chrome开发者工具中查看HTTP 500错误的完整响应JSON内容

别着急，我之前也踩过这个坑——Postman里能清清楚楚看到500错误返回的完整JSON响应，到了Chrome开发者工具里就显示“failed to load response”，其实只要调整几个设置或者用点小技巧，就能把那藏起来的响应内容挖出来。下面是我常用的几个方法：

• 先检查Network标签的基础设置
  打开Chrome开发者工具（按F12或者右键页面选“检查”），切换到Network标签：

  1. 确保顶部的过滤器选的是「All」或者「XHR/fetch」（别只选「Doc」，不然可能漏了异步的POST请求）；
  2. 勾选「Disable cache」（在Network标签的顶部工具栏，勾选后可以避免缓存干扰，保证拿到的是最新的响应）；
  3. 找到那条状态码为500的请求（一般是红色的），点击它，然后看右侧的面板：
     • 先看Preview标签：有时候Response标签会显示加载失败，但Preview标签会自动解析JSON内容，直接展示出来；
     • 如果Preview也不行，试试Response标签里的「Raw」视图，这里会显示原始的响应文本，你可以手动复制下来解析成JSON。

• 用控制台代码拦截错误响应
  如果上面的方法还是看不到，那可能是Chrome的UI对响应的格式判断有问题（比如Content-Type头和实际响应内容不匹配），这时候可以用控制台代码强制捕获响应：

  1. 切换到Console标签，把下面这段代码粘贴进去回车：

     // 拦截所有fetch请求，捕获错误响应
     const originalFetch = window.fetch;
     window.fetch = async (...args) => {
       const response = await originalFetch(...args);
       if (!response.ok) {
         // 获取原始响应文本
         const rawResponse = await response.clone().text();
         console.error('===== 错误响应内容 =====');
         console.log(rawResponse);
         // 尝试解析为JSON
         try {
           const errorJson = JSON.parse(rawResponse);
           console.error('===== 解析后的错误JSON =====');
           console.log(errorJson);
         } catch (e) {
           console.log('响应不是JSON格式');
         }
       }
       return response;
     };
     
     // 拦截XMLHttpRequest请求（兼容老的请求方式）
     const originalXHR = XMLHttpRequest.prototype.open;
     XMLHttpRequest.prototype.open = function(...args) {
       this.addEventListener('load', () => {
         if (this.status >= 400) {
           console.error('===== XHR错误响应内容 =====');
           console.log(this.responseText);
           try {
             const errorJson = JSON.parse(this.responseText);
             console.error('===== 解析后的XHR错误JSON =====');
             console.log(errorJson);
           } catch (e) {
             console.log('响应不是JSON格式');
           }
         }
       });
       originalXHR.apply(this, args);
     };
     

  2. 重新触发你的POST请求（比如点击页面上的按钮或者刷新页面），控制台就会打印出错误响应的原始内容和解析后的JSON了。

• 最后再排查下服务器响应头
  有时候服务器返回的Content-Type头不对（比如明明是JSON，却返回了text/plain），Chrome可能就不会自动解析展示。你可以在请求的Headers标签里看「Response Headers」里的Content-Type字段，如果确实和响应内容不匹配，也可以反馈给后端同事调整，但这不影响你用上面的方法拿到响应内容。

备注：内容来源于stack exchange，提问作者pete