Learning
Chrome DevTools

Best practice-ek

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

Best practice-ek

Az első lépés mindig a Console

Ha van error, az általában már megadja a helyet és a kontextust.

API hibánál: Network

Találgatás helyett: státuszkód → response body → konkrét hiba.

CSS hibánál: Elements

Nézd meg, mi aktív és mi van felülírva.

Breakpointot tudatosan

  • kevés, jól elhelyezett breakpoint
  • ha kell: conditional breakpoint

Panel választó gyors tábla

JavaScript hiba        Console → Sources
API kommunikáció       Network
CSS / layout           Elements
Auth / session         Application
Teljesítmény           Performance
Mobilnézet             Responsive mód

Hasznos billentyűparancsok

Ctrl+Shift+I  – DevTools
Ctrl+Shift+J  – Console
Ctrl+Shift+C  – Elem kijelölés
Ctrl+Shift+M  – Responsive mód
Ctrl+R        – Reload
Ctrl+Shift+R  – Hard reload (cache nélkül)
Esc           – Console fel/le

On this page