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 gặp phải 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

Báo cáo một lỗi tốt không khó, nhưng sẽ mất một chút công sức. Mục tiêu là làm cho dễ dàng tìm ra những hỏng hóc, tìm được nguyên nhân gốc và quan trọng nhất là tìm được cách khắc phục. Những lỗi giúp tiến trình nhanh có xu hướng dễ tái tạo bằng hành vi được mong đợi rõ ràng.

Xác minh rằng đó là lỗi

Bước đầu tiên là tìm ra "chính xác" .

Đâu là hành vi chính xác?

Xem tài liệu API có liên quan trên MDN hoặc thử tìm thông số kỹ thuật có 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, lỗi ở đâu 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 hơn là vấn đề về khả năng tương tác, đặc biệt là khi trình duyệt có chứa lỗi là một trong số đó. Thử thử nghiệm trên các phiên bản mới nhất của Chrome, Firefox, Safari và Edge, có thể 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 đi do phát hiện tác nhân 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.

Sản phẩm đó có lỗi trong 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 nhưng gặp lỗi trong bản phát hành trình duyệt gần đây không? "Sự hồi quy" như vậy có thể được xử lý nhanh hơn nhiều, đặc biệt là khi bạn cung cấp số phiên bản hoạt động và phiên bản hoạt động không thành công. Các công cụ như BrowserStack có thể dễ dàng kiểm tra phiên bản cũ các phiên bản trình duyệt và công cụ bản dựng chia đôi (đối với Chromium) cho phép 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ể được tái hiện, thì nguyên nhân gốc rễ thường là được tìm thấy và khắc phục một cách nhanh chóng.

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

Nếu bạn đang gặp sự cố, 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 kiếm lỗi trên Stack Overflow. Cách này có thể giúp bạn chuyển một vấn đề trừu tượng thành một API cụ thể bị hỏng, có thể giúp bạn tìm ra một giải pháp ngắn hạn cho đến khi lỗi được khắc phục.

Hành vi này từng bị báo cáo chưa?

Sau khi bạn biết lỗi là gì, đã đến lúc kiểm tra xem lỗi đó đã được báo cáo 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ả vấn đề, hãy thêm nhóm hỗ trợ của bạn bằng cách gắn dấu sao, yêu thích hoặc nhận xét về lỗi. Và 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 nhận xét về lỗi, hãy cung cấp thông tin về cách lỗi đó ảnh hưởng đến trang web của bạn. Tránh thêm "+1" ghi chú kiểu, làm công cụ 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 đượ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ề ứng dụng đó.

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

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

Dưới đây là một vài mẹo giúp 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 này tồn tại trên máy. Có thể bạn cần phải có máy chủ HTTPS đang hoạt động nếu URL sử dụng HTTPS.
  • Hãy 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 thông tin bạn biết là không cần thiết) cho đến khi lỗi xảy ra biến mất.
  • Sử dụng chức năng quản lý phiên bản để bạn có thể lưu công việc của mình và huỷ mọi thao tác không chính xác.

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

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

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

Đang gửi vấn đề của bạn

Sau khi nhận được trường hợp kiểm thử thu nhỏ, bạn đã sẵn sàng báo cáo lỗi đó. Truy cập đúng trang web theo dõi lỗi và báo cáo một vấn đề mới.

Cung cấp nội dung 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 cung cấp nội dung 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 sự cố.

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

Bật mí thêm cho bạn: 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 trong một số trường hợp, 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 trong trường hợp lỗi có thể cần một số bước kỳ lạ để tái hiện. Việc có thể thấy điều gì xảy ra trong bản ghi màn hình hoặc ảnh chụp màn hình có thể thường hữu ích.

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

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

Gửi lỗi

Cuối cùng, hãy gửi lỗi. Sau đó, hãy nhớ để ý email để biết các phản hồi cho lỗi. Thông thường, trong quá trình điều tra và khi sửa 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 tái hiện vấn đề, họ có thể liên hệ.