Hầu hết các trình duyệt đều có sẵn công cụ dành cho nhà phát triển. Các công cụ dành cho nhà phát triển này thường bao gồm một bảng điều khiển. Bảng điều khiển cung cấp cho bạn thông tin về trang hiện đang chạy.
Các thông báo được ghi lại trong bảng điều khiển là của nhà phát triển web đã tạo trang hoặc của chính trình duyệt.
Tất cả thông báo trên bảng điều khiển đều có một mức độ nghiêm trọng: Verbose, Info, Warning hoặc Error.
Thông báo Error có nghĩa là trang của bạn đang gặp vấn đề mà bạn cần giải quyết.
Cách kiểm tra lỗi trình duyệt Lighthouse không thành công
Lighthouse gắn cờ tất cả các lỗi của trình duyệt được ghi vào bảng điều khiển:
Cách khắc phục lỗi trình duyệt
Khắc phục từng lỗi trình duyệt mà Lighthouse báo cáo để đảm bảo trang của bạn chạy như mong đợi đối với tất cả người dùng.
Chrome DevTools có một số công cụ giúp bạn tìm ra nguyên nhân gây ra lỗi:
- Bên dưới văn bản của mỗi lỗi, Bảng điều khiển Công cụ cho nhà phát triển sẽ cho thấy ngăn xếp lệnh gọi đã khiến mã có vấn đề thực thi.
- Đường liên kết ở trên cùng bên phải của mỗi lỗi cho biết mã gây ra lỗi.
Ví dụ: ảnh chụp màn hình này cho thấy một trang có 2 lỗi:
Trong ví dụ này, lỗi đầu tiên đến từ một nhà phát triển web từ một lệnh gọi đến console.error().
Lỗi thứ hai xuất phát từ trình duyệt và cho biết rằng một biến được dùng trong một trong các tập lệnh của trang không tồn tại.
Bên dưới văn bản của mỗi lỗi, Bảng điều khiển Công cụ cho nhà phát triển sẽ cho biết ngăn xếp lệnh gọi mà lỗi xuất hiện.
Ví dụ: đối với lỗi đầu tiên, Console cho biết hàm (anonymous) đã gọi hàm init, hàm này đã gọi hàm doStuff.
Khi nhấp vào đường liên kết pen.js:9 ở trên cùng bên phải của lỗi đó, bạn sẽ thấy mã có liên quan.
Bằng cách xem xét mã có liên quan cho từng lỗi theo cách này, bạn có thể xác định và giải quyết các vấn đề có thể xảy ra.
Nếu bạn không thể tìm ra nguyên nhân gây ra lỗi, hãy thử nhập nội dung lỗi vào một công cụ tìm kiếm. Nếu không tìm được giải pháp cho vấn đề của mình, hãy thử đặt câu hỏi trên Stack Overflow.
Nếu không thể khắc phục lỗi, hãy cân nhắc việc gói lỗi đó trong một câu lệnh try...catch để cho biết rõ ràng trong mã rằng bạn đã biết về vấn đề này.
Bạn cũng có thể dùng khối catch để xử lý lỗi một cách hiệu quả hơn.