Fungsi Inspect Mode Dalam Web Browser

Ketika kita melakukan klik kanan pada halaman web diantara list menu yang muncul maka akan ada pilihan "Inspect". Hampir setiap browser sekarang memiliki fungsi ini. Bagian Inspect Mode merupakan bagian dari Web Development Tools yang memungkinkan untuk mengubah tampilan web atau debug secara sementara sampai halaman tersebut di refresh / reload. Fitur ini memungkinkan pengembang web melakukan pengujian HTML, DOM, CSS, Javascript dan hal lain yang berhubungan dengan tekhnologi web. Singkatnya seorang web designer akan menguji tampilan sampai serasa cocok, dan kemudian diterapkan di halaman source code asli miliknya.

Sebagai contoh jika kita ingin merubah tampilan dari suatu DIV block yang menggunakan Style CSS, kita hanya perlu meng-klik kanan pada area DIV yang di maksud dan pilih Inpsect. Maka Jendela baru akan muncul di ikuti dengan tampilan HTML dan kolom Stylesheet CSS. Jika kita melakukan klik kanan pada bagian HTML maka akan ada pilihan lain seperti "Edit HTML" yang memungkinkan kita mengubah tampilan halaman yang menggunakan code HTML tersebut.

Dalam perkembangannya, Web designer telah di mudahkan dengan adanya fitur ini, semisal kita meng inspect suatu elemen yang memiliki warna background maka di kolom style tersebut sudah tergenerate sample warna dari hex code untuk warna yang digunakan, dan jika kita meng-klik pada warna tersebut akan muncul color picker sebagai pilihan warna lain yang akan kita gunakan.

Inspect Mode di Firefox

Browser ternama juga menyertakan Debug tampilan untuk web versi mobile, dengan menekan tombol CTRL + SHIF + M yang tidak lain adalah Responsive mode. Dengan itu kita bisa tahu bagaimana tampilan web kita ketika dibuka di layar atau ponsel yang memiliki ukuran layar tertentu. Ini karena layar yang di gunakan user berbeda beda. Biasanya yang pasti ada ialah tampilan Simulator untuk device Ipad, Iphone, dan Android.

Inspect Mode di Opera Chromium Engine

Sumber https://www.blakbin.com/

Share this post