Som testere er vi vant til å observere og utforske applikasjonene manuelt, og så har vi gjerne automatiserte testscripts som raskt gir tilbakemelding når ny kode har ødelagt tidligere funksjonalitet. Nå kan du med noen enkle triks begynne å dra nytte av informasjon som nettleseren kan gi deg. Merk at ikke alle nettleserne har alt av denne funksjonaliteten, og det kan være betydelige forskjeller mellom dem.
Mange verktøy kun et tastetrykk unna
Du finner utviklerverktøyene i de fleste nettlesere ved å trykke F12-knappen mens du er inne på siden du vil undersøke. Da får du gjerne opp et grensesnitt med flere faner og valgmuligheter. Her du kan du blant annet raskt finne kildekoden til nettsiden du er inne på, følge med på meldinger og feilmeldinger som kommer under kjøringen av koden og en rekke andre nyttige funksjoner. En fin side for å komme i gang er designmodo.com.
Det er meget mye du kan bruke utviklerverkøyet til, her er kun noen få smakebiter.
Automatiserte analyser
Noen av nettleserne har innebygde programmer som kan hjelpe med analyser av nettstedet eller webapplikasjonen. Disse har gjerne en lav terskel for å starte, og krever kanskje litt mer kunnskaper for å evaluere funnene de returnerer.
Brukervennlighet
Innebygd i Chrome og Egde er Lighthouse, et program som er veldig nyttig for analyse av brukervennlighet. Her kan du velge en rekke parametre du ønsker å analysere for, i tillegg til å velge mellom desktop og mobilløsning. Lighthouse er også tilgjengelig som en utvidelse i Firefox.
Ytelse
De fleste større nettleserne vil gi muligheten for å analysere ytelse og responstid. Som regel er det kun å velge «Performance»-fanen og så starte opptaket før du navigerer som vanlig. Opptaket som gjøres vil også inkludere skjermdumper av lastingen og navigasjonen, som ofte kan være nyttig i utforskende testing.
Tekniske tilpasninger
Utviklerverktøyene har utviklet seg mye siden man bare kunne manipulere HTML for å endre på teksten eller endre i CSS for å få ny layout. Nå har man en helt annen mulighet for å se og endre alt fra lokal lagring, cookies og domenemodellen (DOM).
JavaScript i Konsoll-fanen
Fra konsollen vil du kunne lett få tiltak til koden og se hvordan applikasjonen er bygd opp. Hvis applikasjonen benytter JSON, kan du for eksempel enkelt se data i tabellformat ved hjelpe av kommandoen «console.log(tabellnavn)». Spesielt for testing av «single page applications» og applikasjoner som er baserte på JavaScript-rammeverker vil litt koding åpne mange dører for tester rett mot koden. For dere som kan kode i JavaScript kan Console fanen brukes til å lage kode med dine egne variabler og lage mindre programløkker. Se flere nyttige tips på Freecodecamp.org.
Requests i Nettverk-fanen
Mens Nettverk-fanen gjerne er brukt for å se HTTP-trafikken, og eventuel ta skjermdumper, vil flere av utviklerverktøyene tillate å fange requests, endre dem og sende dem på nytt. Dette åpner igjen for å raskt kunne teste inputvarianter.
Edge og Chrome gir ulike valgmuligheter til å fange requests ved å høyreklikke en request under Network-fanen, velge Copy, og deretter hvordan du ønsker å bruke denne.
I Firefox kan du etter å ha høyreklikket på requesten velge «Edit and resend», gjøre endringene du ønsker og deretter sende på nytt.
Ikke bare for utviklere
Utviklerverktøy er med andre ord ikke bare nyttig for utviklere. Som testere er det nå snart bare fantasien som setter grenser for hvordan vi ønsker å bruke dette. I tillegg til å være en fin måte å komme seg ned i koden på, gir utviklerverktøy analyser og muligheter for å endre verdier. Akkurat som andre testverktøy!
Er du interessert i mer faglig fordypning? Sjekk ut våre kurs og workshop i SOCO sin kurskatalog!
