A program futását debugolással lehet legegyszerűbben ellenőrizni:
- Legyen nyitva a dev tools (F12)
- Valahova írd bele a kódba, hogy
debugger; (ez breakpointot ad hozzá a kódhoz - lásd lentebb)
- Menj rá, hogy Run (a jsbinnél)
- Ekkor egy ehhez hasonló ablakot fogsz látni (lenti kép)
- A kék sáv jelzi, hogy éppen melyik sor készül lefutni (debugger sora. A
debugger kulcsszó úgynevezett breakpointot rak a kódba, ami developer módban így megállítja a program futását, ahogy láthatod)
- Ha ilyen helyzetben bármelyik változó fölé viszed az egeret, akkor kiírja annak az éppen aktuális értékét. Tehát amiknek csak lejjebb adsz értéket (annál ahol a program futása éppen tart), azok
undefined-ok lesznek
- A képen adhatsz új breakpointokat is a sor számára kattintva (narancssárga karika a képen)
- A kék karikával pedig léptetheted a programot különböző módokon, rendre:
- Folytonos futás: Csak a következő breakpointnál áll meg. Ha nincs ilyen, akkor lefut az egész, ahogy normálisan szokott
- Soronkénti léptetés (ezt szokták a legtöbbször használni, neked is erre van szükséged): Csak 1-1 sort lép, ha erre kattintasz. Így nyomon lehet követni, hogy a program "belemegy-e" bizonyos kódrészekbe
- Step into Olyasmi, mint a soronkénti léptetés, de ha függvény van a sorban, akkor abba belemegy, és azon belül is soronként lépked. Ha csak sima "standard" utasítás van, amibe beljebb már nem tud menni (pl.: értékadás), akkor simán lép egyet.
Játszadozz ezzel egy kicsit, hidd el, hogy nagyon hasznos! Ha jsbin-t használsz ne lepődj meg, hogy a kódod egy kicsit más, mint amit beírtál: azokat a plusz részeket a jsbin adja hozzá, ne törődj velük.