JavaScript razhroščevanje (Debugging)

Pri razhroščevanju kode JavaScript iščemo vzroke za napačno delovanje programa, preverjamo vrednosti spremenljivk, potek izvajanja in morebitna sporočila o napakah. Sodobni brskalniki vsebujejo razvijalska orodja, v katerih lahko spremljamo izpis v konzoli, nastavljamo prekinitvene točke in izvajanje kode začasno ustavimo tudi z rezervirano besedo debugger. Tak pristop je preglednejši in zanesljivejši od naključnega popravljanja kode brez preverjanja dejanskega vzroka napake.

Osnovna pravila

• Napake v kodi je smiselno iskati postopno: najprej preverimo konzolo, nato vrednosti spremenljivk in potek izvajanja.
• Za preprost izpis podatkov med izvajanjem uporabljamo metode konzole, na primer console.log(), console.warn() in console.error().
• Za natančnejše preverjanje izvajanja kode uporabljamo prekinitvene točke v razvijalskih orodjih brskalnika.
• Stavek debugger omogoča, da izvajanje kode ustavimo neposredno v programu.
• Pri razhroščevanju je priporočljivo uporabljati jasno poimenovane spremenljivke in sproti preverjati vhodne podatke.

Primerjave

Metoda console.log()

Metoda console.log() izpiše vrednost ali sporočilo v konzolo razvijalskih orodij. Uporabna je predvsem za hiter pregled vrednosti spremenljivk, rezultatov izrazov, vsebine objektov in zaporedja izvajanja programa. Za prikaz podatkov na spletni strani ni namenjena, ampak služi razvijalcu med preverjanjem delovanja kode.

<p>Preprost izračun:</p>
<p id="primer"></p>

<script>
let x = 10;
let y = 20;
let z = x + y;

console.log("Vrednost spremenljivke z:", z);
document.getElementById("primer").textContent = "Vrednost spremenljivke z je " + z;
</script>

V sodobnih razvijalskih orodjih lahko poleg console.log() uporabljamo tudi console.warn() za opozorila in console.error() za napake. Tako je izpis bolj pregleden.

Prekinitvene točke

Prekinitvena točka je mesto v kodi, kjer se izvajanje programa začasno ustavi. Takrat lahko v razvijalskih orodjih pregledamo trenutne vrednosti spremenljivk, klicni sklad in potek izvajanja kode. Ta način je posebej uporaben takrat, ko napaka ni vezana le na eno vrednost, ampak na zaporedje več korakov.

Razvijalska orodja v brskalnikih običajno odpremo s tipko F12 ali prek menija brskalnika. Nato v razdelku za izvorno kodo izberemo vrstico, kjer želimo ustaviti izvajanje.

Prekinitvene točke so primernejše od velikega števila izpisov v konzolo, kadar želimo natančno preveriti stanje programa v določeni vrstici kode.

Rezervirana beseda debugger

Rezervirana beseda debugger ustavi izvajanje programa in pokliče razhroščevalno funkcijo, če je ta v okolju na voljo. V praksi deluje podobno kot ročno nastavljena prekinitvena točka. Če razhroščevalnik ni odprt ali ni na voljo, stavek debugger nima učinka.

<p>Primer uporabe rezervirane besede debugger:</p>
<p id="primer1"></p>

<script>
let a = 12;
let b = 8;
let vsota = a + b;

debugger;

document.getElementById("primer1").textContent = "Vsota je " + vsota;
</script>

Ta pristop je uporaben predvsem med razvojem. V končni različici programa takih mest navadno ne puščamo brez utemeljenega razloga.

Priporočila

• Spremenljivke deklariraj z let ali const, da je obseg veljavnosti jasen in da ne nastajajo nenamerne globalne spremenljivke.
• Za hiter pregled vrednosti uporabi console.log(), za natančnejšo analizo pa prekinitvene točke.
• Izpisuj smiselna in kratka sporočila, na primer console.log("Vrednost x:", x).
• Preverjaj tudi vrsto podatkov, ne le njihove vrednosti, zlasti pri vnosu uporabnika.
• Po končanem razhroščevanju odstrani odvečne izpise in začasne stavke debugger.

Pogoste napake

• Vrednosti spremenljivk se izpisujejo brez jasnega opisa, zato izpis v konzoli ni dovolj pregleden.
• Začasni stavki debugger ostanejo v kodi tudi po končanem preverjanju.
• Spremenljivke niso deklarirane z let ali const, zato nastanejo težje sledljive napake v obsegu veljavnosti.
• Preveč napak se poskuša reševati samo z izpisi v konzolo, namesto da bi se uporabile tudi prekinitvene točke.
• Pri razhroščevanju se preveri le končni rezultat, ne pa tudi vmesni koraki izvajanja.