Chrome dev tools fails to show response even the content returned has header Content-Type:text/html; charset=UTF-8

Question

Why does my Chrome developer tools show

Failed to show response data

in response when the content returned is of type text/html?

What is the alternative to see the returned response in developer tools?

Lindeberg

I have found that Microsoft Edge Dev (based on Chromium) does not give me this error. – Societal

Did you try checking in Firefox ? – Pamilapammi

Answer 1

I think this only happens when you have 'Preserve log' checked and you are trying to view the response data of a previous request after you have navigated away.

For example, I viewed the Response to loading this Stack Overflow question. You can see it.

The second time, I reloaded this page but didn't look at the Headers or Response. I navigated to a different website. Now when I look at the response, it shows 'Failed to load response data'.

This is a known issue, that's been around for a while, and debated a lot.

Dariusdarjeeling

Not being able to see response data almost entirely kills the point of "preserve log"! – Sashasashay

No, in Chrome 61, it can definitely also happen if "Preserve log" is not checked, and without leaving the page. – Gripper

The response data can be large, and with preserve log checked indefinitely, would build up significantly hindering DevTool performance. To discard the response data upon navigation was probably done by design. If you have some suggestions, comment on the thread linked above. – Dariusdarjeeling

It does not work if request you want to inspect gives immediate redirect with javascript. There is just no time to open console and add onunload handler. But Firefox helps in such situations. – Malachi

As alternative you may try chrome.google.com/webstore/detail/network-record/… extension – Lac

Still experiencing this issue with chrome 73.0, the onunload fix doesn't work for me for some reason. – Devotee

Same here: the unload fix pasted into the console did not work in my case, but @Nolan's advice with the Sources tab did (it also seemed more elegant). – Tribalism

@GideonPyzer sorry, can the workaround debug live code? – Mirilla

the error happens also when i do not have "Preserve log" checked – Morion

Your solution seems promising, but it clearly skips some steps for someone with less knowledge than you do about chrome. What is one supposed to do with "window.onunload = function() { debugger; }"? – Vang

window.onunload = function() { debugger; } doesn't work anymore – Guyot

You cannot comment on the thread linked unless you have editor permission, I tried. And adding debugger to the source is a no go as this is production level code, debug code is not an option. And Firefox apperently can preserve it fine, even a few hours of log, so whats chromes problem? Yes it might eat memory, but only if you open devtools, and then you are probably more interested in data than in performance. And if its still a problem, add a toggle. – Provisional

Unbelievable. 8 year bug?! At the VERY least, the window should show a warning about the missing data. – Sod

GAAAAAH This bit me AGAIN. A few hours down the drain. – Sod

This beforeunload handler didn't work for me, but its slightly modified version worked: window.addEventListener('beforeunload', function(e) { e.returnValue = 'Are you sure?'; return e.returnValue; }); Just click "Cancel" in the confirmation modal to prevent page reload, and go to the Network tab to see the response body - it is there. – Goddaughter

I advice everybody who face this issue to star it here: bugs.chromium.org/p/chromium/issues/detail?id=141129 It is still not fixed because it has to little stars :( – Neuralgia

As much as I respect highly skilled developers of Chrome, I do think they are on drugs or have some other mental issues. Having a Dev Tools feature that IS able to store request history but not request details is Very strange, not fixing this bug/feature it 9 years is outright weird. – Darciedarcy

@Neuralgia how to incr stars? – Anse

@Neuralgia how to star it? – Dionnadionne

Sorry, I am getting this error with Preserve logs, on a query requested on the current page, I am getting no output from "Response" tab but when I open page in other tab, I am getting the output. When I'am debbuging code, the output seems ok. – Prehuman

@Dionnadionne The star button is in the top left just before it says "Starred by 300 users". – Beanpole

Have no idea why they won't fix it after so many years. – Floridafloridia

Still an issue with chrome Version 120 – Uniformize

Answer 2

As described by Gideon, this is a known issue with Chrome that has been open for more than 5 years with no apparent interest in fixing it.

Unfortunately, in my case, the window.onunload = function() { debugger; } workaround didn't work either. So far the best workaround I've found is to use Firefox, which does display response data even after a navigation. The Firefox devtools also have a lot of nice features missing in Chrome, such as syntax highlighting the response data if it is html and automatically parsing it if it is JSON.

Judgment

Wow, great thing. Needing to debug an error which only occurs to Chrome, not Firefox. So also no option for me. Seriously, why does everyone say the Chrome web tools are so much better than Firefox's? Seems like they didn't try Firefox for years. – Incantatory

Chrome also doesn't have Firefox's convenient "edit and resend" request option. – Judgment

Yes... Also used FF to get the thing done... Worked as expected. We're living treacherous times! – Interlanguage

@Judgment chrome did had "Resend" option for quite a while, but in one of the last releases they have removed even that... Luckily one can do quick fetch(...copied link...) in console, and observe response in network tab – Carpeting

Still getting this even now. For crying out loud I'd rather them fix what they already have rather than introduce pointless features like eager evaluation in the console and neglect the quality of their fundamental developer tools. – Allnight

Answer 3

For the ones who are getting the error while requesting JSON data:

If your are requesting JSON data, the JSON might be too large and that what cause the error to happen.

My solution is to copy the request link to new tab (get request from browser) copy the data to JSON viewer online where you have auto parsing and work on it there.

Heydon

not really a solution though. I work with authentication and such. Defies the purpose of the dev tools. Somebody should probably create some bugreport somewhere. Correct answer here though – Clomb

Is this limit configurable in any way? – Erysipeloid

In my case it happened at 23MB which is a stupid large JSON response.... I opened an issue to have the error message made more descriptive. – Hindmost

I'm seeing the issue for 6MB JSON :( – Igbo

Also hitting this on JSON response arond 6mb uncompressed. – Spinoff

I got the error with only 227KB of json - scaled it back and it works ok for 25KB, so definitely a size issue – Andersonandert

I got this when the site just wasn't running (local development out of Visual Studio) – Topknot

I was able to get at the data in a roundabout way by right clicking the request, choosing Copy > PowerShell request, storing the result as $Response in PowerShell, then following the example here to stream it to a file. (May have to decode if you're requesting a compressed response.) – Rickart

Unable to view the response of 16MB – Emmaemmalee

this will only get the current value of the response, which might have changed from the time when the original call had happened. – Rebeccarebecka

Answer 4

As described by Gideon, this is a known issue.
For use window.onunload = function() { debugger; } instead.
But you can add a breakpoint in Source tab, then can solve your problem. like this:

Equate

What's the advantage of the Source tab over window.onunload = function() { debugger; }? – Doublefaced

you don't need to write the code for the debugger, and you can debug on higher environments where you maybe jumping between pages and don't preserve the same window – Babby

window.onunload = function() { debugger; } didn't work for me, this did. thanks! – Tribalism

Answer 5

If you make an AJAX request with fetch, the response isn't shown unless it's read with .text(), .json(), etc.

If you just do:

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

the response won't be shown in dev tools.
It shows up after you run:

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

Thibaud

Is there any bug opened about this behaviour of dev tools? This is ridiculous – Calc

@Calc agree, still not fixed. Just spent 1:30 hour figuring out why I didn't get a response. – Allodial

Just wasted an hour on this, looks like Chrome is still not fixed. I finally checked with Postman because I tought I was going crazy and there was my content in all its glory. – Prowler

Same here. I use Brave but was reproducible on Chrome too (obviously). Bug not present in Safari. Just lost two hours on this, assumed there was a problem with the server. – Bylaw

Thanks a lot, I wouldn't guess such behavior in a million years. Btw. I'm using Edge Dev 96. – Ysabel

This answer should be accepted. Tried so many things and to finally find out this. Duh! – Ozuna

@manibharataraju The question itself is quite vague. There are many reasons and solutions for this problem and the accepted one is the one that helped the asker. – Thibaud

@manibharataraju Also now I can't reproduce this problem. The content is shown without reading it first. It seems this "bug" was fixed. – Thibaud

@Thibaud if the question is vague we don't like wild guesses. Please report or ask for an edit. – Afterpiece

that was the right answer for me – Austreng

Answer 6

"Failed to show response data" can also happen if you are doing crossdomain requests and the remote host is not properly handling the CORS headers. Check your js console for errors.

Tiepolo

chrome is still broken for not showing the response (in any shape whatsoever) - FF worked for me – Interlanguage

You are right! But this is exactly why I need the reponse to understand why my request is failing. Everything works fine with curl, but chrome still fails with "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource" – Laspisa

Answer 7

As long as the body of the Response is not consumed within your code (using .json() or .text() for instance), it won't be displayed in the preview tab of Chrome dev tools

Austreng

You are right, if the body is not consumed, chrome is not displaying anything in Response and Preview tabs. Take care that json() and text() are returning a Promise. – Prehuman

Answer 8

For the once who receive this error while requesting large JSON data it is, as mentioned by Blauhirn, not a solution to just open the request in new tab if you are using authentication headers and suchlike.

Forturnatly chrome does have other options such as Copy -> Copy as curl. Running this call from the commandoline through cURL will be a exact replicate of the original call.

I added > ~/result.json to the last part of the commando to save the result to a file. Otherwise it will be outputted to the console.

Force

An exact replica is no use if the server state supplying the response has changed. So for me, that have to wait around 40 minutes for an event to happen, and that event triggers a new page, this completely breaks the whole use. It should be an option that could be toggled. UInfortunatly there is no vote or comment option for common visitors to the issue listed in a previous comment unless you are part of their team :/ – Provisional

Answer 9

For those coming here from Google, and for whom the previous answers do not solve the mystery...

If you use XHR to make a server call, but do not return a response, this error will occur.

Example (from Nodejs/React but could equally be 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 will here report:

Failed to show response data

To fix, add the return response to bottom of your route (server-side):

res.json('Adding this below the console.log in App.js route will solve it.');

Greco

well, that's because you aren't sending anything back to the client...? – Barahona

Answer 10

Bug still active. This happens when JS becomes the initiator for new page(200), or redirect(301/302) 1 possible way to fix it - it disable JavaScript on request. I.e. in puppeteer you can use: page.setJavaScriptEnabled(false) while intercepting request(page.on('request'))

Perigon

Answer 11

another possibility is that the server does not handle the OPTIONS request.

Evangel

Answer 12

One workaround is to use Postman with same request url, headers and payload.

It will give response for sure.

Niello

Isn't that super inconvenient to switch between browser, ide and postman? – Unprecedented

@BhargavNanekalva, Agreed but it helps sometimes. – Frier

Answer 13

For me, the issue happens when the returned JSON file is too large.

If you just want to see the response, you can get it with the help of Postman. See the steps below:

1. Copy the request with all information(including URL, header, token, etc) from chrome debugger through Chrome Developer Tools->Network Tab->find the request->right click on it->Copy->Copy as cURL.
2. Open postman, import->Rawtext, paste the content. Postman will recreate the same request. Then run the request you should see the JSON response. [Import cURL in postmain][1]: https://i.stack.imgur.com/dL9Qo.png

If you want to reduce the size of the API response, maybe you can return fewer fields in the response. For mongoose, you can easily do this by providing a field name list when calling the find() method. For exmaple, convert the method from:

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

To:

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

In my case, there is field called description, which is a large string. After removing it from the field list, the response size is reduced from 6.6 MB to 404 KB.

Raila

Answer 14

I had the same problem and none of the answers worked, finally i noticed i had made a huge mistake and had chosen other as you can see

Now this seems like a dumb mistake but the thing is even after removing and reinstalling chrome the problem had remained (settings are not uninstalled by default when removing chrome) and so it took me a while until I found this and choose All again...! This happened because my backend doesn't handle OPTIONS method and because I had clicked on other by mistake which caused me to spend a couple days trying answers!

Gene

Answer 15

In my case, when sending post data with fetch, make sure you use the option to enable cors and then define cors on the remote origin.

fetch('', {
    mode: 'cors',//enable cors
    method: 'post',
    body: formData,//don't forget to stringify if server accepts json
    headers: {
        'content-Type': 'application/json' //remove if server accepts form-data
    }
})

Then, if you are using a local development environment, you can configure Cors to accept requests from all domains

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // Enable CORS for all domains

I hope this helps someone

Adamina

Answer 16

One possibility, when project assembly (dll) is renamed, latest global.asax is not copied in iis webserver. (global.asax has refrence to new assembly in inherits section)

Notability

Answer 17

I discovered that the response body and preview are hidden if there's a file attached in the request body:

fetch("https://httpbin.org/post?with-file=1", {
    method: "post",
    body: document.querySelector("input").files[0],
});

You'll see this error:

Failed to load response data: Request content was evicted from inspector cache

But if you don't attach anything in the request, it works as expected:

fetch("https://httpbin.org/post?empty=1", {
    method: "post",
});

I've made an issue report in Chromium. You can check it for more details.

Zoolatry

Answer 18

Use firefox, it always display the response and give the same tools that chrome does.

Caber

Good to know, but this isn't answering the question – Austreng