Memaksimalkan Penggunaan Inspect Element (Developer Tools)


Code Pelajar - Halo Sobaat Pelajar, lama gak update artikel karena sibuk kuliah dan kerjaan di kantor. Untuk Sobat yang ingin belajar bersama atau diskusi masalah template, koding, dll terkait masalah pemrograman silahkan sobat join(bergabung) kedalam group facebook kami bisa melalui klik link ini : Group Facebook CodePelajar.


Kembali ke topik utama, bagaimana cara sobat untuk memaksimalkan penggunaan inspect element (Developers Tools) dalam pengerjaan projek sobat? seperti membuat template atau tema website. Banyak sekali Sobat blogger atau pemula yang masih belum tau akan adanya fitur ini, jadi biasanya mereka sebelum mengecek di inspect element malah langsung bertanya di group, padahal masalah yang mereka alami adalah permasalahan sepele.


Apa Saja Fungsi Developers Tools (Inpect Element)

Sebelum itu kita harus tau dulu, apa ajasih funsinya? apa emang iya developers tools ini adalah alat saktinya para developers Web ? hehe

  1. Melihat dan mengedit source HTML & CSS
  2. melihat dan mengedit suatu tampilan halaman web Responsive
  3. menganalisis alur kerja program (Debug Javascript)
  4. Melihat Respon Time sebuah halaman WEB
  5. Melihat Performa sebuah halaman WEB (AUDIT/Pagespeed Insight)
  6. Penanganan kesalahan program (Error Handling)

#1. Melihat dan mengedit source HTML & CSS


Melihat dan mengedit source sebuah halaman WEBSITE, sangatlah mudah menggunakan Developers Tools. Diawal ini saya akan memberikan 2 cara untuk membuka sebuah Developer Tools,

1. Cara Bertahap

  1. Klik kanan
  2. Pilih Option "INPECT ELEMENT"
  3. Ketika sudah diklik, maka developers Tools akan keluar.

2. Cara Langsung

  1. Klik tombol ini secara bersamaan, CTRL+SHIFT+I
  2. Maka Developers Tools akan keluar.

Jika Kalian sudah berhasil membukanya, maka kalian melihat sebuah panel yang berisikan source sebuah halaman website seperti ini ;
Jika kita lihat disana ada 2 aspek yang saya Zoom, yang sebelah kanan adalah Source CSS dan yang sebelah kiri adalah source HTML. Lalu bagaimana cara mengedit nya? mari simak video singkat berikut.




Dibagian pojok kiri atas ada sebuah tools untuk select element, dan di bagian tab CSS (Style) disana ada 3 tab yaitu ada :hov,.cls,+ dimana memiliki fungsi yang berbeda-beda.


  1. :hov ini berfungsi untuk melihat preview ketika kita sedang membuat sebuah CSS selector seperti :hover, :focus dll.

  2. .cls ini berfungsi untuk menambahkan sebuah class baru, sebenarnya fungsi ini saya juga baru tau :D. jadi fungsi ini akan menambahkan Class baru pada element yang sedang kita seleksi(pilih).

  3. + fungsi ini berguna untuk membuat sebuah style rule css, jadi semisal ada 2 class dalam 1 element <div class="kelas1 kelas2"/> ketika kita klik fungsi tombol " + " maka nanti akan terbentuk sebuah style rule seperti ini .kelas1.kelas2{ISI CSS}, kurang lebih seperti itu.

Jadi bagaimana menurut kalian apakah sudah paham? Tutorial ini kemungkinan akan saya buat series agar kalian bisa memahaminya secara paham paham banget, hehe silahkan komentar jika ada yang ini di tambahkan atau ada yang dibingungkan? tutorial ini mungkin bisa jadi untuk pemula dan para ekspert yang masih belum terbiasa menggunakan Developers Tools



Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel