Cara melaporkan bug browser yang baik

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

Pete LePage
Robert Nyman

Melaporkan bug yang bagus, tetapi memerlukan sedikit pekerjaan. Tujuan Anda adalah memudahkan engineer browser untuk menemukan masalah, menemukan akar masalah, dan yang terpenting, menemukan cara untuk memperbaikinya. Bug yang membuat progres cepat cenderung cepat direproduksi dengan perilaku yang diharapkan dengan jelas.

Memverifikasi bahwa ini adalah bug

Langkah pertama adalah mencari tahu bagaimana seharusnya 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 benar-benar rusak, di mana kerusakannya, dan perilaku yang diharapkan.

Apakah berfungsi di browser lain?

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

Jika memungkinkan, periksa apakah halaman tidak sengaja berperilaku berbeda karena sniff agen pengguna. Di Chrome DevTools, coba setel string User-Agent ke browser lain.

Apakah error terjadi dalam rilis terbaru?

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

Jika masalah merupakan 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 mengalaminya. Pertama, coba telusuri bug di Stack Overflow. Hal ini dapat membantu Anda menerjemahkan masalah abstrak menjadi API tertentu yang rusak, dan dapat membantu Anda menemukan solusi jangka pendek hingga bug diperbaiki.

Apakah pernah dilaporkan sebelumnya?

Setelah Anda mengetahui bug yang dimaksud, saatnya memeriksa apakah bug tersebut telah dilaporkan dengan menelusuri database bug browser.

Jika Anda menemukan bug yang 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 ke daftar CC dan mendapatkan info terbaru saat bug berubah.

Jika Anda memutuskan untuk mengomentari bug, sertakan informasi tentang pengaruh bug tersebut terhadap 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 memberi tahu vendor browser tentang bug tersebut.

Membuat kasus pengujian yang diperkecil

Mozilla memiliki artikel bagus tentang cara membuat kasus pengujian yang diminimalkan. Singkatnya, walaupun deskripsi masalah adalah awal yang bagus, tidak ada yang lebih baik daripada memberikan demo tertaut 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 pertama yang dapat Anda lakukan untuk meningkatkan kemungkinan bug Anda diperbaiki.

Berikut beberapa tips untuk meminimalkan kasus pengujian:

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

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

Melaporkan masalah

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

Tambahkan deskripsi dan langkah-langkah yang jelas untuk mereplikasi

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

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 merekonstruksi masalah. Di sinilah kasus pengujian yang diminifikasi Anda berperan.

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.

Terakhir, deskripsikan 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 informasi selengkapnya, lihat Pedoman penulisan laporan bug di MDN.

Bonus: Tambahkan screenshot atau screencast masalah

Meskipun tidak wajib, sebaiknya tambahkan screenshot atau screencast masalah tersebut. Hal ini sangat membantu ketika 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.

Menyertakan detail lingkungan

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

Mengirim bug

Terakhir, kirimkan bug. Perhatikan email Anda untuk melihat respons terkait bug. Biasanya selama investigasi, engineer mungkin memiliki pertanyaan tambahan. Jika mengalami kesulitan mereproduksi masalah, mereka dapat menghubungi Anda.