Chrome DevTools

Gyakori hibák

Tipikus DevTools hibák: túl sok console.log, Network figyelmen kívül hagyása, CSS kaszkád félreértése, cache és responsive teszt hiánya.

Gyakori hibák

1) Csak `console.log`-ra támaszkodás

komplex hibáknál gyorsabb a breakpoint + Scope/Call Stack

2) Network panel figyelmen kívül hagyása

API gondnál a Network mondja meg, mi történt valójában

3) CSS kaszkád félreértése

.gomb {
  color: red;
}

.form .wrapper .gomb {
  color: blue;
}

4) Rossz breakpoint használat

Ha csak bizonyos eset érdekel, használj conditional breakpointot.

5) Cache / storage problémák kihagyása

Ctrl+Shift+R  – cache nélküli reload
Application → Clear site data – teljes reset

6) Responsive tesztelés kihagyása

sok UI hiba csak mobil nézetben derül ki

7) Incognito kihagyása

storage/cookie gyanúnál Incognito = tiszta állapot

Best practice-ek

Melyik panelhez nyúlj elsőként, tudatos breakpoint használat, storage/cookie ellenőrzés és hasznos hotkey-ek.

Összefoglalás

A DevTools legfontosabb paneljei és hibakeresési aranyszabályai röviden.

On this page

Gyakori hibák 1) Csak console.log-ra támaszkodás 2) Network panel figyelmen kívül hagyása 3) CSS kaszkád félreértése 4) Rossz breakpoint használat 5) Cache / storage problémák kihagyása 6) Responsive tesztelés kihagyása 7) Incognito kihagyása