DevTools adalah alat sangat berguna untuk QA web. DevTools mengungkap kejadian sebenarnya di browser di balik layar: request yang dikirim, respons server, kesalahan JavaScript, isi cookie dan storage, penyebab elemen tidak dapat diklik, dan lapisan yang menutupi antarmuka.
Banyak pemula membuka DevTools hanya setelah sesuatu rusak. Itu berguna, tetapi membiarkannya terbuka saat pengujian rutin adalah kebiasaan lebih kuat. Anda melihat sinyal tidak biasa lebih awal dan memulai penyelidikan dengan bukti lebih dari “sepertinya rusak”.
Mengapa DevTools penting bagi QA
Nilai utama DevTools adalah kecepatannya membantu mengidentifikasi lapisan penyebab bug.
Gejala sama, “formulir tidak tersimpan”, dapat berarti hal sangat berbeda:
- →Tombol nonaktif karena keadaan DOM.
- →Event handler tidak dijalankan.
- →Request tidak dikirim.
- →Request dikirim tetapi server mengembalikan kesalahan.
- →Respons berhasil tetapi UI tidak diperbarui.
- →Data tersimpan tetapi halaman menampilkan keadaan lama.
- →Kesalahan muncul di console tetapi tidak terlihat pengguna.
Tanpa DevTools, semuanya tampak seperti defect sama. Dengan DevTools, engineer QA dapat menentukan arah penyelidikan dalam satu menit.
Panel paling berguna untuk QA
Anda tidak perlu menguasai semua bagian DevTools secara sama mendalam. Beberapa panel memberikan manfaat sehari-hari terbesar.
- →Elements: periksa DOM, atribut, class, elemen tersembunyi, keadaan disabled, tata letak, dan style.
- →Network: periksa request, respons, header, payload, waktu, redirect, dan cache.
- →Console: identifikasi kesalahan JavaScript, peringatan, dan masalah runtime.
- →Application: periksa cookie, localStorage, sessionStorage, service worker, dan keadaan aplikasi di browser.
- →Sources: cari kegagalan logika JavaScript, pasang breakpoint, atau periksa source map.
Kumpulan ini saja dapat sangat meningkatkan pengujian web.
Elements: mengapa elemen ada tetapi tidak bekerja
Panel Elements menunjukkan struktur halaman sebenarnya. Ini berguna ketika antarmuka visual menyesatkan.
Gunakan untuk memeriksa:
- →Apakah elemen benar-benar ada di DOM atau hanya tampak seharusnya ada
- →Apakah CSS menyembunyikannya
- →Apakah elemen disabled
- →Apakah lapisan lain menutupinya
- →Apakah elemen berpindah ke luar layar
- →Class dan atribut yang sebenarnya dimiliki
- →Apakah DOM berubah setelah tindakan pengguna
Ini berguna untuk formulir, modal, tooltip, dropdown, tabel, bagian dinamis, serta keadaan loading, error, dan kosong.
Network: menghubungkan UI dengan backend
Jika hanya menguasai satu tab DevTools, hampir selalu pilih Network.
Panel ini menunjukkan:
- →Request yang dikirim
- →URL tujuan
- →Metode yang digunakan
- →Header dan body yang dikirim
- →Status yang dikembalikan
- →Isi respons
- →Durasi request
- →Apakah redirect terjadi
- →Apakah ada panggilan duplikat atau tidak perlu
- →Apakah cache memengaruhi hasil
Network cepat membantu menentukan apakah masalah ada di UI atau backend. Jika request tidak dikirim, penyebab hampir pasti di frontend. Jika server mengembalikan 403 tetapi UI menampilkan “kesalahan tidak diketahui”, penanganan respons bermasalah. Jika dua request dikirim alih-alih satu, selidiki pengiriman ganda, retry, atau render tidak perlu.
Bagi engineer QA, Network menghubungkan tindakan pengguna dengan perilaku teknis sistem sebenarnya.
Console: bug yang tidak terlihat di halaman
Console berguna ketika antarmuka bertindak aneh tanpa menampilkan kesalahan eksplisit kepada pengguna.
- →Tombol dapat diklik tetapi tidak terjadi apa-apa.
- →Sebagian halaman tidak dirender ulang.
- →Modal tidak terbuka.
- →Filter macet.
- →Satu skenario bekerja tetapi skenario lain gagal tak terduga setelah langkah sebelumnya.
Kesalahan JavaScript sering sudah ada di Console saat itu. Ini sangat membantu penyelidikan. Alih-alih “kadang tidak terbuka”, laporan bug dapat menyertakan kesalahan runtime spesifik dan konteksnya.
Bedakan sinyal berguna dari derau. Proyek besar dapat menghasilkan banyak peringatan dan pesan console pihak ketiga. Perhatikan khusus pesan baru yang muncul tepat saat skenario dijalankan.
Application: keadaan pengguna dalam browser
Panel Application penting untuk skenario yang melibatkan:
- →Sesi
- →Otorisasi
- →Remember me
- →Penyimpanan
- →Feature flag
- →Service worker
- →Cache dan perilaku offline
Gunakan untuk memeriksa:
- →Cookie yang benar-benar disetel
- →Isi localStorage dan sessionStorage
- →Apa yang tersisa setelah logout
- →Apakah keadaan lama bertahan antarsesi
- →Apakah service worker memengaruhi perilaku aplikasi
- →Apakah halaman menggunakan cache usang
Banyak bug web yang tampak tak terjelaskan ternyata masalah keadaan klien. Tanpa panel ini, masalah mudah disangka ketidakstabilan acak.
Kebiasaan DevTools yang berguna bagi QA
- →Buka Network sebelum memulai skenario.
- →Bersihkan log dan fokus pada request terkait tindakan saat ini.
- →Bandingkan skenario berhasil dan gagal.
- →Periksa respons dan waktu selain kode status.
- →Periksa Console setelah perilaku UI tidak biasa.
- →Periksa Application saat menyelidiki masalah login, tab, refresh, dan logout.
- →Gunakan Elements ketika tombol ada tetapi tidak bekerja.
Kebiasaan sederhana ini sering cepat meningkatkan kualitas pengujian.
Contoh praktis
Bayangkan bug ini: pengguna mengklik “Bayar”, lalu layar terus berada dalam keadaan loading.
Pemeriksaan DevTools yang berguna:
- →Di Network, periksa apakah request dikirim.
- →Jika dikirim, periksa status, respons, dan waktunya.
- →Di Console, periksa apakah frontend gagal setelah menerima respons.
- →Di Elements, periksa apakah overlay loading memblokir antarmuka secara permanen.
- →Di Application, periksa apakah keadaan sesi rusak atau data yang diperlukan hilang.
Tanpa DevTools, laporan mungkin hanya “kadang macet”. DevTools membantu menentukan apakah penyebabnya timeout backend, kesalahan JavaScript, request ganda, keadaan lama, atau overlay loading rusak.
Hal penting bagi engineer QA
- →DevTools mengungkap perilaku browser sebenarnya bersama hasil visual.
- →Panel QA paling berguna adalah Elements, Network, Console, dan Application.
- →Sebagian besar bug web lebih mudah diisolasi dengan memeriksa DOM, request, kesalahan, dan keadaan browser bersama layar.
- →Buka DevTools saat pengujian rutin maupun saat terjadi kerusakan.
- →Semakin mahir menggunakan DevTools, semakin cepat Anda membedakan masalah frontend dan backend serta menulis laporan bug tepat.
Bacaan lanjutan
- →Dalam basis pengetahuan ini: Cookie, SessionStorage, LocalStorage
- →Dalam basis pengetahuan ini: HTTP dan HTTPS
- →Sumber eksternal: Dokumentasi Chrome DevTools
- →Sumber eksternal: Gambaran umum Chrome DevTools
- →Sumber eksternal: Dokumentasi pengguna Firefox DevTools