Wednesday, January 14, 2015

Tutorial Javascript Part 24: Debug Program

Debug adalah proses mencari error pada kode program. Seperti lazim dialami oleh semua programmer baik pemula maupun ahli bahwa problem sering saat development. Penyebabnya entah algoritma dari programmer yang salah atau hanya sekedar salah penulisan saja. Hal ini berlaku pula pada pemrograman javascript.

Debug pada Javascript

Tidak seperti bahasa pemrograman lain (misal=php) pada javascript agak sulit untuk melakukan proses debugging. Hal ini karena error yang terjadi tidak ditampilkan dalam pesan pada layar. Memang pada tulisan sebelumnya dijelaskan bahwa error yang terjadi dapat ditampilkan dalam pesan error melalui err.message, namun tentu hal ini masih kurang membantu.

Untuk melakukan proses debug pada pemrograman javascript kita mamanfaatkan fasilitas console log yang ada pada browser. Misal pada google-chrome kita bisa mengakses console log dengan menekan tombol F12 lalu pilih menu console.

Contoh proses debug pada program javascript:

 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>     
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
     "use strict";  
 function Pesan()    
 {   
     var x;  
     x="test";  
     document.getelementbyid("view").value=x;  
 }  
 </script>    
 </body>    
 </html>   

Menemukan Error saat Debug

Sekilas nampak tidak ada yang salah pada program diatas, namun ketika kita jalankan pada browser akan timbul pertanyaan kenapa saat tombol di klik tidak tampil pesan "test" sesuai yang diinginkan. Untuk mengecek sumber errornya kita gunakan fasilitas console log pada browser berikut ini :

contoh tampilan error pada console google-chrome

Pada console tampak pesan "Uncaught TypeError: undefined index.html:14 is not function". Maksudnya error terjadi pada baris ke-14, yaitu perintah:
document.getelementbyid("view").value=x;

Menemukan Solusi Error pada Program

Ternyata terjadi kesalahan penulisan yang seharusnya "getElementById" ditulis dengan "getelementbyid" dan yang seharusnya "innerHTML" ditulis dengan "value". Ini yang menyebabkan error dan program tidak berjalan. Terlihat bahwa dengan bantuan console log pada browser proses debug kode program javascript dapat lebih mudah.

Hasil script setelah proses debug :
 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>     
 Silahkan klik pada tombol    
 <button onclick="Pesan()">Enter</button>  
 <p id="view"></p>    
 <script type="text/javascript">    
     "use strict";  
 function Pesan()    
 {   
     var x;  
     x="test";  
     document.getElementById("view").innerHTML=x;  
 }  
 </script>    
 </body>    
 </html>   

Menggunakan Breakpoint

Breakpoint adalah titik pemberhentian pada program. Jika kita menetapkan sebuah breakpoint pada debugger maka saat program tersebut dijalankan akan berhenti pada breakpoint tersebut.

Untuk membuat breakpoint kita bisa klik nomor baris pada bagian Sources pada debugger. seperti contoh berikut ini :

menetapkan breakpoint pada debugger javascript

Kemudian pada list Breakpoint akan muncul breakpoint yang kita buat tadi seperti ini :


Kemudian saat program dijalankan akan berhenti/pause pada breakpoint yang kita buat tadi seperti ini:

program berhenti pada breakpoint

Untuk menjalankannya kembali silahkan klik icon play yang berwarna biru. Kemudian untuk menghapus breakpoint cukup dengan klik sekali lagi pada nomor baris breakpoint tadi.

Lihat indeks artikel Tutorial Javascript Dasar >> 

Referensi :

0 komentar

Post a Comment