featured

Bekerja dengan Inspect Element pada chrome

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Bagi setiap orang ketika sedang melakukan coding progrmnya punya cara masing- masing untuk men-debug codenya, dan biasanya tiap bahasa pemrograman punya cara tersendiri seperti debug var_dump pada PHP

var_dump(expression);

console.log(expesion); pada javascript

console.log(expesion);

jika pada CSS dan HTML adalah menggunakan inspect element pada Browser.

Fungsi debug
Secara bahasa debug artinya “de” itu mengandung arti meniadakan/ menghilangkan, “Bug” dalam pemrogrman bisa dikatakan kesalahan, kekeliruan singkatnya debug adalah menghilangkan kesalahan yang terdapat dalam code itu secara arti bahasa penjelasannya untuk mengetahui kesalahan dari code atau juga untuk mengetahui isi dari satu variable.

dalam code CSS + HTML debug dibutuhkan untuk merubah tampilan tanpa kita membuka text editor tapi sifatnya temporari atau hanya sementara, jika kita refresh semua debug yang kita rubah dengan inspect element akan hilang dengan sendirinya.

Memanfatkan fungsi debug dalam Coding CSS + HTML
jika anda seorang front-end developer mungkin ini bisa membantu dalam pekerjaannya, untuk slicing satu halaman HTML + CSS kita bisa langsung bekerja dengan menggunakan inspect element. intinya apa yang kita debug untuk tampilan dengan inspect element akan langsung tersimpan pada code kita tanpa harus mengcopy nya pada text editor pekerjaan kita. Berikut cara seting pada browser Chrome:

Langkah 1

Buka pada browser pekerjaan anda lakukan unspect element pada prowser pilih menu Sources, klik kanan dan pilih Add folder to workspace.

inspect1

 

kemudian setelah di add folder to workspace maka akan meminta untuk meload file kerjaan kita. pilih file yang akan kita koneksikan dengan browser atau yang kita akan kerjakan.

inspect2

 

Setelah kita pilih filenya tekan OK , maka akan muncul peringatan diatas browser untuk kita Allow. tekan tombol Allow.

inspect3

 

Langkah 2

Setelah proses yang tadi maka file yang kita pilih akan tampil pada Source Inspect element  lihat gambar berikut:

inspect4

klik pada folder  css maka akan tampil beberapa file yang ada didalam folder berikut , cari file style.css yang akan kita koneksikan dengan browser. lalu kelik kanan dan pilih menu Map to network resource  .

inspect5

maka akan tampil interface untuk memilih file css yang akan dikoneksikan.

inspect6

setelah dipilih file style.css maka browser akan meminta konfirmasi untuk restart inspect element, klik ok .

inspect7

setelah itu pekerjaan anda sudah terkoneksi dengan browser apapun yang anda lakukan untuk perubahan CSS maka akan lagsung tersimpan di file pekerjaan anda lihat contoh berikut :

inspect8

 

Kesimpulan

Banyak cara yang digunakan untuk mempercepat pekerjaan anda dari mulai tools, trik dan lainnya bahasan kali ini ditujukkan untuk membuat pekerjaan front-end developer sedikit lebih cepat karena ketika sedang melakukan perubahan style dengan cara inspect element kita tidak usah lagi menuliskan codenya ditext editor karena sudah langsung tersimpan pada file yang kita rubah (style.css).

Semoga bermanfaat dan membantu dalam pekerjaan.

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.

Comments

  1. firman says:

    thanks for sharing (y) :)

  2. Jaka Perdana says:

    Gan kok udah saya saya pilih css file interface tapi kok browser gak minta konfirmasi untuk restart inspect element ya?