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