chrome dev tool

Debugging Website Dengan Chrome Developer Tools Paling Mudah

Debugging website dengan chrome developer tools ternyata sudah bukan menjadi hal asing lagi bagi para pengembang. Kegiatan uji pada website memang sering dilakukan oleh sejumlah pengembang untuk mengetahui apa terdapat kendala ataukah masalah lainnya di dalamnya. Dengan begitu dapat diatasi dengan segera agar tidak menjadi masalah.

Bug sendiri merupakan salah satu penyebab dari aplikasi ataupun software tidak dapat berjalan dengan semestinya. Dimana biasanya akan mengakibatkan sejumlah masalah seperti gagal login, error ketika sedang menginput data, disfungsi hingga hanya mampu menampilkan blue screen saja.

Pada website, selain mengetahui bagaimanakah cara mengatur SEO yang profesional, seorang pengembang juga harus mengetahui bagaimanakah proses melakukan debugging tersebut. dari sekian banyaknya pilihan alat, maka Chrome Developer Tools inipun banyak dijadikan sebagai pilihan.

36. debugging website dengan chrome developer tools

Debugging Website Dengan Chrome Developer

Disini Chrome developer tools atau biasa dikenal dengan sebutan Chrome Devtools adalah alat yang digunakan buat melakukan proses debug dari sebuah website. Tidak heran jika keberadaan tools tersebut cukup istimewa sekaligus sangat bermanfaat bagi seorang developer website.

Untuk menggunakannya sendiri sangat mudah buat dilakukan. Berikut ini cara membuka Debugging website dengan chrome developer tools tersebut:

  1. Pilih more tools-developer tools dari menu chrome
  2. Jika sudah klik kanan pada pilihan elemen laman dan pilih inspect
  3. Atau user juga dapat menggunakan pintasan keyboard shift + I pada Windows
  4. Atau langsung cmd+Opt+I Pada MacOS.

Fitur-fitur Devtools

Didalam alat ini sendiri ternyata juga terdapat sejumlah fitur yang berguna bagi developer dalam proses pengembangan website. Adapun fitur-fitur tersebut diantaranya adalah sebagai berikut ini.

  1. Element
    Pertama ada Element dimana berguna buat memeriksa ataupun proses mengedit langsung kode HTML serta Css. Tetapi akan langsung hilang jika mengalami proses refresh. Nah, adapun untuk membukanya adalah dengan klik inspect kemudian klik element ataupun langsung menekan F12.
  2. Console
    Kemudian ada console dimana berguna buat menjalankan sejumlah perintah javascript ataupun melihat pesan-pesan yang dihasilkan dari kode Javascript itu sendiri pada halaman yang tengah aktif. Untuk membukanya cukup klik kanan pada inspect dan tekan console.
  3. Source
    Ada lagi fitur source dimana berguna buat menampilkan isi file ataupun kode sumber dari halaman yang masih aktif.
  4. Device Mode
    Untuk mengaktifkannya bisa menekan inspect, toggle device toolbar ataupun melalui tombol F12, CTRL+Shift+,. Fitur ini dapat membantu buat menguji apakah suatu website tampilannya sudah responsive dan berjalan dengan maksimal melalui platform mobile.

Selain fitur-fitur di atas ternyata masih ada fitur lainnya yang menarik didalamnya seperti security hingga network. Jika penasan cobalah lakukan Debugging website dengan chrome developer tools sekarang juga.