Recunoaște: Chrome DevTools e tab‑ul pe care îl deschizi cu F12, te uiți rapid la Console, strângi sprâncenele, și îl închizi. Rinse and repeat. Ei bine, ai lăsat pe masă câteva superpowers care îți pot salva, literal, ore de debugging în fiecare săptămână. Dacă ești junior și abia îți construiești toolbox‑ul, sau senior care vrea să-și eficientizeze workflow‑ul — postul ăsta e pentru tine. Shall we?
1. "Logpoints" – console.log fără să modifici codul sursă
Știi cum e: vrei să inspectezi o variabilă din mers, dar nu ai acces la cod sau pur și simplu nu vrei să lași urme. Soluția clasică e să ceri ajutor unui developer sau să intri în cod direct. Există o alternativă elegantă: Logpoints.
În panoul Sources, dai click‑dreapta pe orice număr de linie → Add logpoint → scrii expresia pe care vrei să o loghezi (de exemplu: `user.id, response.status`). DevTools va afișa valoarea în Console fără să pui o singură linie de cod în aplicație. E echivalentul unui console.log invizibil, care dispare la refresh. Un mic detaliu, dar odată ce îl folosești, nu mai poți reveni.
2. Network "Replay XHR" – retrimite un request fără Postman
Postman e minunat — toată lumea știe asta. Dar câteodată vrei să retrimiți rapid un request API chiar din contextul sesiunii active, cu toate cookie‑urile și header‑ele la locul lor, fără să copiezi manual fiecare parametru.
În tab‑ul Network, dai click‑dreapta pe orice request XHR sau Fetch → Replay XHR. DevTools îl retrimite instant, în aceeași sesiune. E util mai ales când testezi scenarii ce depind de un token de autentificare activ sau de un state specific al aplicației — ceva ce Postman reproduce mai greu fără setup suplimentar.
3. Conditional Breakpoints – oprire doar când contează
Breakpoint‑urile obișnuite sunt bune, dar dacă o funcție e apelată de 300 de ori și tu vrei să o inspectezi doar la iterația în care `userId === 42`? Dai click pe fiecare iterație până adormi?
Nu. Click‑dreapta pe numărul de linie → Add conditional breakpoint → introduci condiția ta JavaScript. Execuția se oprește doar când condiția e adevărată. La un proiect enterprise cu fluxuri complexe — să zicem un portal bancar sau un sistem de gestiune din retail — asta e diferența dintre 10 minute de debugging și 2 ore de dat cu capul de masă.
4. Tab‑ul "Changes" – ce a modificat JavaScript‑ul în DOM față de sursa originală
Ai observat vreodată că un element arată diferit față de ce scrie în codul sursă, dar nu poți pune degetul exact pe ce s‑a schimbat? Tab‑ul Changes (îl găsești în meniul cu trei puncte → More tools → Changes) îți arată exact ce modificări a făcut JavaScript‑ul în timp real față de fișierele originale.
E extrem de util când lucrezi cu aplicații heavy în Vue, React sau Angular, unde DOM‑ul e dinamic și e greu de urmărit ce a venit din server și ce a apărut pe client. Bonus: poți folosi aceste informații ca dovezi clare în bug report‑ul din JIRA — "Screenshot + Changes diff" e un combo pe care orice developer îl apreciază.
5. "Sensors" – simulează geolocație și orientare dispozitiv
Testezi o funcționalitate care depinde de locația utilizatorului? Sau vrei să verifici cum se comportă interfața pe un dispozitiv rotit în landscape? Fără un telefon fizic în față, poți simula toate astea direct din DevTools.
More tools → Sensors îți oferă control complet asupra geolocației (poți introduce coordonate exacte sau alege un oraș predefinit), orientării dispozitivului și chiar a touch events. E un truc pe care îl vedem rar menționat la cursuri, dar care devine critic când testezi aplicații pentru energie, ospitalitate sau automotive — domenii în care localizarea utilizatorului chiar contează.
6. Coverage – descoperă codul care nu e testat deloc
Acesta e unul dintre cele mai subestimate tool‑uri din DevTools. Tab‑ul Coverage (More tools → Coverage) îți arată, linie cu linie, ce cod JavaScript și CSS a fost executat în cursul unei sesiuni și ce a rămas neexecutat — marcat cu roșu.
Practic, îți oferă o radiografie a aplicației din perspectiva unui tester: ce fluxuri sunt cu adevărat activate de interacțiunile utilizatorului și ce zone "dorm" neexplorate. Dacă lucrezi alături de echipa de development și vrei să argumentezi de ce anumite test case‑uri noi sunt necesare, un export din Coverage e un argument vizual aproape imposibil de contrazis.
7. Snippets – scripturile tale de testare, mereu la îndemână
Ultimul truc, și poate cel mai productiv pe termen lung: Snippets. Le găsești în Sources → Snippets și îți permit să salvezi bucăți de JavaScript pe care le rulezi ori de câte ori ai nevoie, în orice tab de browser.
Gândește‑te la asta ca la o colecție personală de micro‑scripturi de testare: un snippet care verifică toate câmpurile dintr‑un form, unul care resetează localStorage, altul care simulează un click rapid pe o serie de elemente. Odată salvate, le apelezi cu Ctrl+P → tastezi numele — gata. Dacă lucrezi cu Selenium 4 sau Playwright și vrei să prototipezi rapid un selector înainte să îl bagi în framework, Snippets e locul perfect de experimentat.
De la trucuri izolate la un mindset sistematic
Fiecare dintre cele 7 trucuri de mai sus e util în sine. Dar adevărata valoare apare când le combini și le integrezi într‑un workflow repetat: Logpoints pentru a înțelege starea aplicației, Conditional Breakpoints pentru a intra precis unde trebuie, Coverage pentru a ști ce nu ai testat, Snippets pentru a automatiza pașii repetitivi.
Asta e diferența dintre un tester care "folosește DevTools" și unul care "gândește cu DevTools". Nu e o chestie de seniority — am văzut juniori cu 3 luni experiență care depistau bug‑uri în 10 minute folosind aceste tehnici, și seniori cu ani de experiență care pierdeau ore întregi pentru că nu le știau.
La Academia Testarii, predăm Chrome DevTools ca pe ceea ce este cu adevărat: un instrument de testare de sine stătător, nu un bonus față de "uneltele serioase". L‑am văzut menționat și la A4Q Summit și DevTalks drept una dintre competențele practice cel mai des cerute de angajatori, alături de Postman și SQL.
Dacă vrei să treci de la "știu ce e un bug" la "știu exact unde și de ce apare", cursurile noastre de la academiatestarii.ro sunt construite fix pentru asta: hands‑on, cu exerciții pe aplicații reale, în domenii ca bancar, retail și automotive. 🚀
Aruncă un ochi pe programul complet la academiatestarii.ro — și dacă ai o întrebare despre oricare dintre trucurile de mai sus, scrie‑ne. Abia așteptăm să o discutăm. 😊
#DeAziEstiTester #AcademiaTestarii #SoftwareTesting #TestAutomation #QualityAssurance