เครื่องมือ dev ของ Chrome ไม่สามารถแสดงการตอบสนองแม้เนื้อหาที่ส่งคืนจะมีส่วนหัว Content-Type: text / html; charset = UTF-8

เหตุใดเครื่องมือสำหรับนักพัฒนา Chrome ของฉันจึงแสดง "ไม่สามารถแสดงข้อมูลการตอบกลับ" ในการตอบสนองเมื่อเนื้อหาที่ส่งคืนเป็นประเภท text / html

ทางเลือกอื่นในการดูการตอบกลับในเครื่องมือสำหรับนักพัฒนาคืออะไร

ฉันคิดว่าสิ่งนี้จะเกิดขึ้นก็ต่อเมื่อคุณได้ตรวจสอบ "เก็บบันทึก" และคุณพยายามดูข้อมูลการตอบกลับของคำขอก่อนหน้านี้หลังจากที่คุณออกไปแล้ว

ตัวอย่างเช่นฉันดูการตอบสนองต่อการโหลดคำถาม Stack Overflow นี้ คุณสามารถดูได้

ครั้งที่สองฉันโหลดหน้านี้ซ้ำ แต่ไม่ได้ดูที่ส่วนหัวหรือคำตอบ ฉันไปที่เว็บไซต์อื่น ตอนนี้เมื่อฉันดูการตอบกลับจะแสดงข้อความ 'ไม่สามารถโหลดข้อมูลตอบกลับ'

นี่เป็นปัญหาที่ทราบมาระยะหนึ่งแล้วและเป็นที่ถกเถียงกันมาก อย่างไรก็ตามมีวิธีแก้ปัญหาที่คุณหยุดชั่วคราวonunloadเพื่อให้คุณสามารถดูการตอบสนองก่อนที่จะออกไปและข้อมูลดังกล่าวจะไม่สูญเสียข้อมูลเมื่อออกไป

window.onunload = function() { debugger; }

สำหรับผู้ที่ได้รับข้อผิดพลาดขณะขอข้อมูล JSON:

หากคุณกำลังขอข้อมูล JSON JSON อาจมีขนาดใหญ่เกินไปและเป็นสาเหตุของข้อผิดพลาด

วิธีแก้ปัญหาของฉันคือคัดลอกลิงก์คำขอไปยังแท็บใหม่ ( getขอจากเบราว์เซอร์) คัดลอกข้อมูลไปยังโปรแกรมดู JSON ออนไลน์ซึ่งคุณมีการแยกวิเคราะห์อัตโนมัติและทำงานที่นั่น

ตามที่ Gideon อธิบายไว้นี่เป็นปัญหาที่ทราบแล้วของ Chrome ซึ่งเปิดให้บริการมานานกว่า 5 ปีโดยไม่มีความสนใจที่จะแก้ไข

น่าเสียดายที่ในกรณีของฉันwindow.onunload = function() { debugger; }วิธีแก้ปัญหาไม่ได้ผลเช่นกัน วิธีแก้ปัญหาที่ดีที่สุดที่ฉันพบคือใช้ Firefox ซึ่งจะแสดงข้อมูลการตอบสนองแม้หลังจากการนำทาง Firefox devtools ยังมีคุณสมบัติที่ดีมากมายที่ขาดหายไปใน Chrome เช่นไวยากรณ์ที่เน้นข้อมูลการตอบสนองหากเป็น html และจะแยกวิเคราะห์โดยอัตโนมัติหากเป็น JSON

ตามที่ Gideon อธิบายไว้นี่เป็นปัญหาที่ทราบ
เพื่อใช้window.onunload = function() { debugger; }แทน.
แต่คุณสามารถเพิ่มเบรกพอยต์ในแท็บต้นทางเพื่อแก้ปัญหาของคุณได้ แบบนี้:

"ไม่สามารถแสดงข้อมูลการตอบกลับ" ได้เช่นกันหากคุณกำลังดำเนินการตามคำขอข้ามโดเมนและโฮสต์ระยะไกลไม่ได้จัดการส่วนหัว CORS อย่างถูกต้อง ตรวจสอบข้อผิดพลาด js console ของคุณ

ถ้าคุณทำคำขอ AJAX กับfetchการตอบสนองที่ไม่ได้แสดงให้เห็นเว้นแต่จะอ่านด้วย.text(), .json()ฯลฯ

หากคุณเพียงแค่ทำ:

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

การตอบสนองจะไม่แสดงในเครื่องมือ dev
จะปรากฏขึ้นหลังจากที่คุณเรียกใช้:

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

สำหรับครั้งหนึ่งที่ได้รับข้อผิดพลาดนี้ในขณะที่ขอข้อมูล JSON ขนาดใหญ่ดังที่กล่าวไว้โดย Blauhirn ไม่ใช่วิธีแก้ปัญหาเพียงแค่เปิดคำขอในแท็บใหม่หากคุณใช้ส่วนหัวการตรวจสอบสิทธิ์และสิ่งที่ชอบ

Forturnatly chrome มีตัวเลือกอื่น ๆ เช่น Copy -> Copy as curl การเรียกใช้การเรียกนี้จาก commandoline ผ่าน cURL จะเป็นการจำลองการโทรเดิม

ฉันเพิ่ม> ~/result.jsonในส่วนสุดท้ายของคอมมานโดเพื่อบันทึกผลลัพธ์ลงในไฟล์ มิฉะนั้นจะถูกส่งออกไปที่คอนโซล

บั๊กยังคงทำงานอยู่ สิ่งนี้เกิดขึ้นเมื่อ JS กลายเป็นตัวเริ่มต้นสำหรับเพจใหม่ (200) หรือเปลี่ยนเส้นทาง (301/302) 1 วิธีที่เป็นไปได้ในการแก้ไข - ปิดการใช้งาน JavaScript ตามคำขอ เช่นในการเชิดหุ่นคุณสามารถใช้: page.setJavaScriptEnabled (false) ในขณะที่สกัดกั้นคำขอ (page.on ('request'))

สำหรับผู้ที่มาที่นี่จาก Google และสำหรับผู้ที่คำตอบก่อนหน้านี้ไม่สามารถไขปริศนาได้ ...

หากคุณใช้ 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

ในการแก้ไขให้เพิ่มการตอบกลับที่ด้านล่างของเส้นทางของคุณ (ฝั่งเซิร์ฟเวอร์):

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