Cara melaporkan bug browser yang baik

Memberi tahu vendor browser tentang masalah yang Anda temukan di browser mereka adalah bagian integral dalam membuat platform web menjadi lebih baik.

Pete LePage
Robert Nyman

Melaporkan bug yang baik, tetapi memerlukan sedikit usaha. Tujuan Anda adalah memudahkan engineer browser menemukan bagian yang rusak, mencapai akar masalah, dan yang terpenting, menemukan cara untuk memperbaikinya. Bug yang cepat ditangani cenderung cepat direproduksi dengan perilaku yang diharapkan yang jelas.

Memverifikasi bahwa masalah tersebut adalah bug

Langkah pertama adalah mencari tahu perilaku yang "benar".

Apa perilaku yang benar?

Periksa dokumen API yang relevan di MDN, atau coba temukan spesifikasi terkait. Informasi ini dapat membantu Anda memutuskan API mana yang sebenarnya rusak, di mana kerusakannya, dan apa perilaku yang diharapkan.

Apakah fitur ini berfungsi di browser lain?

Perilaku yang berbeda antar-browser umumnya diprioritaskan lebih tinggi sebagai masalah interoperabilitas, terutama jika browser yang berisi bug adalah yang paling berbeda. Coba uji di versi terbaru Chrome, Firefox, Safari, dan Edge, mungkin menggunakan alat seperti BrowserStack.

Jika memungkinkan, pastikan halaman tidak sengaja berperilaku berbeda karena sniffing agen pengguna. Di Chrome DevTools, coba tetapkan string User-Agent ke browser lain.

Apakah fitur ini rusak dalam rilis terbaru?

Apakah fitur ini berfungsi seperti yang diharapkan sebelumnya, tetapi tidak berfungsi dalam rilis browser terbaru? Regresi tersebut dapat ditindaklanjuti dengan lebih cepat, terutama jika Anda memberikan nomor versi yang berfungsi dan versi yang gagal. Anda dapat menggunakan alat seperti BrowserStack untuk memeriksa versi browser lama. Gunakan alat seperti alat bisect-builds (untuk Chromium) untuk menelusuri perubahan.

Jika masalahnya adalah regresi dan dapat direproduksi, penyebab utamanya biasanya dapat ditemukan dan diperbaiki dengan cepat.

Apakah orang lain mengalami masalah yang sama?

Jika Anda mengalami masalah, kemungkinan besar developer lain juga mengalaminya. Pertama, coba telusuri bug di Stack Overflow. Hal ini dapat membantu Anda menerjemahkan masalah abstrak menjadi API rusak tertentu, dan dapat membantu Anda menemukan solusi jangka pendek hingga bug diperbaiki.

Apakah masalah ini pernah dilaporkan sebelumnya?

Setelah Anda mengetahui bug-nya, saatnya memeriksa apakah bug tersebut sudah dilaporkan dengan menelusuri database bug browser.

Jika Anda menemukan bug yang sudah ada yang menjelaskan masalah tersebut, tambahkan dukungan Anda dengan memberi bintang, memfavoritkan, atau mengomentari bug tersebut. Selain itu, di banyak situs, Anda dapat menambahkan diri Anda ke daftar CC dan mendapatkan info terbaru saat bug berubah.

Jika Anda memutuskan untuk mengomentari bug, sertakan informasi tentang pengaruh bug terhadap situs Anda. Hindari menambahkan komentar bergaya "+1", karena pelacak bug biasanya mengirim email untuk setiap komentar.

Melaporkan bug

Jika bug belum pernah dilaporkan sebelumnya, saatnya memberi tahu vendor browser tentang hal itu.

Membuat kasus pengujian yang diminimalkan

Mozilla memiliki artikel bagus tentang cara membuat kasus pengujian yang diminimalkan. Singkat cerita, meskipun deskripsi masalah adalah awal yang baik, tidak ada yang lebih baik daripada memberikan demo tertaut dalam bug yang menunjukkan masalah tersebut. Untuk memaksimalkan peluang progres yang cepat, contoh harus berisi kode minimum yang diperlukan untuk menunjukkan masalah. Contoh kode minimal adalah hal nomor satu yang dapat Anda lakukan untuk meningkatkan peluang bug Anda diperbaiki.

Berikut beberapa tips untuk meminimalkan kasus pengujian:

  • Download halaman web, tambahkan <base href="https://original.url">, dan pastikan bug ada secara lokal. Hal ini mungkin memerlukan server HTTPS aktif jika URL menggunakan HTTPS.
  • Uji file lokal pada build terbaru dari sebanyak mungkin browser.
  • Coba ringkas semuanya menjadi 1 file.
  • Hapus kode (dimulai dengan hal-hal yang Anda tahu tidak diperlukan) hingga bug hilang.
  • Gunakan kontrol versi agar Anda dapat menyimpan pekerjaan dan mengurungkan hal-hal yang salah.

Menghosting kasus pengujian yang diminifikasi

Jika Anda mencari tempat yang bagus untuk menghosting kasus pengujian yang telah diminifikasi, ada beberapa tempat yang bagus:

Perlu diketahui bahwa beberapa situs tersebut menampilkan konten dalam iframe, yang dapat menyebabkan fitur atau bug berperilaku berbeda.

Laporkan masalah Anda

Setelah memiliki kasus pengujian yang diperkecil, Anda siap untuk melaporkan bug tersebut. Buka situs pelacakan bug yang tepat, dan buat laporan masalah baru.

Tambahkan deskripsi dan langkah-langkah yang jelas untuk mereplikasi

Pertama, berikan deskripsi yang jelas untuk membantu engineer memahami dengan cepat apa masalahnya dan membantu melakukan triase masalah.

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

Selanjutnya, berikan langkah-langkah mendetail yang diperlukan untuk mereproduksi masalah dan jelaskan hasil yang diharapkan dan sebenarnya.

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)

Untuk mengetahui informasi selengkapnya, lihat Panduan penulisan laporan bug di MDN.

Bonus: Tambahkan screenshot atau screencast masalah

Meskipun tidak wajib, sebaiknya tambahkan screenshot atau screencast masalah. Hal ini sangat membantu saat bug terjadi setelah beberapa langkah atau aktivitas yang tidak biasa. Screencast dan screenshot sering kali dapat menunjukkan dengan lebih baik apa yang terjadi kepada engineer browser.

Sertakan detail lingkungan

Beberapa bug hanya dapat direproduksi pada sistem operasi tertentu, atau hanya pada jenis layar tertentu (misalnya, DPI rendah atau DPI tinggi). Pastikan untuk menyertakan detail lingkungan pengujian yang Anda gunakan.

Mengirimkan bug

Terakhir, kirimkan bug. Pantau terus email Anda untuk mendapatkan respons terkait bug. Biasanya selama penyelidikan, engineer mungkin memiliki pertanyaan tambahan. Jika mengalami kesulitan dalam mereproduksi masalah, mereka mungkin akan menghubungi Anda.