เบราว์เซอร์ส่วนใหญ่มีเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในตัว โดยปกติเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เหล่านี้จะมีคอนโซล คอนโซลจะให้ข้อมูลเกี่ยวกับหน้าที่กําลังทํางานอยู่
ข้อความที่บันทึกลงในคอนโซลมาจาก
นักพัฒนาเว็บที่สร้างหน้าเว็บ
หรือมาจากเบราว์เซอร์เอง
ข้อความทั้งหมดในคอนโซลจะมีระดับความรุนแรงดังนี้
Verbose, Info, Warning หรือ Error
Error หมายความว่าหน้าเว็บมีปัญหาที่คุณต้องแก้ไข
สาเหตุที่การตรวจสอบข้อผิดพลาดของเบราว์เซอร์ใน Lighthouse ไม่สำเร็จ
Lighthouse จะแจ้งข้อผิดพลาดของเบราว์เซอร์ทั้งหมดที่บันทึกลงในคอนโซล
วิธีแก้ไขข้อผิดพลาดของเบราว์เซอร์
แก้ไขข้อผิดพลาดของเบราว์เซอร์แต่ละรายการที่ Lighthouse รายงาน เพื่อให้มั่นใจว่าหน้าเว็บทํางานตามที่คาดไว้สําหรับผู้ใช้ทั้งหมด
เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome มีเครื่องมือ 2 อย่าง ที่จะช่วยคุณติดตามหาสาเหตุของข้อผิดพลาด
- ใต้ข้อความของข้อผิดพลาดแต่ละรายการ คอนโซลของเครื่องมือสำหรับนักพัฒนาเว็บจะแสดง สแต็กการเรียก ที่ทำให้โค้ดที่มีปัญหาทำงาน
- ลิงก์ที่ด้านขวาบนของข้อผิดพลาดแต่ละรายการจะแสดงโค้ด ที่ทำให้เกิดข้อผิดพลาด
ตัวอย่างเช่น ภาพหน้าจอนี้แสดงหน้าเว็บที่มีข้อผิดพลาด 2 รายการ
ในตัวอย่างนี้ ข้อผิดพลาดแรกมาจากนักพัฒนาเว็บจากการโทรไปยัง
console.error()
ข้อผิดพลาดที่ 2 มาจากเบราว์เซอร์และ
บ่งชี้ว่าตัวแปรที่ใช้ในสคริปต์ของหน้าเว็บไม่มีอยู่
ใต้ข้อความของข้อผิดพลาดแต่ละรายการ
คอนโซลเครื่องมือสำหรับนักพัฒนาเว็บจะระบุสแต็กการเรียกที่ข้อผิดพลาดปรากฏ
เช่น สำหรับข้อผิดพลาดแรก คอนโซลจะระบุว่าฟังก์ชัน (anonymous) เรียกใช้ฟังก์ชัน init ซึ่งเรียกใช้ฟังก์ชัน doStuff
การคลิกลิงก์ pen.js:9 ที่ด้านขวาบนของข้อผิดพลาดนั้น
จะแสดงโค้ดที่เกี่ยวข้อง
การตรวจสอบโค้ดที่เกี่ยวข้องสำหรับข้อผิดพลาดแต่ละรายการด้วยวิธีนี้จะช่วยให้คุณระบุ และแก้ไขปัญหาที่อาจเกิดขึ้นได้
หากไม่ทราบสาเหตุของข้อผิดพลาด ให้ลองป้อนข้อความแสดงข้อผิดพลาด ลงในเครื่องมือค้นหา หากไม่พบวิธีแก้ปัญหา โปรดถามคำถามใน Stack Overflow
หากแก้ไขข้อผิดพลาดไม่ได้ ให้พิจารณาห่อหุ้มข้อผิดพลาดนั้นในคำสั่ง
try...catch
เพื่อระบุอย่างชัดเจนในโค้ดว่าคุณทราบถึงปัญหาดังกล่าว
นอกจากนี้ คุณยังใช้บล็อก catch เพื่อจัดการข้อผิดพลาดได้อย่างราบรื่นยิ่งขึ้นด้วย