Google Chrome DevTools – gyakorlati útmutató Mi az a Chrome DevTools?A DevTools felépítése és megnyitása Elements panel – HTML és CSS vizsgálata Console – hibák és gyors tesztelés Sources – JavaScript debugolás Network – API hívások és teljesítmény vizsgálata Performance – teljesítmény elemzés alapok Memory panel Application – storage, cookie és cache kezelés Security panel Lighthouse panel Recorder panel Gyakorlati hibakeresési workflow Cheatsheet Összefoglalás

Chrome DevTools

Gyakorlati hibakeresési workflow

Hibatípusonként melyik panelt érdemes megnyitni és milyen lépéseken érdemes végigmenni.

Gyakorlati hibakeresési workflow

Layout hiba

Elements → Inspect
Styles: áthúzott szabályok
Computed: box model

JavaScript hiba

Console: hiba sor/fájl
Sources: breakpoint
Scope/Call Stack ellenőrzés

API hiba

Network → Fetch/XHR
Status code, Headers
Payload + Response

Lassúság

Performance → Reload and record
Long taskok és main thread blokkok
FPS és render szakaszok

Recorder panel

User flow-k rögzítése és visszajátszása bug reprodukcióhoz, QA-hoz és automatizáláshoz.

Cheatsheet

Gyors referencia: panel → feladat, hibatípus → panel, hasznos billentyűparancsok és console trükkök.

On this page

Gyakorlati hibakeresési workflow Layout hiba JavaScript hiba API hiba Lassúság