Cách báo cáo lỗi trình duyệt chính xác

Thông báo cho nhà cung cấp trình duyệt về các vấn đề bạn tìm thấy trong trình duyệt là một phần không thể thiếu trong việc cải thiện nền tảng web!

Pete LePage
Robert Nyman

Việc gửi một lỗi tốt không khó nhưng tốn chút công sức. Mục tiêu là giúp bạn dễ dàng tìm ra lỗi, xác định được nguyên nhân gốc và quan trọng nhất là tìm được cách khắc phục. Các lỗi có tiến trình nhanh thường dễ tái hiện với hành vi dự kiến rõ ràng.

Xác minh đó là lỗi

Bước đầu tiên là tìm ra hành vi "đúng" là gì.

Hành vi nào là đúng?

Hãy xem các tài liệu về API liên quan trên MDN hoặc cố gắng tìm các thông số kỹ thuật liên quan. Thông tin này có thể giúp bạn quyết định API nào thực sự bị hỏng, vị trí API đó bị hỏng và hành vi dự kiến là gì.

Tính năng này có hoạt động trên trình duyệt khác không?

Hành vi khác nhau giữa các trình duyệt thường được ưu tiên cao hơn do vấn đề về khả năng tương tác, đặc biệt là khi trình duyệt chứa lỗi đó là trình duyệt kỳ lạ. Hãy thử kiểm thử trên các phiên bản Chrome, Firefox, Safari và Edge mới nhất, có thể bằng một công cụ như BrowserStack.

Nếu có thể, hãy kiểm tra để đảm bảo trang không cố tình hoạt động khác đi do tác nhân người dùng nhận dạng. Trong Công cụ của Chrome cho nhà phát triển, hãy thử đặt chuỗi User-Agent thành một trình duyệt khác.

Nó có bị lỗi trong bản phát hành gần đây không?

Trình duyệt này có hoạt động như mong đợi trước đây nhưng bị lỗi trong bản phát hành trình duyệt gần đây không? " Hồi quy" như vậy có thể được thực hiện nhanh hơn nhiều, đặc biệt là khi bạn cung cấp số phiên bản có hoạt động và một phiên bản không hoạt động. Các công cụ như BrowserStack có thể giúp bạn dễ dàng kiểm tra các phiên bản trình duyệt cũ và công cụ bản dựng chia đôi (dành cho Chromium) hỗ trợ tìm kiếm thay đổi rất hiệu quả.

Nếu một vấn đề là sự hồi quy và có thể tái hiện được, thì nguyên nhân gốc rễ thường có thể nhanh chóng được tìm ra và khắc phục.

Những người khác có đang gặp vấn đề tương tự không?

Nếu bạn gặp vấn đề, thì có khả năng các nhà phát triển khác cũng vậy. Trước tiên, hãy thử tìm lỗi trên Stack Overflow. Cách này có thể giúp bạn chuyển đổi một vấn đề trừu tượng thành một API bị hỏng cụ thể, đồng thời giúp bạn tìm được giải pháp ngắn hạn cho đến khi lỗi được khắc phục.

Vấn đề này từng được báo cáo chưa?

Sau khi bạn biết được lỗi là gì, đã đến lúc kiểm tra xem lỗi đó đã được báo cáo hay chưa bằng cách tìm kiếm trong cơ sở dữ liệu lỗi của trình duyệt.

Nếu bạn tìm thấy lỗi hiện có mô tả sự cố, hãy hỗ trợ bạn bằng cách gắn dấu sao, yêu thích hoặc nhận xét về lỗi đó. Ngoài ra, trên nhiều trang web, bạn có thể tự thêm chính mình vào danh sách CC và nhận thông tin cập nhật khi lỗi thay đổi.

Nếu bạn quyết định nhận xét về lỗi, hãy nêu thông tin về cách lỗi ảnh hưởng đến trang web của bạn. Tránh thêm nhận xét kiểu "+1", vì trình theo dõi lỗi thường gửi email cho mỗi nhận xét.

Báo cáo lỗi

Nếu lỗi chưa từng được báo cáo trước đây, đã đến lúc thông báo cho nhà cung cấp trình duyệt về lỗi đó.

Tạo trường hợp kiểm thử thu nhỏ

Mozilla có một bài viết rất hay về cách tạo trường hợp kiểm thử thu nhỏ. Nói một cách ngắn gọn, mặc dù việc mô tả vấn đề là một khởi đầu tuyệt vời, nhưng không có gì hấp dẫn bằng việc cung cấp bản minh hoạ được liên kết trong lỗi cho thấy vấn đề. Để tối đa hoá cơ hội tiến hành nhanh, ví dụ phải chứa mã tối thiểu cần thiết để minh hoạ vấn đề. Mã mẫu tối thiểu là điều số một bạn có thể làm để tăng khả năng khắc phục lỗi.

Sau đây là một vài mẹo để giảm thiểu trường hợp kiểm thử:

  • Tải trang web xuống, thêm <base href="https://original.url"> và xác minh rằng lỗi tồn tại trên máy. Phương thức này có thể yêu cầu một máy chủ HTTPS đang hoạt động nếu URL sử dụng HTTPS.
  • Kiểm thử các tệp cục bộ trên các bản dựng mới nhất của nhiều trình duyệt nhất có thể.
  • Hãy cố gắng nén mọi thứ vào 1 tệp.
  • Xoá mã (bắt đầu bằng những nội dung bạn biết là không cần thiết) cho đến khi lỗi biến mất.
  • Sử dụng quản lý phiên bản để bạn có thể lưu công việc của mình và hoàn tác mọi lỗi.

Lưu trữ trường hợp kiểm thử rút gọn

Nếu đang tìm một nơi tốt để lưu trữ trường hợp kiểm thử rút gọn, bạn có thể tham khảo một số vị trí tốt sau đây:

Hãy lưu ý rằng một số trang web trong số đó hiển thị nội dung trong iframe, điều này có thể khiến các tính năng hoặc lỗi hoạt động theo cách khác.

Gửi vấn đề của bạn

Sau khi tạo trường hợp kiểm thử thu nhỏ, bạn đã sẵn sàng gửi lỗi đó. Chuyển đến trang web theo dõi lỗi phù hợp, rồi tạo một vấn đề mới.

Cung cấp thông tin mô tả rõ ràng và các bước cần thực hiện để tái hiện vấn đề

Trước tiên, hãy mô tả rõ ràng để giúp các kỹ sư nhanh chóng hiểu được vấn đề là gì và giúp phân loại vấn đề.

When installing a PWA using the `beforeinstallprompt.prompt()`, the
`appinstalled` event fires before the call to `prompt()` resolves.

Tiếp theo, hãy cung cấp các bước chi tiết cần thiết để tái hiện vấn đề. Đây là lúc trường hợp kiểm thử rút gọn của bạn phát huy tác dụng.

What steps will reproduce the problem?
1. Go to https://basic-pwa.glitch.me/, open DevTools and look at the
   console tab.
2. Click the Install button in the page, you might need to interact with
   the page a bit before it becomes enabled.
3. Click Install on the browser modal install confirmation.

Cuối cùng, hãy mô tả kết quả dự kiến và kết quả thực tế.

What is the expected result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)
2. INSTALL: Success (logged when `appinstalled` event fired)

What is the actual result? In the console:
0. INSTALL: Available (logged when `beforeinstallprompt` event fired)
1. INSTALL: Success (logged when `appinstalled` event fired)
2. INSTALL_PROMPT_RESPONSE: {outcome: "accepted", platform: "web"}
   (logged when beforeinstallprompt.prompt()` resolves)

Để biết thêm thông tin, hãy xem bài viết Nguyên tắc viết báo cáo lỗi trên MDN.

Thông tin bổ sung: Thêm ảnh chụp màn hình hoặc bản ghi màn hình về sự cố

Mặc dù không bắt buộc, nhưng trong một số trường hợp, bạn nên thêm một ảnh chụp màn hình hoặc bản ghi màn hình mô tả vấn đề. Điều này đặc biệt hữu ích trong những trường hợp lỗi có thể cần thực hiện một số bước kỳ lạ để tái tạo. Việc có thể xem điều gì xảy ra trong bản ghi màn hình hoặc trên ảnh chụp màn hình thường xuyên có thể hữu ích.

Thêm thông tin chi tiết về môi trường

Một số lỗi chỉ có thể tái tạo trên một số hệ điều hành nhất định hoặc chỉ trên một số loại màn hình cụ thể (ví dụ: dpi thấp hoặc cao dpi). Hãy nhớ cung cấp thông tin chi tiết về mọi môi trường kiểm thử mà bạn đã sử dụng.

Gửi lỗi

Cuối cùng, hãy gửi lỗi. Sau đó, hãy nhớ theo dõi email để xem có phản hồi nào về lỗi đó không. Thông thường, trong quá trình điều tra và khi khắc phục lỗi, các kỹ sư có thể có thêm câu hỏi hoặc nếu họ gặp khó khăn khi tái tạo vấn đề, họ có thể liên hệ với họ.