+1 szavazat
(3,2e pont) által 

Van egy egész jó elképzelésem, hogy hogyan működik a kódom, de szeretném leellenőrizni, hogy tényleg úgy van-e minden. Van erre valami mód?

1 válasz

+1 szavazat
(15,8e pont) által 
által szerkesztett
 
Legjobb válasz

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.

debug screen

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.

(3,2e pont) által 
Ugyan képet nem tudom megnyitni, de sikerült megtalálni a debug ablakban a dolgokat.
...