A konzol tartalmát a böngésző fejlesztési paneljén (CTRL + Shift + i, Console fül), vagy a WebStorm felületen is láthatjuk. Tetszőleges szöveget összeállíthatunk és küldhetünk a konzolra a JavaScript forráskódból. A konzolon jelennek meg a különféle hibaüzenetek és figyelmeztetések is.

Használata programból

console.log( 'Ablakméret sikeresen lekérve.' );
console.log( 'WIDTH=' + WIDTH + '; HEIGHT=' + HEIGHT );

A régi JavaScript motorok esetén nem probléma, ha egy változót nem deklarálunk, az az első értékadáskor is megtörténhet. Ez hibalehetőségeket von maga után. Például ha deklarálunk egy globális változót, de egy függvényen belüli értékadáskor elgépeljük a nevét, nem kapunk hibaüzenetet, létrejön egy új változó a hibás névvel. Az újabb motorok képesek a JavaScript kód szigorúbb értelmezésére, vagyis ha értéket adunk egy deklarálatlan változónak, akkor hibát kapunk.

Bekapcsolása

Helyezzük el a kódban az alábbi sort:

"use strict;"

Az idézőjelek biztosítják, hogy egy régi JavaScript motor ne adjon hibát ismeretlen parancs miatt. Egy sztring önmagában ugyanis nem hiba. Az újabb motorok viszont felismerik a kapcsolót. A kapcsolót elhelyezhetjük a kód legelején a globális területen, ekkor a teljes program futására hatással lesz. Ha egy függvény elején használjuk, akkor arra a függvényre lokális a kapcsoló.

JavaScript modulok esetén nem kell külön megadnunk, mert ott alapértelmezés a strict mód.

Problémák

Ha külső JavaScript kódot is használunk, elképzelhető, hogy az a szigorú móddal ütközik. Ekkor ne használjuk ezt az üzemmódot.

Dokumentáció

• https://www.w3schools.com/js/js_strict.asp

A másik egyszerű lehetőség különféle üzenetek, változótartalmak megjelenítése a program futása során a HTML oldalba beágyazva. Ehhez a standard HTML-JavaScript eszközöket használhatjuk.

Felugró dialógusablak

A paraméterként átadott sztringet jeleníti meg.

window.alert( 'Változó=' + valtozo_neve );

Szövegmegjelenítés HTML elemben

Szükséges lépések:

• Azonosítóval ellátott, szöveg megjelenítésére alkalmas elem elhelyezése a HTML forrásban.
  • <p id="debug"></p>
• A JavaScript forráskódban módosítjuk az elem tartalmát az innerHTML attribútummal. Előzetesen meg kell keresni a kérdéses azonosítójú elemet a DOM struktúrában.
  • document.getElementById("debug").innerHTML = 5 + 6;

Gondoskodjunk arról, hogy a HTML elem megfelelően látható legyen az oldalon. Ez elsősorban teljes ablakos modellezésnél fontos. Példát láthatunk erre a 03_02_ThreeJsMaterialTester.html példaprogramban.

Kapcsolódó dokumentáció (angol nyelven)

• https://www.w3schools.com/js/js_output.asp

A Google Chrome böngésző széleskörű támogatást ad a weboldalak vizsgálatához.

• CTRL + U: Oldal forrásának megtekintése új ablakban.
• CTRL + Shift + i: Fejlesztői eszközök paneljének megnyitása. Ezen váltsunk át a Sources fülre, ahol lehetőségünk van objektumok, változók aktuális értéknek megjelenítésére (Watch panel, + ikon), miután a program futását felfüggesztettük (|| jel a az elérési út alatt). A Console panelen nyomkövetési információk jelennek meg.
• További billentyűkódokat találunk a Chrome fejlesztői oldalán.

A WebStorm környezet lehetőséget biztosít többek között töréspontok létrehozására, a program lépésenkénti végrehajtására, változó értékek vizsgálatára, refaktorálásra.

• Run / Debug
• A felső panel jobb oldalán a listában megjelölt elem vizsgálata indítható a bogár ikonra kattintva is.
• Töréspontot a szerkesztőpanel bal oldalán, a sor sorszáma melletti szürke területre kattintva helyezhetünk el. El vörös kör jelenik meg a sor mellett balról.
• Nyomkövetés közben az alsó panel elemeit használhatjuk (Debugger, Console, Elements, Scripts fülek, bal oldali függőleges sáv gombjai, ...).
• Refactor / Rename: egy változó vagy függvény nevét lecserélhetjük.