Alat pengembang Chrome gagal untuk menunjukkan respon bahkan konten yang dikembalikan memiliki tajuk Jenis Konten: teks / html; charset = UTF-8

Mengapa alat pengembang Chrome saya menampilkan "Gagal menampilkan data tanggapan" sebagai tanggapan ketika konten yang dikembalikan berjenis teks / html?

Apa alternatif untuk melihat tanggapan yang dikembalikan di alat pengembang?

Saya rasa ini hanya terjadi jika Anda telah memeriksa 'Pertahankan log' dan Anda mencoba melihat data respons dari permintaan sebelumnya setelah Anda keluar.

Misalnya, saya melihat Tanggapan untuk memuat pertanyaan Stack Overflow ini. Kamu bisa melihatnya.

Kedua kalinya, saya memuat ulang halaman ini tetapi tidak melihat Header atau Respons. Saya menavigasi ke situs web lain. Sekarang ketika saya melihat tanggapannya, itu menunjukkan 'Gagal memuat data tanggapan'.

Ini adalah masalah umum , yang sudah ada sejak lama, dan banyak diperdebatkan. Namun, ada solusi, di mana Anda menjeda onunload, sehingga Anda dapat melihat respons sebelum menavigasi keluar, dan dengan demikian tidak kehilangan data saat keluar.

window.onunload = function() { debugger; }

Untuk orang-orang yang mendapatkan kesalahan saat meminta data JSON:

Jika Anda meminta data JSON, JSON mungkin terlalu besar dan itulah penyebab terjadinya kesalahan.

Solusi saya adalah menyalin tautan permintaan ke tab baru ( getpermintaan dari browser) menyalin data ke JSON viewer online di mana Anda memiliki parsing otomatis dan mengerjakannya di sana.

Seperti yang dijelaskan oleh Gideon, ini adalah masalah umum Chrome yang telah dibuka selama lebih dari 5 tahun tanpa minat yang jelas untuk memperbaikinya.

Sayangnya, dalam kasus saya, window.onunload = function() { debugger; }solusi tersebut juga tidak berhasil. Sejauh ini solusi terbaik yang saya temukan adalah menggunakan Firefox, yang menampilkan data respons bahkan setelah navigasi. Devtools Firefox juga memiliki banyak fitur bagus yang hilang di Chrome, seperti sintaks yang menyorot data respons jika itu html dan secara otomatis menguraikannya jika itu adalah JSON.

Seperti yang dijelaskan oleh Gideon, ini adalah masalah yang diketahui.
Untuk digunakan window.onunload = function() { debugger; }sebagai gantinya.
Tapi Anda bisa menambahkan breakpoint di tab Source, lalu bisa menyelesaikan masalah Anda. seperti ini:

"Gagal menampilkan data respons" juga dapat terjadi jika Anda melakukan permintaan lintas domain dan host jarak jauh tidak menangani header CORS dengan benar. Periksa konsol js Anda apakah ada kesalahan.

Jika Anda membuat permintaan AJAX dengan fetch, respon tidak ditampilkan kecuali jika dibaca dengan .text(), .json(), dll

Jika Anda hanya melakukan:

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

responnya tidak akan ditampilkan di alat dev.
Ini muncul setelah Anda menjalankan:

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

Untuk orang yang menerima kesalahan ini saat meminta data JSON yang besar, seperti yang disebutkan oleh Blauhirn, bukanlah solusi untuk hanya membuka permintaan di tab baru jika Anda menggunakan header otentikasi dan sejenisnya.

Forturnatly chrome memang memiliki opsi lain seperti Salin -> Salin sebagai ikal. Menjalankan panggilan ini dari commandoline melalui cURL akan menjadi replikasi yang tepat dari panggilan asli.

Saya menambahkan > ~/result.jsonke bagian terakhir dari perintah untuk menyimpan hasilnya ke file. Jika tidak, itu akan dikeluarkan ke konsol.

Bug masih aktif. Ini terjadi ketika JS menjadi pemrakarsa untuk halaman baru (200), atau mengarahkan (301/302) 1 cara yang mungkin untuk memperbaikinya - ini menonaktifkan JavaScript berdasarkan permintaan. Yaitu dalam dalang Anda dapat menggunakan: page.setJavaScriptEnabled (false) saat mencegat permintaan (page.on ('request'))

Bagi mereka yang datang ke sini dari Google, dan untuk siapa jawaban sebelumnya tidak memecahkan misteri ...

Jika Anda menggunakan XHR untuk melakukan panggilan server, tetapi tidak mengembalikan respons, kesalahan ini akan terjadi.

Contoh (dari Nodejs / React tetapi bisa juga menjadi 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 di sini akan melaporkan:

Failed to show response data

Untuk memperbaikinya, tambahkan respons pengembalian ke bawah rute Anda (sisi server):

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