DevTools: cum te uiți în aplicație

Chrome DevTools e inclus în browser și merge pe orice site, inclusiv pe aplicații publicate. Îți arată DOM-ul, request-urile, ce e salvat în browser, cât consumă pagina și ce rămâne în memorie. Angular DevTools e o extensie separată, care adaugă un tab „Angular” cu arborele de componente, profiler-ul, injectorii și rutele.

Pașii de mai jos folosesc numele exacte ale butoanelor din Chrome DevTools, luate din codul lui sursă. Fiecare secțiune are un exercițiu pe care îl poți face chiar pe pagina asta.

Deschide DevTools și găsește orice panou

• Deschizi DevTools cu F12 sau Ctrl+Shift+I (Windows, Linux), respectiv Cmd+Option+I (Mac). Sau click dreapta pe pagină → Inspect.
• Panourile sunt tab-uri sus: Elements, Console, Sources, Network, Performance, Memory, Application. Cele care nu încap sunt sub ».
• Cel mai rapid drum spre orice: meniul de comenzi, cu Ctrl+Shift+P sau Cmd+Shift+P. Scrii „memory” și alegi Show Memory, sau „performance monitor” și alegi Show Performance monitor.
• Esc deschide și închide drawer-ul de jos, cu Console. Așa vezi consola lângă orice alt panou.

Exersează pe pagina asta

Ține DevTools deschis lângă pagină. Fiecare cartonaș spune ce apeși aici și ce cauți acolo.

Elements: ce a randat Angular

Elements arată DOM-ul de acum, nu HTML-ul trimis de server. Câteva lucruri pe care le lasă Angular în el:

• Pe elementul rădăcină (<app-root>) apare atributul ng-version, cu versiunea exactă de Angular. Pe site-ul ăsta: 22.2.2.
• Atributele _nghost-ng-c… și _ngcontent-ng-c… vin din încapsularea stilurilor (modul Emulated). În panoul Styles din dreapta, selectorii arată ca .btn[_ngcontent-ng-c…].
• Comentariile goale <!----> sunt ancorele lui Angular pentru @if, @for și @defer: locul unde inserează sau scoate conținut.
• Elementul selectat e disponibil în Console ca $0. Atributele și textul care se schimbă clipesc o clipă în Elements: așa vezi ce actualizează Angular.

Console: utilitarele ng (doar în development)

În aplicația ta pornită cu ng serve, Angular pune în pagină un obiect global ng. Selectezi un element în Elements, apoi în Console:

// Elements: selectează un element; în Console el e $0 (doar development)
ng.getComponent($0)          // componenta al cărei host e $0
ng.getOwningComponent($0)    // componenta în al cărei template stă $0
ng.getDirectives($0)         // directivele de pe $0
ng.getInjector($0)           // injectorul elementului: .get(UnServiciu)
ng.getListeners($0)          // listenerii puși de Angular pe $0
ng.getRootComponents()       // componentele rădăcină

const c = ng.getComponent($0);
c.count.set(42);             // un semnal se scrie direct; Angular randează singur
c.title = 'Test';            // o proprietate simplă are nevoie de applyChanges
ng.applyChanges(c);

Pe un build de producție aceste funcții nu există. Asta nu e o eroare: sunt eliminate intenționat, ca să nu încarce aplicația.

Network: ce cere aplicația

Network înregistrează doar cât timp e deschis. Dacă îl deschizi după ce pagina s-a încărcat, reîncarcă pagina.

• Filtrele de sus (Fetch/XHR, JS, CSS, Img…) și câmpul de text îți lasă doar request-urile care te interesează.
• Click pe un request: Headers (URL, status, headere), Payload (ce ai trimis), Preview și Response (ce a venit), Initiator (ce cod l-a pornit), Timing (unde s-a dus timpul).
• Keep log (în versiunile mai vechi: Preserve log) păstrează lista la navigare sau reîncărcare. Disable cache ocolește cache-ul cât DevTools e deschis.
• Meniul Throttling simulează o rețea mai lentă: Fast 4G, Slow 4G, 3G sau Offline. Așa vezi skeleton-urile, stările de încărcare și ce se întâmplă fără rețea.

Application: ce ține aplicația în browser

• Storage → Local storage / Session storage → adresa site-ului: cheile și valorile, pe care le poți edita sau șterge.
• Cookies, IndexedDB și Cache storage sunt în același loc. Cache storage e locul unde un Service Worker ține fișierele pentru offline.
• Secțiunea Service workers arată worker-ul activ. Update on reload forțează versiunea nouă la fiecare reîncărcare, iar Bypass for network îl ocolește. Amândouă sunt utile cât lucrezi la el.
• Storage → Clear site data șterge tot ce a salvat site-ul. E cel mai sigur mod de a testa „prima vizită”.

Performance monitor: verificarea rapidă

Înainte de snapshot-uri, uită-te la cifre live:

1. Meniul de comenzi (Ctrl/Cmd+Shift+P) → „performance monitor” → Show Performance monitor. Se deschide jos, în drawer.
2. Urmărește JS heap size, DOM nodes și JS event listeners. Dai click pe un nume ca să-i arăți sau să-i ascunzi graficul.
3. În laboratorul de mai jos, cu reparațiile debifate, apasă Deschide și închide de 10 ori. JS event listeners crește cu 10 și rămâne acolo. Apasă Curăță zombie-urile: scade la loc. Cu toate reparațiile bifate, nu crește deloc.

Memory: un leak găsit pas cu pas

Laboratorul din lecția despre memory leaks, aici, ca să ai ce măsura. Fiecare widget închis cu reparațiile debifate lasă în urmă un timer, un listener și o abonare, care țin componenta în memorie.

Heap snapshot și Comparison

1. Deschide panoul Memory. La Select profiling type alege Heap snapshot.
2. Apasă iconița de coș, Collect garbage, apoi Take snapshot. În stânga apare Snapshot 1.
3. În pagină, cu reparațiile debifate, apasă Deschide și închide de 10 ori și așteaptă să se termine.
4. Din nou Collect garbage și Take snapshot: apare Snapshot 2.
5. Cu Snapshot 2 selectat, schimbă primul meniu din bara de sus din Summary în Comparison. Meniul de lângă arată cu ce compari: Snapshot 1.
6. Scrie în Filter by class numele din tabelul de mai jos și uită-te la coloanele # New și # Delta.
7. Apasă Curăță zombie-urile, fă Snapshot 3 și compară-l cu Snapshot 2: aceleași rânduri apar acum la # Deleted.

Cine ține obiectul: Retainers

Desfă un rând și dă click pe o instanță. Panoul Retainers de jos arată cine o ține în viață: rândurile de sus sunt referințele directe, iar când le desfaci urci pe lanț, spre ceva ce trăiește mult (Window, un listener, un timer). Coloana Distance spune câți pași sunt până la window. Leak-ul e veriga pe care codul tău trebuia s-o rupă la distrugere.

Mai direct: Detached elements

1. În Memory → Select profiling type alege Detached elements.
2. Repetă acțiunea din pagină, apoi apasă Get detached elements.
3. Lista arată elementele scoase din pagină, dar încă referite din JavaScript. Aici: câte un <app-leaky-widget> pentru fiecare widget închis.

Performance: ce se întâmplă în timp

• Record înregistrează cât faci ceva în pagină. Record and reload reîncarcă pagina și înregistrează pornirea.
• Bifează Show memory timeline ca să vezi, pe aceeași axă, heap-ul JS, documentele, nodurile și listenerii. Un leak arată ca o scară care urcă și nu mai coboară.
• În development, Angular poate adăuga o pistă proprie, Angular, cu componente, change detection și hook-uri. O pornești cu ng.enableProfiling() în Console, înainte de Record.

// în Console, în aplicația ta pornită cu ng serve:
ng.enableProfiling();

// sau în main.ts, ca să prinzi și pornirea:
import { enableProfiling } from '@angular/core';

enableProfiling();
bootstrapApplication(App, appConfig);

Angular DevTools

Extensia vede aplicația așa cum o vede Angular: componente, input-uri, semnale, injectori, rute.

1. Instalează Angular DevTools din Chrome Web Store (există și pentru Firefox).
2. Pornește aplicația ta cu ng serve, deschide DevTools și caută tab-ul Angular, eventual sub ». Pe pagina „New tab” a browserului extensiile nu rulează.
3. Pe un build de producție, inclusiv pe site-ul ăsta, vei vedea doar mesajul „We detected an application built with production configuration”. E normal.

• $ng0 în Console e componenta selectată acum în Angular DevTools, $ng1 e cea dinainte.
• Iconița de inspectare din colțul extensiei: treci cu mouse-ul peste pagină și vezi ce componentă e acolo.
• Dublu-click pe o componentă te duce la elementul ei în Elements; iconița din dreapta sus te duce la sursa ei în Sources.
• Show Signal Graph, în capul panoului de proprietăți, desenează semnalele, computed-urile și effect-urile componentei și cine pe cine citește (Angular 19+). Dă-le un debugName ca să aibă nume citibile.

Sursele obișnuite ale leak-urilor și cum închizi fiecare sunt la Memory leaks. Ce faci după ce ai găsit ce e lent, la Performanță și Change detection.

Capcane frecvente

• Cauți numele clasei tale pe un build de producție. Nu e acolo: caută după tag sau după tipuri native, ori pornește aplicația cu ng serve.
• Compari snapshot-uri fără Collect garbage înainte: heap-ul urcă și coboară singur, iar diferențele mici nu înseamnă nimic.
• Repeți acțiunea o singură dată. Un leak e un număr care crește cu același pas la fiecare repetare. Repetă de 10 ori și caută +10.
• Deschizi Network după ce pagina s-a încărcat și crezi că nu s-a cerut nimic. Network înregistrează doar cât e deschis: reîncarcă pagina.

Fișă rapidă

F12 · Ctrl+Shift+I · Cmd+Option+I            deschide DevTools
Ctrl+Shift+C · Cmd+Shift+C                   alege un element din pagină
Ctrl+Shift+P · Cmd+Shift+P                   meniul de comenzi
Esc                                          drawer-ul cu Console

Network       Fetch/XHR · Keep log · Disable cache · Throttling
Application   Storage → Local storage · Service workers · Clear site data
Perf monitor  JS heap size · DOM nodes · JS event listeners
Memory        Heap snapshot → Take snapshot → Comparison → Filter by class
Memory        Detached elements → Get detached elements
Performance   Record · Record and reload · Show memory timeline

doar în development:
  ng.getComponent($0) · ng.applyChanges(c) · ng.enableProfiling()
  Angular DevTools: Components · Profiler · Injector Tree · Router Tree · $ng0