ข้อมูลอ้างอิงฟีเจอร์ของคอนโซล

หน้านี้เป็นข้อมูลอ้างอิงเกี่ยวกับฟีเจอร์ที่เกี่ยวข้องกับคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome บทความนี้ถือว่าคุณคุ้นเคยกับการใช้คอนโซลเพื่อดูข้อความที่บันทึกไว้และเรียกใช้ JavaScript อยู่แล้ว หากไม่เห็น ให้ดูหัวข้อเริ่มต้นใช้งาน

หากกำลังมองหาข้อมูลอ้างอิง API สำหรับฟังก์ชันอย่าง console.log() โปรดดูข้อมูลอ้างอิง Console API ดูข้อมูลอ้างอิงเกี่ยวกับฟังก์ชันต่างๆ เช่น monitorEvents() ได้ที่ข้อมูลอ้างอิง Console Utilities API

เปิดคอนโซล

คุณสามารถเปิดคอนโซลเป็นแผงหรือเป็นแท็บในลิ้นชัก

เปิดแผงคอนโซล

กด Control+Shift+J หรือ Command+Option+J (Mac)

หากต้องการเปิดคอนโซลจากเมนูคำสั่ง ให้เริ่มพิมพ์ Console แล้วเรียกใช้คำสั่ง Show Console ที่มีป้ายแผงควบคุมอยู่ข้างๆ

เปิดคอนโซลในลิ้นชัก

กด Escape หรือคลิกปรับแต่งและควบคุม DevTools แล้วเลือกแสดงลิ้นชักคอนโซล

กล่องจะปรากฏขึ้นที่ด้านล่างของหน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ โดยมีแท็บคอนโซลเปิดอยู่

หากต้องการเปิดแท็บคอนโซลจากเมนูคำสั่ง ให้เริ่มพิมพ์ Console แล้วเรียกใช้คำสั่ง Show Console ที่มีป้ายลิ้นชักอยู่ข้างๆ

เปิดการตั้งค่าคอนโซล

คลิก Console Settings ที่มุมขวาบนของคอนโซล

ลิงก์ด้านล่างจะอธิบายการตั้งค่าแต่ละรายการ

• ซ่อนเครือข่าย
• เก็บบันทึก
• บริบทที่เลือกเท่านั้น
• จัดกลุ่มข้อความที่คล้ายกันในคอนโซล
• แสดงข้อผิดพลาด CORS ในคอนโซล
• บันทึก XMLHttpRequest
• การประเมินที่ตั้งใจ
• การเติมข้อความอัตโนมัติจากประวัติการเข้าชม

เปิดแถบด้านข้างของ Console

คลิกแสดงแถบด้านข้างของคอนโซล เพื่อแสดงแถบด้านข้าง ซึ่งมีประโยชน์สำหรับการกรอง

ดูข้อความ

ส่วนนี้มีฟีเจอร์ที่เปลี่ยนวิธีแสดงข้อความในคอนโซล ดูดูข้อความเพื่อดูคำแนะนำแบบทีละขั้นตอน

ปิดใช้การจัดกลุ่มข้อความ

เปิดการตั้งค่าคอนโซลและปิดใช้จัดกลุ่มที่คล้ายกันเพื่อปิดใช้ลักษณะการจัดกลุ่มข้อความเริ่มต้นของคอนโซล ดูตัวอย่างได้ที่บันทึกคําขอ XHR และการดึงข้อมูล

ดูข้อความจากเบรกพอยต์

คอนโซลจะทําเครื่องหมายข้อความที่ทริกเกอร์โดยจุดหยุดพักตามวิธีต่อไปนี้

• console.* เรียกเบรกพอยต์แบบมีเงื่อนไขที่มีเครื่องหมายคําถามสีส้ม ?
• ข้อความ Logpoint ที่มีจุด 2 จุดสีชมพู ..

หากต้องการข้ามไปยังเครื่องมือแก้ไขจุดหยุดพักบรรทัดในแผงแหล่งที่มา ให้คลิกลิงก์แองเคอร์ข้างข้อความจุดหยุดพัก

ดูสแต็กเทรซ

คอนโซลจะบันทึกสแต็กเทรซสำหรับข้อผิดพลาดและคำเตือนโดยอัตโนมัติ รายงานสแต็กเทรซคือประวัติการเรียกฟังก์ชัน (เฟรม) ที่ทําให้เกิดข้อผิดพลาดหรือคําเตือน คอนโซลจะแสดงเฟรมตามลำดับย้อนกลับ โดยเฟรมล่าสุดจะอยู่ด้านบน

หากต้องการดูสแต็กเทรซ ให้คลิกไอคอนขยาย ข้างข้อผิดพลาดหรือคำเตือน

ดูสาเหตุของข้อผิดพลาดในสแต็กเทรซ

คอนโซลจะแสดงลำดับสาเหตุของข้อผิดพลาดในสแต็กเทรซ (หากมี)

คุณสามารถระบุสาเหตุของข้อผิดพลาดเมื่อจับและโยนข้อผิดพลาดอีกครั้งเพื่อให้การแก้ไขข้อบกพร่องง่ายขึ้น เมื่อคอนโซลแสดงสาเหตุตามลำดับ โปรแกรมจะพิมพ์กองข้อผิดพลาดแต่ละกองโดยใส่คำนำหน้า Caused by: เพื่อให้คุณค้นหาข้อผิดพลาดเดิมได้

ดูสแต็กเทรซที่ไม่พร้อมกัน

หากเฟรมเวิร์กที่คุณใช้รองรับหรือเมื่อใช้พรอมิเทีฟการจัดตารางเวลาของเบราว์เซอร์โดยตรง เช่น setTimeout เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะติดตามการดำเนินการแบบแอสซิงค์ได้โดยลิงก์โค้ดแบบแอสซิงค์ทั้ง 2 ส่วนเข้าด้วยกัน

ในกรณีนี้ สแต็กเทรซจะแสดง "เรื่องราวทั้งหมด" ของการดำเนินการแบบแอสซิงค์

แสดงเฟรมของบุคคลที่สามที่รู้จักในสแต็กเทรซ

เมื่อสําเนาแผนที่ซอร์สโค้ดมีช่อง ignoreList โดยค่าเริ่มต้น คอนโซล จะซ่อนเฟรมของบุคคลที่สามจากแหล่งที่มาที่สร้างขึ้นโดยเครื่องมือรวมไฟล์ (เช่น webpack) หรือเฟรมเวิร์ก (เช่น Angular) จากสแต็กเทรซ

หากต้องการดูสแต็กเทรซแบบเต็มซึ่งรวมถึงเฟรมของบุคคลที่สาม ให้คลิกแสดงเฟรมเพิ่มอีก N รายการที่ด้านล่างของสแต็กเทรซ

หากต้องการดูสแต็กเทรซแบบเต็มเสมอ ให้ปิดใช้การตั้งค่า การตั้งค่า > รายการละเว้น > เพิ่มสคริปต์ของบุคคลที่สามที่รู้จักลงในรายการละเว้นโดยอัตโนมัติ

บันทึกคําขอ XHR และการดึงข้อมูล

เปิดการตั้งค่าคอนโซลและเปิดใช้บันทึก XMLHttpRequest เพื่อบันทึกคําขอ XMLHttpRequest และ Fetch ทั้งหมดลงในคอนโซลขณะที่ดำเนินการ

ข้อความด้านบนในตัวอย่างข้างต้นแสดงลักษณะการทํางานของการจัดกลุ่มเริ่มต้นของ Console ตัวอย่างด้านล่างแสดงลักษณะของบันทึกเดียวกันหลังจากปิดใช้การจัดกลุ่มข้อความ

เก็บข้อความไว้เมื่อมีการโหลดหน้าเว็บ

โดยค่าเริ่มต้น คอนโซลจะล้างข้อมูลทุกครั้งที่คุณโหลดหน้าใหม่ หากต้องการให้ข้อความคงอยู่เมื่อโหลดหน้าเว็บ ให้เปิดการตั้งค่าคอนโซล แล้วเปิดใช้ช่องทําเครื่องหมายเก็บบันทึก

ซ่อนข้อความเครือข่าย

โดยค่าเริ่มต้นเบราว์เซอร์จะบันทึกข้อความเครือข่ายลงในคอนโซล เช่น ข้อความด้านบนในตัวอย่างต่อไปนี้แสดงถึง 404

วิธีซ่อนข้อความเครือข่าย

1. เปิดการตั้งค่าคอนโซล
2. เปิดใช้ช่องทำเครื่องหมายซ่อนเครือข่าย

แสดงหรือซ่อนข้อผิดพลาด CORS

คอนโซลอาจแสดงข้อผิดพลาด CORS หากคําขอเครือข่ายไม่สําเร็จเนื่องจากกลไกการแชร์ทรัพยากรข้ามโดเมน (CORS)

วิธีแสดงหรือซ่อนข้อผิดพลาด CORS

1. เปิดการตั้งค่าคอนโซล
2. เลือกหรือล้างช่องทําเครื่องหมายแสดงข้อผิดพลาด CORS ในคอนโซล

หากตั้งค่าคอนโซลให้แสดงข้อผิดพลาด CORS และพบข้อผิดพลาดดังกล่าว คุณสามารถคลิกปุ่มต่อไปนี้ข้างข้อผิดพลาด

• เพื่อเปิดคําขอที่มี TypeError ที่เกี่ยวข้องกับ CORS ในแผงเครือข่าย
• เพื่อดู