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

Việc thông báo cho nhà cung cấp trình duyệt về các vấn đề bạn phát hiện trong trình duyệt của họ là một phần không thể thiếu để cải thiện nền tảng web.

Pete LePage
Robert Nyman

Việc gửi lỗi tốt nhưng cần một chút công sức. Mục tiêu của bạn phải là giúp các kỹ sư trình duyệt dễ dàng tìm thấy lỗi, tìm ra nguyên nhân gốc rễ và quan trọng nhất là tìm cách khắc phục lỗi. 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 hiểu hành vi "chính xác".

Hành vi chính xác là gì?

Hãy kiểm tra tài liệu API liên quan trên MDN hoặc cố gắng tìm 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ị lỗi, vị trí bị lỗi và hành vi dự kiến.

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 vì là 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 duy nhất có vấn đề. Hãy thử kiểm thử trên các phiên bản mới nhất của Chrome, Firefox, Safari và Edge, có thể sử dụng một công cụ như BrowserStack.

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

Liệu lỗi này có xảy ra trong một bản phát hành gần đây không?

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

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

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

Nếu bạn gặp vấn đề, thì rất có thể các nhà phát triển khác cũng gặp phải vấn đề tương tự. Trước tiên, hãy thử tìm lỗi trên Stack Overflow. Điều 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 có thể giúp bạn tìm ra giải pháp tạm thời cho đến khi lỗi được khắc phục.

Liệu 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ó được báo cáo hay chưa bằng cách tìm kiếm trong cơ sở dữ liệu lỗi trình duyệt.

Nếu bạn tìm thấy một lỗi hiện có mô tả vấn đề, hãy thể hiện sự ủng hộ của bạn bằng cách gắn dấu sao, đánh dấu yêu thích hoặc bình luận về lỗi đó. Ngoài ra, trên nhiều trang web, bạn có thể tự thêm 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 bình luận về lỗi, hãy cung cấp thông tin về mức độ ảnh hưởng của lỗi đó đến trang web của bạn. Tránh thêm bình luận kiểu "+1", vì trình theo dõi lỗi thường gửi email cho mọi bình luận.

Báo cáo lỗi

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

Tạo một trường hợp kiểm thử được rút gọn

Mozilla có một bài viết tuyệt vời về cách tạo một trường hợp kiểm thử được rút gọn. Tóm lại, mặc dù nội dung mô tả vấn đề là một cách hay để bắt đầu, nhưng không gì 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ăng tối đa cơ hội tiến bộ nhanh, ví dụ phải chứa mã tối thiểu có thể cần thiết để minh hoạ vấn đề. Mẫu mã tối thiểu là việc đầu tiên bạn có thể làm để tăng khả năng lỗi được khắc phục.

Dưới đây là một số 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. Việc này có thể yêu cầu máy chủ HTTPS đang hoạt động nếu URL sử dụng HTTPS.
  • Kiểm thử 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ể.
  • Cố gắng cô đọng mọi thứ vào 1 tệp.
  • Xoá mã (bắt đầu bằng những thứ bạn biết là không cần thiết) cho đến khi lỗi biến mất.
  • Sử dụng tính năng kiểm soát phiên bản để bạn có thể lưu công việc và huỷ những việc không thành công.

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

Nếu bạn đang tìm một nơi phù hợp để lưu trữ trường hợp kiểm thử rút gọn, có một số nơi phù hợp:

Xin lưu ý rằng một số trang web trong số đó hiển thị nội dung trong một 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 đề

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

Thêm nội dung mô tả và các bước rõ ràng để tái hiện vấn đề

Trước tiên, hãy cung cấp nội dung mô tả rõ ràng để giúp các kỹ sư nhanh chóng nắm được vấn đề 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à nơi trường hợp kiểm thử rút gọn của bạn xuất hiện.

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à 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 Nguyên tắc viết báo cáo lỗi trên MDN.

Phần thưởng: Thêm ảnh chụp màn hình hoặc bản ghi màn hình về vấn đề

Mặc dù không bắt buộc, nhưng bạn nên thêm ảnh chụp màn hình hoặc bản ghi màn hình về vấn đề. Điều này đặc biệt hữu ích khi lỗi xảy ra sau một số bước hoặc hoạt động bất thường. Video ghi lại màn hình và ảnh chụp màn hình thường có thể minh hoạ rõ hơn những gì đã xảy ra cho các kỹ sư trình duyệt.

Bao gồ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 DPI cao). 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. Hãy chú ý đến email của bạn để biết phản hồi về lỗi này. Thông thường, trong quá trình điều tra, các kỹ sư có thể sẽ có thêm câu hỏi. Nếu gặp khó khăn khi tái hiện vấn đề, họ có thể liên hệ với bạn.