DevTools’i juhend: veebirakenduste testimise põhivahend
Selles artikklis vaatame, mis on DevTools, milliseid võimalusi need pakuvad ja kuidas neid praktikas veebirakenduste analüüsimiseks kasutada. Arendaja tööriistad on kasulikud mitte ainult QA-inseneridele, vaid ka arendajatele ja Product Manageridele – iga spetsialist leiab DevTools’ist just oma rolli jaoks olulist infot.
DevTools võimaldavad vaadata veebirakenduse „kapoti alla“: näha lehe struktuuri, kasutajaliidese käitumist, võrgupäringuid, vigu, lokaalseid andmeid ning tingimusi, milles toode kasutaja seadmes töötab.
Kellele ja milleks on DevToolsi vaja
DevTools on universaalne meeskonnatöö vahend.
- QA-insenerid kasutavad DevToolsi veebilehe paigutuse ja kuvamise kontrollimiseks, võrgu päringute, vigade, küpsiste ja Local Storage’i analüüsimiseks ning vigade taasesitamiseks.
- Arendajad kasutavad neid rakenduse loogika silumiseks, vigade analüüsimiseks, kasutajaliidese käitumise kontrollimiseks ja muudatuste kiireks testimiseks.
- Product Managerid saavad DevToolsi abil mõista, kuidas toodet laaditakse, kuidas see erinevates seadmetes kuvatakse ning millistes kohtades võivad tekkida jõudluse ja kasutajakogemuse probleemid.
DevTools aitavad kõigil meeskonnaliikmetel rääkida ühist keelt ja leida probleemide põhjuseid kiiremini.
DevTools on sisseehitatud kõikidesse tänapäevastesse veebibrauseritesse (Chrome, Edge, Firefox, Safari) ning nende kasutamiseks ei ole vaja midagi eraldi installida. DevToolsi saab avada, tehes lehel paremklõpsu → Inspect / Inspect Element, või kasutades kiirklahve F12 / Cmd + Option + I (macOS) / Ctrl + Shift + I (Windows).
DevToolsi kasutajaliides koosneb mitmest vahekaardist ehk paneelist. Järgnevalt vaatame lähemalt kõige olulisemaid vahekaarte ja seda, kuidas neid kasutada.
See on eriti oluline veebilehe paigutuse (layout’i) testimisel, disainimakettidega töötamisel ja veebi ligipääsetavuse kontrollimisel.
Elements: responsiivsus ja ekraaniresolutsioonid
DevToolsi abil saab emuleerida erinevaid seadmeid ja ekraani konfiguratsioone:
- nutitelefone ja tahvelarvuteid;
- erinevaid ekraaniresolutsioone ja pikslitihedusi;
- püst- ja rõhtpaigutust.
See on eriti oluline veebilehe paigutuse testimisel, disainimakettidega töötamisel ja veebi ligipääsetavuse kontrollimisel.
Elements: responsiivsus ja ekraaniresolutsioonid
DevToolsi abil saab emuleerida erinevaid seadmeid ja ekraani konfiguratsioone:
- nutitelefone ja tahvelarvuteid;
- erinevaid ekraaniresolutsioone ja pikslitihedusi;
- püst- ja rõhtpaigutust.
See võimaldab kontrollida:
- veebilehe paigutuse responsiivsust;
- elementide korrektset kuvamist;
- menüüde ja interaktiivsete komponentide toimimist;
- horisontaalse kerimise puudumist ja seda, et paigutus ei läheks katki.
Network: võrgupäringute analüüs
Network-vahekaardil kuvatakse kõik võrgupäringud, mida veebirakendus teeb:
- API-päringud;
- piltide, fontide ja stiilifailide laadimine;
- vastuste olekukoodid ja laadimisajad.
Lisaks võimaldab DevTools simuleerida aeglasemat võrguühendust. See aitab:
- kontrollida rakenduse toimimist aeglase internetiühenduse korral;
- testida laadimisindikaatoreid ja laadimise ajal kuvatavaid asenduselemente;
- analüüsida kasutajakogemust ebastabiilse võrguühenduse tingimustes;
- tuvastada jõudlusprobleeme.
Need andmed on olulised, sest annavad tervikliku ülevaate sellest, kuidas rakendus tegelikult taustal töötab. Nende abil saab tuvastada API-vigu ja vastuste olekukoode, leida laadimata ressursse, hinnata veebilehe laadimiskiirust, kiiresti probleemi allika lokaliseerida ning teha põhjendatud otsuseid paranduste kohta. See on oluline nii QA-spetsialistidele, arendajatele kui ka tootejuhtidele.
Cookies ja Local Storage
DevTools annab juurdepääsu andmetele, mida brauser lokaalselt salvestab:
- Cookies – kasutatakse sageli sessioonide, autentimise ja kasutaja seadete haldamiseks;
- Local Storage ja Session Storage – kasutatakse tokenite, lippude ja rakenduse oleku salvestamiseks.
Nende abil saab:
- kontrollida, kas andmed luuakse ja salvestatakse korrektselt;
- andmeid käsitsi muuta või kustutada;
- taasesitada kasutaja esmakordse sisselogimisega seotud stsenaariume;
- testida rakenduse käitumist pärast salvestatud andmete kustutamist.
Console: vead ja rakenduse käitumine
Console-vahekaardil kuvatakse:
- JavaScripti vead;
- hoiatused;
- teated ressurssidega seotud probleemide kohta (fondid, pildid, stiilifailid).
Isegi kui kasutaja ei näe probleemi visuaalselt, viitavad konsoolis kuvatavad vead sageli tegelikele vigadele või võimalikele probleemidele rakenduse töös.
Lighthouse ja ligipääsetavuse põhikontroll
DevToolsis saab kasutada Lighthouse’i, mis analüüsib veebilehte automaatselt erinevate kriteeriumide alusel.
Lighthouse võimaldab teha ligipääsetavuse (accessibility, a11y) põhikontrolli:
- tuvastada kontrastsusega seotud probleeme;
- kontrollida elementide semantikat ehk veenduda, et HTML-i elemente kasutatakse nende otstarbele vastavalt. Näiteks on tegevusnupp määratud <button>-elemendina, mitte <div>-ina, ning lehe pealkiri on määratud <h1>-elemendiga, mitte lihtsalt stiilitud <span>-iga;
- saada soovitusi kasutajaliidese kvaliteedi parandamiseks.
QA-spetsialistidele, arendajatele ja tootejuhtidele on see mugav viis kiiresti hinnata, kas toode vastab ligipääsetavuse põhinõuetele.
Seda on oluline testida, sest ligipääsetavus ei ole pelgalt soovitus, vaid seadusest tulenev nõue. Euroopa ligipääsetavuse õigusakti (European Accessibility Act, EAA) kohaselt peavad alates 28 juunist 2025 Euroopa Liidus pakutavad digitaalsed tooted ja teenused (veebisaidid, veebiteenused, e-kaubandus, pangandus- ja finantsteenused) vastama ligipääsetavuse nõuetele.
Kokkuvõte
DevTools ei ole lihtsalt arendajatele mõeldud tööriist, vaid universaalne veebirakenduste analüüsi- ja testimiskeskkond kogu meeskonnale. See aitab:
- kiiremini vigu leida ja taasesitada;
- kontrollida veebilehe paigutust, responsiivsust ja ligipääsetavust;
- analüüsida võrgupäringuid ja jõudlust;
- paremini mõista, kuidas toode kasutaja jaoks tegelikult toimib.
Seetõttu on DevToolsi kasutamine oluline osa QA-inseneride, arendajate ja tooteotsuseid tegevate spetsialistide väljaõppest.