Cara melaporkan bug browser yang baik

Memberi tahu vendor browser tentang masalah yang Anda temukan pada browser adalah bagian integral untuk membuat platform web menjadi lebih baik!

Pete LePage
Robert Nyman

Mengatasi {i>bug<i} yang baik tidak sulit, tetapi membutuhkan sedikit usaha. Tujuannya adalah untuk memudahkan 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 diharapkan yang jelas.

Memverifikasi bahwa ini adalah 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 terkait. Informasi ini dapat membantu Anda memutuskan API mana yang benar-benar rusak, lokasi error, dan perilaku yang diharapkan.

Apakah bisa digunakan di browser lain?

Perilaku yang berbeda di antara browser umumnya lebih diprioritaskan sebagai masalah interoperabilitas, terutama jika browser yang berisi bug adalah masalah yang aneh. 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 endus agen pengguna. Di Chrome DevTools, coba setel string User-Agent ke browser lain.

Apakah error dalam rilis terbaru?

Apakah ini bekerja seperti yang diharapkan sebelumnya, namun terputus pada rilis browser baru-baru ini? "Regresi" tersebut dapat ditindaklanjuti lebih cepat, terutama jika Anda memberikan nomor versi tempat kerjanya dan versi tempat terjadinya kegagalan. Alat seperti BrowserStack dapat memudahkan pemeriksaan versi browser lama dan alat bisect-builds (untuk Chromium) memungkinkan penelusuran perubahan dengan sangat efisien.

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

Apakah pernah dilaporkan sebelumnya?

Setelah Anda mengetahui bug, saatnya untuk memeriksa apakah bug telah dilaporkan dengan menelusuri database bug browser.

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

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

Laporkan bug

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

Membuat kasus pengujian yang diminimalkan

Mozilla memiliki artikel bagus tentang cara membuat kasus pengujian yang diminimalkan. Singkatnya, meskipun deskripsi masalahnya adalah awal yang baik, tidak ada yang mengalahkan demo tertaut dalam bug yang menunjukkan masalah. Untuk memaksimalkan peluang progres yang cepat, contoh harus berisi kode minimum yang diperlukan untuk mendemonstrasikan masalah. Contoh kode minimal adalah hal pertama yang dapat Anda lakukan untuk meningkatkan kemungkinan bug Anda diperbaiki.

Berikut adalah 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.
  • Cobalah untuk meringkas semuanya menjadi 1 file.
  • Hapus kode (dimulai dengan hal-hal yang Anda tahu tidak diperlukan) sampai bug hilang.
  • Gunakan kontrol versi agar Anda dapat menyimpan pekerjaan dan mengurungkan 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 untuk melaporkan bug tersebut. Buka situs pelacakan bug yang tepat, dan buat masalah baru.

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

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.

Berikutnya, berikan langkah-langkah mendetail yang diperlukan untuk mereproduksi masalah. Di sinilah kasus pengujian yang diminifikasi 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, 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, dalam beberapa kasus, akan lebih baik jika Anda menambahkan screenshot atau screencast masalah tersebut. Hal ini sangat berguna jika bug mungkin memerlukan beberapa langkah aneh untuk mereproduksi bug. Dapat melihat peristiwa yang terjadi di Screencast, atau screenshot sering kali akan sangat membantu.

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 apa pun yang Anda gunakan.

Kirim bug

Terakhir, kirimkan bug. Kemudian, ingatlah untuk selalu memeriksa email jika ada tanggapan terhadap {i>bug<i}. Biasanya selama penyelidikan dan saat memperbaiki bug, engineer mungkin memiliki pertanyaan tambahan, atau jika kesulitan mereproduksi masalah, mereka dapat menghubungi.