Melakukan inspect element rata-rata hanya dapat dilakukan pada perangkat komputer. Namun tahukah kamu bahwa sebenarnya fitur tersebut juga tersedia di ponsel Android? Walau saat ini browser populer seperti Chrome dan Firefox tidak memiliki fitur tersebut, akan tetapi browser lainnya sudah ada yang lebih dulu menerapkannya.
Fitur inspect element sebenarnya lebih diperuntungkan bagi para developer dalam hal debugging pada suatu website yang sedang dikelola. Misalnya mengetahui tujuan request XHR, kesalahan javascript melalui console, dan sebagainya.
Saat ini hanya ada satu browser saja yang menyediakan fitur tersebut, yaitu Kiwi Browser. Itu merupakan peramban berbasis Chromium yang memiliki fitur yang nyaris sama seperti di komputer. Salah satu fitur yang paling populer pada browser tersebut adalah pemasangan ekstensi.
Cara Mengakses Inspect Element di Browser Android
Pertama-tama silakan unduh terlebih dahulu Kiwi Browser melalui Play Store. Dan jika sudah terpasang, silakan ikuti langkah dibawah ini untuk mengakses fitur inspect element.
- Buka Kiwi Browser.
- Silakan akses website tujuan.
-
Kemudian ketuk opsi Menu (titik tiga).
-
Lalu pilih pada menu Developer tools.
-
Selesai, kini fitur inspect element akan tampil pada tab baru.
Tentunya fiturnya sama persis seperti yang ada di komputer, dan segala request dapat terekam dengan baik, dan bahkan kamu juga bisa menggunakan kode javascript melalui console. Segala perubahan pada bagian inspect element akan langsung diterapkan secara otomatis.
Baca juga: 3 Cara Melihat Source Code Halaman Website
Beberapa Kegunaan dari Fitur Inspect Element di Browser
Walau kamu mungkin sudah tahu jika kegunaan satu-satunya adalah sebagai tujuan debugging. Tapi secara rinci ada beberapa hal yang mungkin kamu perlukan untuk dipahami lebih jauh ketika menggunakan fitur ini. Dan berikut ini beberapa kegunaanya.
1. Menerapkan Kode Secara Realtime
Segala kode HTML yang kamu ubah akan langsung diterapkan secara realtime. Baik itu HTML atau Javascript. Namun untuk kode Javascript hanya bisa menggunakan fitur console untuk menerapkannya, sedangkan kode HTML atau CSS dapat langsung diubah dari inspect element.
2. Merekam dan Mengulangi Payload dan Respose XHR (Ajax)
Segala proses panggilan ajax yang tercipta dari javascript dapat terekam dengan baik. Salah satu contohnya ketika suatu website yang memakai API. Dengan ini kamu akan terbantu untuk mengetahui bagaimana payload tersebut dibuat dan mengulangi panggilannya apabila itu yang diharapkan.
3. Merekam Resource dari Website
Maksud dari resource adalah berkas yang dimuat dari website tersebut, seperti gambar, video, dan lain-lain. Hal ini juga termasuk berkas yang dimuat melalui javascript yang mana akan menghasilkan resource eksternal.
4. Mengecek Performa Website
Ada bagian tab Performance yang dapat merekam performa website. Hasil yang ditunjukkan berupa perhitungan waktu loading, rangkaian solusi untuk mengoptimalkan kode seperti melakukan minify terhadap javascript atau css yang terpisah.
Selain diatas masih ada beberapa kegunaan lain yang ada di fitur developer tools (inspect element) pada browser. Kamu dapat mengetahuinya lebih dengan cara mencobanya langsung. Dan jika kamu memiliki pertanyaan mengenai tutorial diatas, sangat dipersilakan untuk berkomentar dibawah artikel ini.
Semoga bermanfaat dan Selamat mencoba
