Bekerja dengan Inspect Element pada chrome

Bagikan

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.

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.

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

Langkah 2

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

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  .

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

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

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 :

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.

Bagikan