Debug HTML, CSS dan Javascript dengan Google Chrome

Hey Gwener's, What's Up!
Sobat sering mendesign HTML atau template untuk suatu website ataupun blog. Terkadang kita juga permencoba melihat hasil yang telah dibuat. Tentunya juga menggunakan browser. Namun terkadang hasil yang ditampilkan ternyata tidak sesuai, hal bisa saja kesalah yang telah kita buat sendiri. Untuk mencari kesalahan ini tentu kita perlu mendebug design HTML tersebut agar menemukan penyebabnya.

Sebenarnya sobat juga tidak perlu tools ataupun software tambahan untuk melakukan ini. Jika sobat sering menggunakan browser yang telah dilengkapi dengan firebug atau fitur untuk mendebug suatu halaman web sehingga bisa melihat secara detail tag HTML berserta CSS yang digunakan. Selain itu juga bisa memanipulasi javascript yang digunakan.

Google Chrome inspect element

Google Chrome adalah salah satu solusinya. Google Chrome menyediakan inspect element untuk melihat tag html beserta CSS yang diterapkan pada tag tersebut. Selain itu bisa langsung dimanipulasi dan disesuaikan untuk memperbaiki jika diperlukan. Namun yang paling penting dari Google Chrome ini adalah fasilitas untuk debug javascript.

Javasript yang diterapkan pada suatu halaman web bisa dimanipulasi menggunakan Browser Google Chrome ini. Melalui layanan console kita dapat mengubah atau membuat sebuah variable javascript dan mejalankan serta mengekseskusinya. Sehingga ketika sobat membuat sebuah library javascript bisa langsung dicoba menggunakan tools ini.

Caranya pun sangat sederhana sobat bisa langsung membuka tools ini dengan menekan tombol F12 atau dengan cara klik kanan lalu pilih menu Inspect Element, secara otomatis akan muncul window baru yang menampilkan tag dan descripsi halaman web yang sedang dibuka. Dengan tools inilah kita bisa langsung memanipulasi halaman tersebut. Mulai dari tag setiap element hingga javascript yang digunakan. Mudah kan? silahkan dicoba

Baca Juga Microsoft Remote Desktop tersedia di Play Store