Inspect Element pada Firefox

Seperti yang kita ketahui kalau di Google Chrome, kita bisa buka editor source code yakni inpect element pada halaman website untuk mencari bug pada website. Saya coba cari tahu untuk Firefox, ternyata untuk Firefox mesti diinstal add on, yakni Firebug.

Tampilannya seperti ini



Dalam mendesain website, yang saya hadapi sehari-hari adalah mengoprek source code script html ataupun php. Bila sudah upload ke server, dan terlihat ada bug, biasanya saya mengecek lagi ke editor seperti Notepad++ ataupun Dreamweaver. Adanya fitur Inspect Element ini memudahkan pekerjaan saya di mana saya langsung bisa mencari kesalahan kode script website.

Code yang ditampilkan dalam inspect element tentunya merupakan code2 client-side, meliputi HTML, CSS dan JavaScript. Browser2 populer saat ini seperti Mozilla Firefox, Opera, Google Chrome telah menyediakan fasilitas ini. Kecuali Mozilla Firefox, fasilitas ini sudah terdapat secara langsung saat pertama kali menginstal. Khusus Mozilla Firefox, untuk dapat menggunakan inspect element kita harus menambahkan sebuah add-on yaitu Firebug.

Selain untuk melihat struktur code dari sebuah halaman, fasilitas ini memungkinkan kita untuk melakukan realtime test misalnya mencoba mengubah sebuah code tertentu atau bahkan menghilangkan code tertentu. Dengan mengubah beberapa code atau menghilangkan code menggunakan fasilitas inspect elemen ini, kita dapat melihat langsung keluaran yang ditampilkan dalam browser. Hal ini sangat membantu tentunya karena dapat memberi kita gambaran apa yang akan terjadi saat mengganti atau bahkan menghilangkan code tersebut. Add on Firebug bisa langsung diinstal dari link ini. Untuk menggunakannya kita tinggal klik kanan 1 halaman website, pilih Inspect Element.

Ket : Inspect element lebih komplit daripada hanya View->Page Source (Firefox)

Semoga bermanfaat. Budayakan share & Like😀

2 thoughts on “Inspect Element pada Firefox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s