Memberi tahu vendor browser tentang masalah yang Anda temukan di browser mereka adalah bagian integral dari upaya untuk membuat platform web menjadi lebih baik.
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 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 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 tetapkan 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 masalahnya adalah regresi dan dapat direproduksi, akar masalahnya 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 tertentu yang rusak, dan dapat membantu Anda menemukan solusi jangka pendek hingga bug diperbaiki.
Apakah masalah ini pernah dilaporkan sebelumnya?
Setelah Anda mengetahui bug yang dimaksud, saatnya memeriksa apakah bug tersebut telah dilaporkan dengan menelusuri database bug browser.
- Browser berbasis Chromium: https://crbug.com
- Firefox: https://bugzilla.mozilla.org/
- Safari & browser berbasis WebKit: https://bugs.webkit.org/
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.
Melaporkan 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 minimum adalah hal nomor satu yang dapat Anda lakukan untuk meningkatkan peluang perbaikan bug.
Berikut beberapa tips untuk meminimalkan kasus pengujian:
- Download halaman web, tambahkan
<base href="https://original.url">
, dan verifikasi bahwa 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 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.
- Browser berbasis Chromium - https://crbug.com/new
- Firefox - https://bugzilla.mozilla.org/
- Safari & browser berbasis WebKit - https://bugs.webkit.org/
Tambahkan deskripsi dan langkah-langkah yang jelas untuk mereplikasi
Pertama, berikan deskripsi yang jelas untuk membantu engineer dengan cepat memahami masalahnya dan membantu menentukan prioritas 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 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 berguna 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.
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, kirim bug. Periksa email Anda untuk melihat respons terkait bug. Biasanya selama investigasi, engineer mungkin memiliki pertanyaan tambahan. Jika mereka kesulitan merekonstruksi masalah, mereka mungkin akan menghubungi Anda.