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.
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 rằng đó là lỗi
Bước đầu tiên là xác định 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?
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ì 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 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 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 thành một trình duyệt khác.
Vấn đề đó có xảy ra 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 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à 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 phải vấn đề tương tự không?
Nếu bạn gặp vấn đề, thì nhiều khả năng 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.
- 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 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 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 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ử 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ỏ. 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ối đa hoá cơ hội tiến trình nhanh, ví dụ phải chứa mã tối thiểu có thể có để chứng minh 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 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. 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ể.
- Hãy thử nén 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 thao tá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.
- Trình duyệt dựa trên Chromium – https://crbug.com/new
- Firefox – https://bugzilla.mozilla.org/
- Safari và các trình duyệt dựa trên WebKit – https://bugs.webkit.org/
Thêm nội dung mô tả và các bước rõ ràng để nhân rộng ra
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à 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ỉ 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 thử nghiệm mà bạn đã sử dụng.
Gửi lỗi
Cuối cùng, hãy gửi lỗi. Hãy theo dõi email của bạn để xem phản hồi về lỗi. 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.