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

Mengatasi {i>bug<i} yang baik tidak sulit, tetapi membutuhkan sedikit usaha. Tujuannya adalah untuk membuatnya mudah menemukan yang rusak, mencapai akar masalahnya dan, yang paling penting, menemukan cara untuk memperbaikinya. Bug yang membuat kemajuan cepat cenderung mudah direproduksi dengan perilaku yang diharapkan secara jelas.

Memverifikasi bahwa ini adalah bug

Langkah pertama adalah mencari tahu mana yang "benar" perilaku peserta.

Bagaimana perilaku yang benar?

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

Apakah bisa digunakan di browser lain?

Perilaku yang berbeda di antara {i>browser<i} umumnya diprioritaskan lebih tinggi sebagai interoperabilitas, terutama bila browser yang berisi {i>bug <i}adalah yang aneh. Cobalah untuk menguji pada versi terbaru Chrome, Firefox, Safari, dan Edge, mungkin menggunakan alat seperti BrowserStack.

Jika memungkinkan, periksa apakah halaman tidak sengaja berperilaku berbeda karena penyadapan 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" semacam itu dapat ditindaklanjuti lebih cepat, terutama jika Anda menyediakan nomor versi di mana {i>file<i} bekerja dan versi di mana {i>file<i} itu gagal. Alat seperti BrowserStack dapat memudahkan pemeriksaan versi browser dan alat bit-builds (untuk Chromium) memungkinkan penelusuran perubahan dengan sangat efisien.

Jika suatu masalah adalah regresi dan dapat direproduksi, akar masalahnya biasanya 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. Ini mungkin membantu Anda menerjemahkan masalah abstrak menjadi API rusak tertentu, dan mungkin membantu Anda menemukan solusi jangka pendek hingga {i>bug<i} diperbaiki.

Apakah pernah dilaporkan sebelumnya?

Setelah Anda mengetahui apa itu {i>bug<i}, saatnya untuk memeriksa apakah {i>bug<i} tersebut dilaporkan dengan mencari {i>database bug<i} browser.

Jika Anda menemukan bug yang sudah ada dan menjelaskan masalahnya, tambahkan dukungan dengan memberi bintang, memfavoritkan, atau mengomentari bug. Dan, di banyak situs, Anda dapat menambahkan diri Anda ke daftar CC dan mendapatkan pembaruan ketika {i>bug<i} berubah.

Jika Anda memutuskan untuk mengomentari bug, sertakan informasi tentang bagaimana bug tersebut memengaruhi situs Anda. Hindari menambahkan "+1" gaya komentar, sebagai pelacak {i>bug<i} biasanya mengirim email untuk setiap komentar.

Laporkan bug

Jika bug belum pernah dilaporkan sebelumnya, saatnya memberi tahu vendor browser lebih lanjut.

Membuat kasus pengujian yang diminimalkan

Mozilla memiliki artikel bagus tentang cara membuat kasus pengujian yang diminimalkan. Untuk membuat singkatnya, jika deskripsi masalah adalah awal yang baik, tidak ada yang irama menyediakan demo tertaut dalam bug yang menunjukkan masalah. Untuk memaksimalkan peluang progres cepat, contoh ini harus berisi kode minimum yang diperlukan untuk menunjukkan masalah tersebut. Kode minimal sampel adalah hal pertama yang dapat Anda lakukan untuk meningkatkan peluang {i>bug<i} yang sedang diperbaiki.

Berikut adalah beberapa tips untuk meminimalkan kasus pengujian:

  • Unduh laman web, tambahkan <base href="https://original.url"> dan memverifikasi bahwa {i> bug <i}itu ada secara lokal. Proses ini mungkin memerlukan server HTTPS langsung jika URL menggunakan HTTPS.
  • Uji file lokal di build terbaru dari sebanyak mungkin browser.
  • Cobalah untuk meringkas semuanya menjadi 1 file.
  • Menghapus kode (dimulai dengan hal-hal yang Anda tahu tidak diperlukan) hingga bug akan hilang.
  • Gunakan kontrol versi agar Anda dapat menyimpan pekerjaan dan mengurungkan hal yang belum dikerjakan salah.

Menghosting kasus pengujian yang diminifikasi

Jika Anda mencari tempat yang baik untuk menjadi {i>host<i} kasus pengujian yang diminifikasi, ada beberapa tempat bagus yang tersedia:

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

Mengajukan masalah

Setelah mempunyai 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 para insinyur segera memahami apa masalahnya dan membantu memprioritaskan masalahnya.

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 membantu jika Anda menambahkan {i>screenshot<i}, atau screencast masalah. Hal ini sangat membantu saat {i>bug<i} mungkin memerlukan beberapa langkah ganjil untuk mereproduksi. Dapat melihat apa yang terjadi di {i>Screencast<i}, atau di {i>screenshot<i} sering kali dapat membantu.

Sertakan detail lingkungan

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

Kirim bug

Terakhir, kirimkan bug. Kemudian, ingatlah untuk selalu mengawasi email Anda jika ada terhadap {i>bug<i} tersebut. Biasanya selama penyelidikan dan saat memperbaiki {i>bug<i}, insinyur mungkin memiliki pertanyaan tambahan, atau jika mereka mengalami kesulitan mereproduksi masalah, mereka mungkin akan menghubungi Anda.