Bagaimana Cara Debuging Javascript di chrome
Jurnalcode.com

Bagaimana Cara Debuging Javascript di chrome

Bagaimana Cara Debuging Javascript di chrome


Sebelum menulis kode yang lebih kompleks, mari kita bahas tentang debugging. Semua Browser modern dan sebagian besar lingkungan lainnya mendukung "debugging" - UI khusus di alat pengembang yang membuat temuan dan memperbaiki kesalahan menjadi lebih mudah. Nah Kali ini saya  akan menggunakan Chrome , karena ini mungkin yang paling kaya fitur dalam aspek ini.


Source Panel

Versi Chrome Anda mungkin terlihat sedikit berbeda, namun tetap harus jelas apa yang ada di sana.

  • Buka contoh halaman di Chrome.
  • Aktifkan Developer Tools dengan Menekan Tombol  F12 (Mac: Cmd + Opt + I ).
  • Pilih Source Panel.


maka akan muncul Tampilan Seperti di bawah ini :

Silahkan klik dan pilih index.html lalu hello.js di tampilan hierarki. seperti di bawah ini :

Di sini kita bisa melihat tiga kolom :

  • Daftar kolom Source html, javascript, css dan file lainnya termasuk gambar yang dilekatkan pada halaman. Ekstensi Chrome juga muncul di sini.  
  • kolom Source menunjukkan Source nya
  • Informasi dan zona kolom adalah untuk debugging

Sekarang Anda bisa mengklik toggler yang sama lagi untuk menyembunyikan daftar sumber dan memberi kode beberapa spasi.

Console

jika kita menekan Esc , maka konsol akan terbuka di bawah ini. Kita bisa mengetik perintah di sana dan tekan Enter untuk mengeksekusi. Setelah sebuah pernyataan dieksekusi, hasilnya ditunjukkan di bawah ini. Sebagai contoh, di sini 1+2 menghasilkan 3 , dan hello("debugger") tidak menghasilkan apa-apa, jadi hasilnya tidak undefined : 

 

Breakpoints

Mari kita periksa apa yang terjadi di dalam kode halaman contoh . Di hello.js , klik di nomor baris 4 . Ya, tepat pada digit "4" , bukan pada kode. Selamat! Anda telah menetapkan breakpoint. Silahkan juga klik pada nomor untuk baris 8 . Seharusnya terlihat seperti ini (biru di mana Anda harus klik):

Breakpoint adalah titik kode dimana debugger akan secara otomatis menghentikan sementara eksekusi JavaScript. Sementara kode dijeda, kita bisa memeriksa variabel saat ini, menjalankan perintah di konsol dll. Dengan kata lain, kita bisa men-debugnya.


Kita akan menemukan daftar breakpoint di panel sebelah kanan. Itu berguna bila kita memiliki banyak breakpoint di berbagai file. Hal ini memungkinkan untuk:

  • shortcut ke breakpoint dalam kode (dengan mengkliknya di panel sebelah kanan).
  • Nonaktifkan breakpoint sementara dengan tidak mencentangnya.
  • Hapus breakpoint dengan mengklik kanan dan pilih Remove.
  • …Dan seterusnya.

Kita juga bisa Pause kode dengan menggunakan perintah debugger , seperti ini:

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- the debugger stops here

  say(phrase);
}

 

Itu sangat nyaman saat kita berada dalam editor kode dan tidak ingin beralih ke browser dan mencari script di alat pengembang untuk mengatur breakpoint. Dalam contoh kita, hello() disebut selama pemuatan halaman, jadi cara termudah untuk mengaktifkan debugger adalah dengan memuat ulang halaman. Jadi mari kita tekan F5 (Windows, Linux) atau Cmd + R (Mac).

Eksekusi berhenti di baris ke-4 Lihat Gambar Berikut :

Silakan buka dropdown informasi ke kanan (diberi label panah). berikut penjelasan nya :

Watch - menunjukkan nilai saat ini untuk setiap ekspresi.

Anda bisa klik plus + dan masukan ungkapan. Debugger akan menunjukkan nilainya setiap saat, secara otomatis menghitungnya kembali dalam proses eksekusi.


Call Stack - menunjukkan rantai panggilan bersarang.

Pada saat ini debugger ada di dalam hello() call, dipanggil oleh script di index.html (tidak ada fungsi disana, jadi ini disebut "anonim").    Jika Anda mengklik item tumpukan, debugger akan melompat ke kode yang sesuai, dan semua variabelnya dapat diperiksa juga.


Scope - variabel saat ini.

Local menunjukkan variabel fungsi lokal. Anda juga dapat melihat nilai mereka disorot dari sumbernya.

Global memiliki variabel global (diluar fungsi apapun).

 

Sekian Tutorial Debuging Javasript , semoga bermanfaat

.

Ayo Komentar