Berkenalan dengan Alat Pengembangan Web
Salah satu hal tidak kalah penting dalam pemrograman web adalah debugging. Karena dalam pemrograman web, akan ada banyak sekali bugs atau pun kendala-kendala yang kita alami. Seperti contohnya tampilan pada browser kita tidak sesuai dengan kode CSS yang telah kita buat. Kita mungkin sudah yakin dengan kemampuan coding kita, namun poinnya bukan untuk merasa selalu benar atas pekeerjaan kita. Tapi mencari kesalahan tersebut dan membuat aplikasi kita berjalan sebagaimana mestinya. HTML dan CSS tidak memberi tahu secara langsung kita di mana errornya. Tapi ada tools bawaan browser untuk mengetahui apa yang salah dari kode kita.
Coba buka salah satu aplikasi web yang pernah teman-teman buat sebelumnya, lalu klik kanan dan pilih inspect element. Akan ada beberapa tab yang muncul pada bagian bawah browser kita.
Element Inspector
Element Inspector memungkinkan kita untuk "menginspeksi" elemen-elemen HTML pada halaman web. Kita dapat melihat struktur HTML dari situs web, mengedit elemen secara langsung, mengubah properti CSS, dan melihat perubahan yang terjadi secara instan. Ini adalah alat yang sangat berguna untuk merancang dan mengedit tampilan situs web kita.
Console
Console adalah alat yang sangat berguna dalam pengembangan web. Dengan menggunakan console, kita dapat melihat pesan kesalahan (error) yang muncul pada situs web kita, melakukan log pesan untuk debugging, dan bahkan menjalankan perintah JavaScript langsung dari console. Ini adalah alat yang sangat berguna untuk mendiagnosis masalah dan memeriksa hasil kode JavaScript kita.
Network
Network digunakan untuk memantau lalu lintas jaringan saat halaman web dimuat. kita dapat melihat semua permintaan (request) dan respon (response) yang terjadi saat halaman web dimuat, termasuk gambar, script, file CSS, dan lainnya. Ini membantu kita untuk mengoptimalkan performa situs web kita dengan memahami bagaimana sumber daya dimuat.
Ada beberapa hal seru yang dapat teman-teman coba untuk memahami penggunaan beberapa tools ini :
Di tab "Console," coba jalankan perintah JavaScript sederhana, seperti
alert("Hello, World!");, dan lihat hasilnya.Di tab "Elements," coba pilih elemen HTML pada halaman aplikasi web terkenal dan ubah properti CSS-nya, atau tambahkan elemen baru.
Di tab "Network," muat ulang halaman web dan perhatikan semua permintaan jaringan yang terjadi. Dari sinilah teman-teman dapat mengetahui bahwa setiap konten yang ditampilkan pada browser, terlebih dahulu direquest ke server. Karena dalam hal ini kita belum melakukan deploy aplikasi, maka servernya adalah komputer kita masing-masing.
Referensi
https://codepolitan.com/blog/mengenal-fitur-fitur-chrome-devtool
Last updated