Web Browser Google Chrome menyediakan suatu fasilitas untuk mencari kesalahan kode program java script atau istilah programnya dikenal dengan istilah debugging. Untuk mencoba menggunakan fasilitas tersebut buka melalui Chrome Menu pada (pojok kanan atas dengan gambar tiga garis horizontal) kemudian pilih More tools > Developer tools. Fasilitas tersebut juga dapat diakses melalui shortcut key Ctrl + Shift + I.
Gambar Chrome Developer Tools
Pada Chrome Developer Tools terdapat beberapa fasilitas yaitu:
- Elements
- Network
- Sources
- Timeline
- Profiles
- Resources
- Audits
- Console
Namun pada artikel kali ini akan fokus pada fasilitas Sources yang digunakan untuk debugging kode java script.
Langkah pertama tentunya harus ada file java script yang akan di uji coba, misalkan saya memiliki file seperti berikut:
<!DOCTYPE HTML>
<html>
<head>
<title>Study On Sunday | Debugging Java Script</title>
<script type="text/javascript">
function loop(x){
for(var i=0; i<10; i++)
{
x = x + i;
}
document.write(x);
}
</script>
</head>
<body>
<h1>Debugging Java Script</h1>
<input type="button" value="Cek" onclick="loop(5)"/>
</body>
</html>
Simpan file tersebut dengan nama JSDebug.html.
Langkah kedua jalankan file tersebut pada Web Browser Google Chrome. Hasilnya akan terlihat seperti gambar berikut:
Langkah ketiga buka Chrome Developer Tools dengan cara menekan kombinasi tombol Ctrl + Shift + I. Kemudian pilih pada tab Sources. Hasilnya akan terlihat seperti gambar berikut:
Langkah keempat pasanglah breakpoint pada baris ke tujuh dengan cara melakukan klik pada nomor baris kode program seketika nomor baris yang diklik akan berubah menjadi warna biru seperti yang terlihat pada gambar berikut:
Terakhir pada halaman JSDebug.html yang dijalankan di web browser tekan tombol Cek hasilnya akan terlihat seperti gambar berikut:
Bila diperhatikan layar akan berubah menjadi disable dan menampilkan menu Pauses in debugger. Bila ingin memeriksa setiap proses, dalam hal ini adalah operasi perulangan dapat menekan tombol F11 pada keyboard dan untuk melihat perubahan di setiap prosesnya dapat memeriksanya pada bagian Scope seperti gambar berikut ini:
Catatan anda dapat menekan tombol F11 untuk berpindah ke proses selanjutnya, jadi anda dapat menekannya beberapa kali hingga proses selesai. Pada contoh diatas akan memberikan hasil akhir 50.
Dengan cara ini seorang programmer dapat mengetahui setiap proses kode program tentu saja sangat berguna pada saat menghadapi kondisi dimana hasil program berbeda dari hasil yang semestinya. Sebagai contoh pada JSDebug.html pada kondisi perulangan saya menggantinya menjadi seperti ini:
for(var i=0; i>10; i++)
{
x = x + i;
}
Apabia dilakukan debugging seperti cara diatas akan memberikan hasil yang berbeda dan salah. Hasil yang diberikan adalah 5, kesalahan yang dapat disimpulkan adalah perulangan tidak dijalankan karena kondisinya salah.
Apabila ada hal yang ingin ditanyakan silahkan tinggalkan melalui fasilitas komentar pada blog ini. Informasi beberapa fasilitas Chrome Developer Tools dapat dibaca melalui tautan ini Chrome Developer Tools.
0 Comments:
Post a Comment