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