Debugging cu DevTools
Panourile Chrome DevTools, console, breakpoints și cum citești o eroare.
Actualizat
Ce înseamnă debugging
Debugging = găsirea cauzei unui bug. Cea mai frecventă greșeală: să ghicești și să schimbi cod la întâmplare până „merge”. Metoda corectă e să observi ce face codul de fapt — iar instrumentul principal e Chrome DevTools (F12 / ⌥⌘I).
Panourile DevTools — ce face fiecare
| Panou | La ce te ajută |
|---|---|
| Elements | DOM-ul real și CSS-ul aplicat: ce regulă câștigă, de unde vine, box model; editezi live |
| Console | erori, console.log, rulezi JS în contextul paginii |
| Sources | codul + breakpoints: oprești execuția și inspectezi variabilele |
| Network | toate request-urile: status, headere, body, timp, cache, cookie-uri |
| Application | cookie-uri, localStorage, sessionStorage, IndexedDB, service workers |
| Performance | înregistrezi o interacțiune și vezi ce durează (JS, layout, paint) |
| Lighthouse | audit automat: performanță, accesibilitate, SEO |
Plus extensia React DevTools: arborele de componente, props, state, și Profiler (ce componente se re-randează și de ce).
Console — mai mult decât console.log
| Metodă | Când |
|---|---|
console.log({ user, cart }) |
cu acolade — vezi și numele variabilelor |
console.table(users) |
array de obiecte ca tabel |
console.error / console.warn |
apar colorate, cu stack trace |
console.time('x') / console.timeEnd('x') |
cât durează o bucată de cod |
console.trace() |
cine a apelat funcția |
$0 în consolă |
elementul selectat în Elements |
Breakpoints — unealta pe care puțini o folosesc
În loc de 10 console.log, oprești codul exact unde vrei:
| Tip | Cum |
|---|---|
| line breakpoint | click pe numărul liniei în Sources |
debugger; |
scris în cod — se oprește acolo cât DevTools e deschis |
| conditional | click dreapta → „Add conditional breakpoint” → id === 42 |
| pe eveniment | Sources → Event Listener Breakpoints → click |
| pe request | „XHR/fetch breakpoints” — oprește când se cere un URL |
| pe excepții | „Pause on exceptions” — oprește exact unde a apărut eroarea |
Când e oprit: vezi toate variabilele din scope, call stack-ul (cine a apelat pe cine) și avansezi pas cu pas (step over / into / out).
Cum citești o eroare
TypeError: Cannot read properties of undefined (reading 'name')
at UserCard (user-card.tsx:12:24)
at renderWithHooks (react-dom.development.js:...)
- Tipul (
TypeError) și mesajul: ai citit.namedintr-o valoareundefined. - Primul rând din codul tău din stack:
user-card.tsx, linia 12, coloana 24 — acolo începi. - Întrebarea: de ce e
undefinedaici? — breakpoint pe linia 12, uită-te la valori.
Metoda, în 5 pași
- Reproduce bug-ul sigur, cu pași clari.
- Izolează: unde e diferența dintre ce aștepți și ce se întâmplă? (Network: datele vin greșit? Elements: CSS-ul e altul?)
- Formulează o ipoteză și verifică-o cu breakpoint / log — nu schimba cod la întâmplare.
- Repară cauza, nu simptomul.
- Scrie un test ca bug-ul să nu revină — vezi Testare.
Pe scurt
- Elements pentru DOM și CSS, Network pentru request-uri, Application pentru storage, Sources pentru breakpoints.
- Breakpoints (inclusiv condiționale și pe excepții) în loc de zeci de
console.log. - Citește eroarea: tip, mesaj, primul rând din codul tău.