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!

Mendaftarkan {i>bug<i} yang baik tidaklah sulit, tetapi membutuhkan sedikit usaha. Tujuannya adalah memudahkan Anda menemukan apa yang rusak, mencapai akar masalahnya, dan, yang paling penting, menemukan cara untuk memperbaikinya. Bug yang membuat progres cepat cenderung mudah direproduksi dengan perilaku yang jelas dan diharapkan.

Verifikasi apakah ada bug

Langkah pertama adalah mencari tahu bagaimana seharusnya perilaku yang "benar".

Bagaimana perilaku yang benar?

Periksa dokumen API yang relevan di MDN, atau coba temukan spesifikasi yang terkait. Informasi ini dapat membantu Anda menentukan API mana yang benar-benar rusak, tempat kerusakannya, dan perilaku yang diharapkan.

Apakah berfungsi di browser lain?

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

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

Apakah ada error dalam rilis terbaru?

Apakah sebelumnya berfungsi seperti yang diharapkan, namun tidak berfungsi dalam rilis browser terbaru? "Regresi" tersebut dapat ditindaklanjuti jauh lebih cepat, terutama jika Anda memberikan nomor versi tempatnya berfungsi dan versi yang gagal. Alat seperti BrowserStack dapat memudahkan pemeriksaan versi browser lama dan alat bisect-builds (untuk Chromium) memungkinkan penelusuran perubahan dengan sangat efisien.

Jika masalah berupa regresi dan dapat direproduksi, akar masalahnya biasanya dapat ditemukan dan diperbaiki dengan cepat.

Apakah orang lain melihat masalah yang sama?

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

Apakah ini pernah dilaporkan sebelumnya?

Setelah mengetahui apa saja bug-nya, saatnya memeriksa apakah bug tersebut telah dilaporkan dengan menelusuri database bug browser.

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

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

Laporkan bug

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

Membuat kasus pengujian yang diminimalkan

Mozilla memiliki artikel bagus tentang cara membuat kasus pengujian yang diminimalkan. Ringkasnya, meskipun deskripsi masalah merupakan awal yang baik, tidak ada yang lebih baik dari menyediakan demo yang ditautkan dalam bug yang menunjukkan masalah. 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 memperbaiki bug.

Berikut adalah beberapa tips untuk meminimalkan kasus pengujian:

  • Download halaman web, tambahkan <base href="https://original.url"> dan verifikasi bahwa bug ada secara lokal. Tindakan ini mungkin memerlukan server HTTPS live jika URL menggunakan HTTPS.
  • Uji file lokal di build terbaru dari sebanyak mungkin browser.
  • Coba ringkas semuanya menjadi 1 file.
  • Hapus kode (dimulai dari hal-hal yang Anda ketahui 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 baik untuk menghosting kasus pengujian yang diminifikasi, ada beberapa tempat bagus yang tersedia:

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

Mengajukan masalah

Setelah mendapatkan kasus pengujian yang diminimalkan, Anda siap melaporkan bug tersebut. Buka situs pelacakan bug yang tepat, dan buat masalah baru.

Berikan deskripsi yang jelas dan langkah-langkah yang diperlukan untuk mereproduksi masalah

Pertama, berikan deskripsi yang jelas untuk membantu engineer memahami masalahnya dengan cepat dan membantu menentukan prioritas masalah tersebut.

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

Berikutnya, berikan langkah-langkah mendetail yang diperlukan untuk merekonstruksi masalah. Di sinilah kasus pengujian yang diminifikasi akan muncul.

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.

Dan terakhir, jelaskan hasil yang diharapkan dan yang 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, dalam beberapa kasus, ada baiknya Anda menambahkan screenshot atau screencast masalah tersebut. Hal ini sangat membantu jika bug memerlukan beberapa langkah ganjil untuk bereproduksi. Dapat melihat apa yang terjadi di screencast atau screenshot biasanya akan sangat membantu.

Sertakan detail lingkungan

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

Kirim bug

Terakhir, kirimkan bug. Kemudian, jangan lupa untuk memantau email Anda jika ada tanggapan terhadap bug tersebut. Biasanya selama penyelidikan dan saat memperbaiki bug, engineer mungkin memiliki pertanyaan tambahan, atau jika kesulitan mereproduksi masalah, mereka dapat menghubungi Anda.