Debugging di JavaScript: Code dan Cara Mendebugnya

Error dapat atau akan terjadi, setiap kali kita menulis kode pemrograman pada komputer.

Section Artikel

1 Code Debugging
2 JavaScript Debugger
3 Method console.log()
4 Setting Breakpoint
5 Keyword Debugger
6 Alat Debugging Browser Utama
7 Did You Know?

Code Debugging

Kode pemrograman mungkin menglami error pada sintaks, atau kesalahan logika.

Banyak dari kesalahan ini yang sulit didiagnosis.

Seringkali, ketika kode pemrograman mengalami kesalahan, tidak ada yang terjadi. Tidak ada pesan kesalahan, dan kita tidak akan mendapatkan indikasi di mana mencari kesalahan.

Mencari (dan memperbaiki) kesalahan dalam kode pemrograman disebut debugging code.

JavaScript Debugger

Debugging tidak mudah dilakukan. Namun untungnya, semua browser modern memiliki debugger JavaScript bawaan.

Debugger internal dapat dihidupkan dan dimatikan, memaksa kesalahan untuk dilaporkan kepada pengguna.

Dengan debugger, Anda juga dapat mengatur breakpoint (tempat di mana eksekusi kode dapat dihentikan), dan memeriksa variabel saat kode dijalankan.

Biasanya, jika tidak ikuti langkah-langkah di bagian bawah halaman ini. Untuk mengaktifkan debugging di browser dapat dilakukan dengan tombol F12, dan pilih “console” di menu debugger.

Method console.log()

Jika browser mendukung debugging, browser akan bisa menggunakan console.log() untuk menampilkan nilai JavaScript di jendela debugger.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Web Pertamaku</h2>

<p> Aktifkan debugging di browser Anda (Chrome, IE, Firefox) dengan F12, dan pilih "Console" di menu debugger. </p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Setting Breakpoint

Pada jendela debugger, Kita juga dapat mengatur breakpoint dalam kode JavaScript.

Pada setiap breakpoint, kode JavaScript akan berhenti dijalankan, dan memungkinkan kita memeriksa nilai JavaScript.

Setelah memeriksa nilai, Anda dapat melanjutkan eksekusi kode (biasanya dengan tombol play).

Keyword Debugger

Keyword debugger menghentikan eksekusi JavaScript, dan memanggil (jika tersedia) fungsi debug.

Keyword ini memiliki fungsi yang sama seperti mengatur breakpoint di debugger.

Jika tidak ada debugging tersedia, pernyataan debugger tidak berpengaruh.

Dengan debugger diaktifkan, kode ini akan berhenti dijalankan sebelum menjalankan baris ketiga.

Contoh:

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<p id="demo"></p>

<p> Dengan debugger dihidupkan, kode di bawah ini akan berhenti dijalankan sebelum menjalankan baris ketiga. </p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Alat Debugging Browser Utama

Biasanya, kita dapat mengaktifkan debugging di browser Anda dengan F12, dan pilih “Console” di menu debugger.

Jika tidak, ikuti langkah-langkah berikut:

Chrome

Buka browser.
Dari menu, pilih “More tools”.
Dari alat, pilih “Developer tools”.
Terakhir, pilih Console.

Firefox

Buka browser.
Dari menu, pilih “Web Developer”.
Terakhir, pilih “Web Console”.

Edge

Buka browser.
Dari menu, pilih “Developer tools”.
Terakhir, pilih “Console”.

Opera

Buka browser.
Dari menu, pilih “Developer”.
Dari “Pengembang”, pilih “Developrt tools”.
Terakhir, pilih “Console”.

Safari

Buka Safari, Preferences, Advanced di menu utama.
Centang “Enable Show Develop menu in menu bar”.
Saat opsi baru “Develop” muncul di menu:
Pilih “Show Error Console”.

Did You Know?

Debugging adalah proses menguji, menemukan, dan mengurangi bug (error) pada program komputer.
Bug komputer pertama yang ditemukan adalah bug nyata (serangga) yang tersangkut di elektronik.

debugging javascript