DevTools, IDE Debugging, Breakpoint, Watch

Ez azt jelenti, hogy nemcsak console.log()-ot használ a hibakereséshez, hanem tudatosan alkalmazza a fejlesztőkörnyezet (IDE, pl. VS Code, WebStorm) beépített debugger eszközeit is, például:

🔍 1. Breakpoint használata

Megállítja a futást egy adott soron.
Ott vizsgálhatók a változók értékei, elágazások, async folyamatok.

👉 Pl. Angular komponens .ts fájlban kattintasz a sorszám mellé → piros pötty lesz → ng serve alatt böngészőben F12 > Sources vagy sima Node futtatásnál a debugger automatikusan megáll ott.

🧠 2. Watch expressions (Figyelt kifejezések)

Beírod: this.data.length > 0 → debugger figyeli az értékét.
Jó komplex állapotok, RxJS streamek követéséhez.

⏭️ 3. Step over / into / out

Lépésenként végignézi a kódot:
- Step over: következő sorra ugrik.
- Step into: belemegy a függvénybe.
- Step out: kilép a jelenlegi függvényből.

💡 Példa: Angular komponensben

ngOnInit(): void {
  this.myService.getData().subscribe((data) => {
    this.data = data; // << ide breakpoint
  });
}

Breakpoint után: figyeld data, this.data, this.loading változókat → így valós időben látod, mikor és hol megy félre valami.

🛠️ VS Code tippek

Run and Debug menüpont → válaszd ki: Chrome, Edge, vagy Node
launch.json konfiguráció (Angular esetén):

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:4200",
  "webRoot": "${workspaceFolder}"
}

✅ Összefoglalva

Eszköz	Mire jó
Breakpoint	Megáll a futás a kódsoron
Watch	Változók, kifejezések követése
Step over/into/out	Kódlépések ellenőrzése
Debug konzol	Objektumok vizsgálata

Ha szeretnéd, segítek konkrét Angular projekthez launch.json-t vagy beállítani debug sessiont.