Cara debug Javascript

Ini cara debug javascript, entah bener entah kagak, tapi saya sering pakai cara ini hehe . . . Penggunaannya dengan menggunakan google chrome. Ok, sekarang kita coba belajar mendebug script javascript.

Pertama-tama silakan copas code ini

<input name="txtBil1" type="text" />
		<input id="txtBil2" name="txtBil2" type="text" />
		<button id="btnJumlah" type="button">Jumlah</button>
		<span id="hasil"></span><script src="https://code.jquery.com/jquery-1.12.3.min.js"></script><script>// <![CDATA[
$(document).ready(function(){ $("#btnJumlah").click(function(){ var bil1 = $("#txtBil1").val(); var bil2 = $("#txtBil2").val(); $("#hasil").html(bil1+bil2); }); });
// ]]></script>

Simpan di htdocs, lalu buka halaman tersebut, dan lakukan proses penambahan.

Debug Javascript

Hasilnya sebagai berikut :

Hasilnya

Nha, ternyata muncul error untuk hasil penambahannya, oleh karena itu kita harus mendebug javascript dengan cara klik kanan –> inspect element (periksa elemen jika google chrome indonesia )

pilih yang tab sources –> pilih filenya

Inspect Element

berikan breakpoint pada area click (karena perhitungan terjadi ketika button di klik )

break point

jalankan lagi programnya

Kalau berhasil, maka program akan berhenti di titik script tersebut. Jika tidak berhenti di titik tersebut, berarti ada kemungkinan salah dalam pemberian tempat script click button (biasanya nama button atau id button atau css button yang salah ).

Jika ingin melihat isi dari element yang kita buat, maka kita dapat menggunakan tab watch. Ketik saja sesuai dengan elementnya. Contohnya seperti ini, atau bisa juga dengan mengetikkan variable var nya, atau bisa juga dengan menyorot (hover) pada script yang ingin dilihat

watch

Dan akhirnya ketahuan ternyata HTML untuk bilangan 1 belum diberikan id, sehingga kita dapat menambahkan ID.

Setelah penambahan ID kita coba debug lagi javascriptnya apakah sudah sesuai atau belum.

Ternyata belum, maka kita cek lagi, oh ternyata kita belum parse integer untuk nilai dari variablenya, sehingga nilai angkanya dianggap string dan hanya digabungkan tok hehe 😀 (coba sendiri dulu yak, biar paham )

Ok, kurang lebih seperti itu mendebug javascript, kurang tahu apakah ini efektif atau ndak, tapi setidaknya kita bisa trace bagaimana jalan program kita (Dannnn makanya ketika kita bikin validasi jangan hanya di javascript saja, soalnya bisa saja ane ganti value di watch dan mengkibulin validasi di javascript, harus dibackup dengan validasi di PHP ataupun di database , ini ntar yak meh kerja sek :shakehand2 ).

Leave a Comment