Việ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!
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à giúp bạn dễ dàng tìm ra những sự cố, phát hiện được nguyên nhân gốc rễ và quan trọng nhất là tìm ra cách khắc phục. Các lỗi có tiến trình nhanh thường dễ tái tạo với một hành vi dự kiến rõ ràng.
Xác minh rằng đó là lỗi
Bước đầu tiên là chỉ ra hành vi "chính xác".
Đâu là hành vi chính xác?
Hãy kiểm tra các tài liệu 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ị lỗi, 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?
Thường thì hành vi khác nhau giữa các trình duyệt thường được ưu tiên hơn vì 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 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 theo cách khác do tác nhân người dùng đánh cắp. 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.
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? Các quá trình "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 hoạt động và một phiên bản bị lỗi. Các công cụ như BrowserStack có thể 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 (đố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 tạo, thì nguyên nhân gốc rễ thường được tìm ra và khắc phục 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. Điều này có thể giúp bạn chuyển 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 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?
Khi bạn hiểu đượ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.
- Trình duyệt dựa trên Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/
- Trình duyệt dựa trên Safari và WebKit: https://bugs.webkit.org/
Nếu bạn tìm thấy lỗi hiện có mô tả vấn đề đó, hãy hỗ trợ bằng cách gắn dấu sao, yêu thích hoặc nhận xét về lỗi đó. Đồng thời, 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 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 nhận xét kiểu "+1", vì 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 chưa từng báo cáo lỗi, đã đến lúc thông báo cho nhà cung cấp trình duyệt về lỗi đó.
Tạo một 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 một trường hợp kiểm thử ở dạng thu nhỏ. Để 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, nhưng không có gì cản trở việc cung cấp một bản minh hoạ được liên kết trong lỗi chỉ ra vấn đề. Để tối đa hoá cơ hội tiến triển nhanh, ví dụ phải chứa mã tối thiểu có thể có để chứng minh vấn đề. Mã mẫu tối thiểu là việc đầu tiên bạn có thể làm để tăng tỷ lệ lỗi đượ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 tồn tại trên máy. Bạn có thể cần phải có một 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 thử 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 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ỷ các lỗi xảy ra.
Lưu trữ trường hợp kiểm thử rút gọn
Nếu đang tìm một nơi thích hợp để lưu trữ trường hợp kiểm thử rút gọn, bạn có thể tham khảo một số nền tảng phù hợp như sau:
Xin lưu ý rằng một số trang web đó 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.
Đ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.
- Trình duyệt dựa trên Chromium – https://crbug.com/new
- Firefox – https://bugzilla.mozilla.org/
- Trình duyệt dựa trên Safari và WebKit – https://bugs.webkit.org/
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 đề đang gặp phải và giúp xử lý 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 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 những trường hợp mà lỗi có thể yêu cầu một số bước kỳ lạ để tái tạo. Việc có thể thấy được điều gì xảy ra trong bản ghi màn hình hoặc ảnh chụp màn hình thường sẽ 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 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. Sau đó, hãy nhớ theo dõi email để biết mọi phản hồi cho lỗi. 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 gặp khó khăn trong quá trình tái tạo vấn đề, họ có thể liên hệ với họ.