Utforsk de skjulte juvelene i Chrome DevTools
Chrome DevTools er ofte ansett som en av hovedårsakene til at utviklere foretrekker å holde seg til denne nettleseren. Det er imidlertid lett å bare benytte seg av en liten andel av alle funksjonene, og dermed gå glipp av de mange kraftige verktøyene som tilbys.
La oss derfor se nærmere på noen av de mindre kjente, men likevel svært nyttige funksjonene som finnes i Chrome DevTools.
Uavhengig av operativsystem, maskinvare eller enhetstype, ser det ut til at de fleste bruker Chrome som sin foretrukne nettleser. Det er derfor ingen overdrivelse å hevde at Chrome har vunnet «nettleserkrigen».
Selv Windows-brukere velger ofte Chrome over standardnettleseren, mens Apple-brukere (spesielt de med MacBook og større skjermer) foretrekker Chrome fremfor Safari, til tross for Apples forsøk på å vinne dem over.
Og hvis en enhet ikke kjører Chrome direkte, er det stor sannsynlighet for at den kjører en Chrome-basert versjon som Brave eller Vivaldi. Disse nettleserne er riktignok ikke basert på Chrome rent teknisk sett, men det er et annet tema. Selv om vanlige brukere kan ha ideologiske eller spesielle grunner til å velge andre nettlesere, er det Chrome som dominerer blant utviklere.
Til og med den høye minnebruken til Chrome blir ofte ignorert. Hovedårsaken til dette er de utmerkede Chrome Dev Tools.
Bildekilde: Offisielle Chrome DevTools-dokumenter
Siden du leser denne artikkelen, er det sannsynlig at du er en avansert bruker, en «fikser», webutvikler eller lignende. Derfor er det unødvendig å introdusere DevTools, hvordan du åpner den eller dens funksjoner.
La oss istedenfor gå rett til de mindre kjente, men likevel svært nyttige funksjonene i Chrome DevTools.
Designmodus
En vanlig oppgave for utviklere er å inspisere et element på siden og deretter endre HTML-koden for å forhåndsvise eller teste effekten av en endring.
Direkte redigering av HTML i DevTools kan imidlertid være tungvint. Å navigere i kode, finne riktige åpnings- og sluttkoder, samt håndtere uoversiktlig mellomrom kan være utfordrende. Dette er spesielt problematisk for designere som ønsker å unngå for mye kode.
Her er et skjermbilde fra en av sidene på denne nettsiden (tipsbilk.net):
Den komplekse HTML-koden og de forvirrende CSS-klassene er typiske for de fleste nettsider i dag. Det er her brukeropplevelsen med DevTools ikke er optimal. 🤭
Men det finnes en DevTools-funksjon kalt Design Mode som kan redusere utfordringene i mange tilfeller. Ved å bruke denne modusen (som for øvrig ikke er det offisielle navnet, men et begrep som har oppstått på grunn av hvordan den aktiveres og hva den gjør), kan endringer på siden gjøres visuelt og direkte, omtrent som å redigere et regneark eller en teksteditor. Ulempen er at denne funksjonen ikke er aktivert som standard, og det kan være litt komplisert å aktivere den, spesielt for ikke-utviklere.
Uansett er det ganske enkelt å gjøre det; alt du trenger å gjøre er å følge instruksjonene nedenfor. Avhengig av din erfaring kan dette være enten veldig enkelt eller litt mer utfordrende. Her er fremgangsmåten:
- Sørg for at nettsiden du vil redigere er lastet inn og er den aktive fanen.
- Åpne DevTools-panelet som du vanligvis gjør (snarvei, museklikk etc.). Selv foretrekker jeg hurtigtaster, og på Mac fungerer Opt + Cmd + i.
- Nå, med DevTools åpen, gå til fanen «Konsoll». Noen av dere tenker kanskje at dette er åpenbart, men husk at mange mennesker sliter med å bruke nettleserkonsollen og JavaScript (av ulike årsaker).
- Klikk på den første linjen ved siden av markøren, som da vil bli et tekstfelt hvor du kan skrive JavaScript-kode (se skjermbildet nedenfor).
- Nå må vi skrive litt JavaScript-kode. Ikke bekymre deg, det du må skrive/lime inn er veldig kort og enkelt:
document.designMode = "on". Du kan også kopiere koden fra denne siden (sørg da for at formateringen ikke kopieres, vi trenger kun ren tekst) eller skrive den inn. - Trykk Enter/Retur.
«Er det alt?»
Ja, det er det!
Nå kan du redigere siden som om det var et dokument. Sjekk ut denne videoen der jeg gjør direkte endringer på Spotify-nettsiden ved hjelp av designmodus:
Design Mode er en spennende funksjon, men den er ikke en perfekt løsning. Du kan for eksempel ikke kopiere og lime inn knapper enkelt, eller endre utseende på samme måte som i en mer avansert nettsideredigerer. Sammenlignet med en fullverdig nettsideredigerer, er funksjonaliteten begrenset. Likevel er den nyttig for å endre innhold visuelt og direkte.
Det er ikke umulig at Chrome-utviklerne tester interessen for denne funksjonen. Hvis den blir godt mottatt og mye brukt, er det grunn til å tro at kraftigere redigeringsmuligheter vil komme i fremtiden! 🤞🏻🤞🏻
Simulering av nettverksforhold
Nettverksfanen i Chrome DevTools er kanskje den mest brukte (jeg har ikke data på dette, men som webutvikler bruker jeg Konsoll-fanen kanskje 20-30% av tiden, og Nettverksfanen resten). Den gir oss detaljert informasjon om forespørsler fra siden, type, metadata/headere, status, nedlastingsprogresjon for filer (bilder, stilark etc.), lastetider og så videre. Den store bruken av denne fanen er derfor ikke overraskende.
Likevel er det enkelt å gå glipp av funksjonen vi skal diskutere; du har kanskje ikke lagt merke til en uskyldig nedtrekksmeny som viser «Online».
Hvis du klikker på denne, vil du se en rullegardin med ulike alternativer som lar deg simulere ulike nettverkshastigheter: Rask 3G, Sakte 3G, Frakoblet osv. Selv om det er flere bruksområder for dette, er den vanligste å teste nettsidens ytelse på trege nettverk eller webappens oppførsel når den er frakoblet (forutsatt at denne funksjonaliteten er implementert).
La oss prøve dette. Jeg setter nettverket til «Sakte 3G» og laster inn den samme siden som tidligere. Før jeg gjør det, legg merke til hvordan de fleste elementene i skjermbildet ble lastet inn på under 100 millisekunder med min nåværende nettverksforbindelse (40 Mbps bredbånd).
Nå skal vi se hva treg 3G gjør med det.
For en forskjell!
Legg merke til at lastetiden for elementene nå er mellom 5-10 sekunder. I tillegg tok det 17,25 sekunder før hele siden var lastet inn! Ja, jeg vet hva du tenker, men husk at det kan ta flere sekunder å laste en moderne nettside på et tregt 3G-nettverk. Om du ønsker raskere lastetid på trege nettverk er en annen sak, og dette er ofte en forretningsavgjørelse der gevinsten må rettferdiggjøre innsatsen.
Legg også merke til advarselsikonet på fanen Nettverk i skjermbildet ovenfor. Det er Chromes måte å minne deg på at du har gjort en uvanlig, vedvarende endring, og at du bør tilbakestille den hvis du ikke er sikker på hva du gjør.
Interaktiv fargevelger
Vi inspiserer ofte DOM-elementer i DevTools. Vi er også vant til CSS-informasjonen som vises ved siden av, og at vi kan redigere den og se resultatene med en gang.
En liten, men praktisk funksjon er at hvis du klikker på en CSS-fargeegenskap, vil et kjent fargevelgergrensesnitt dukke opp!
Legg merke til at det ikke er en enkel fargevelger. Den lar deg kontrollere gjennomsiktighet, endre fargesystemer, velge en farge direkte fra siden og mye mer.
Så neste gang du for eksempel eksperimenterer med aksentfargene på en nettside, trenger du ikke gjette eller prøve å finne den riktige verdien for fargenyansen du ønsker. For de som liker å designe nettsider direkte i nettleseren, er dette en kjærkommen funksjon! 🙂
Overvåking av hendelser på sideelementer
Ofte ønsker vi å vite hva som skjer med et spesifikt element. Dette er spesielt sant når du bruker jQuery i en kompleks kodebase – enten det er din egen eller andres. Hendelseshåndterere og logikk er ofte spredt utover, og det kan være et mareritt å spore en feil.
Heldigvis har Chrome DevTools en hendig funksjon for dette. Den overvåker det angitte elementet for deg og logger hendelsene i konsollen. Dessverre har ikke denne funksjonen støtte for elementvalg basert på CSS-klassenavn, så jQuery-metoden $(“#email”) er ikke tilgjengelig. 🙂
La oss likevel se hvordan du kan bruke den. Vi starter med å «inspisere elementet» ved hjelp av DevTools inspektørverktøyet. Ja, det er det samme inspeksjonsverktøyet vi bruker hver dag.
I skjermbildet nedenfor har jeg brukt inspektørverktøyet for å markere et tekstfelt. Med «markering» mener jeg at jeg har klikket på tekstfeltet med inspektørmarkøren, og den tilhørende HTML-koden i DevTools er uthevet.
Når du har gjort dette, er det valgte elementet klart for overvåking, og det er tilgjengelig som en spesiell JavaScript-variabel som heter $0. Deretter må du passe på at du ikke klikker andre steder i nettleservinduet, (spesielt ikke i HTML-kodedelen), klikker på konsollen og legger til en hendelseslytter for dette tekstfeltet. Det eneste du trenger for dette er en linje med kode: monitorEvents($0, "mouse"). "mouse"-delen her sier til Chrome at vi kun er interessert i musebaserte hendelser.
Så snart du trykker Enter/Return, aktiveres overvåkingen, og hvis du nå beveger musen over eller klikker på teksten, logges disse hendelsene i konsollen som JavaScript-objekter:
Som du ser på skjermbildet, ble flere musehendelser registrert da jeg klikket på elementet, skrev inn navnet mitt og deretter flyttet musen bort (skrivehendelsene, som var tastaturhendelser, ble ikke logget). Hendelsene er JavaScript-objekter, og hvert objekt inneholder en enorm mengde informasjon. Jeg utvidet for eksempel hendelsesobjektet «klikk», og antallet egenskaper passet ikke engang i et enkelt skjermbilde!
Jeg anbefaler sterkt at du prøver denne funksjonen. Den vil garantert spare deg for mye frustrasjon i fremtidige prosjekter!
Nettsidens ytelsesrapporter
I dag kan ytelsen til en nettside være avgjørende for en virksomhets suksess. Selv en liten forbedring i ytelse kan gi store SEO-gevinster og økt brukertilfredshet. Men hvordan finner du ut hvilke deler av nettsiden din som trenger oppmerksomhet, og hvilke som allerede er gode?
Må du ansette et team av eksperter og vente tålmodig i noen dager?
Vel, i noen tilfeller er det nødvendig, men heldigvis har Chrome DevTools en funksjon som dekker behovet for mange av oss. I de nyeste versjonene av Chrome (sent 2020) finner du en «Lighthouse»-fane i DevTools. Tidligere ble den kalt «Audits», og forvirrende nok er det navnet du fortsatt finner i de offisielle dokumentene. Uansett, poenget er at Lighthouse tidligere var en populær nettside for å sjekke nettsidens ytelse gratis, men Google fjernet den senere (uten å oppgi noen grunn). Heldigvis dukket den samme kraftige funksjonaliteten opp igjen i DevTools.
For å generere en resultatrapport, trenger du bare å trykke på en knapp etter at siden du er interessert i, er lastet inn:
Som du ser på høyre side i skjermbildet, er det noen få alternativer for å kontrollere hvor mye informasjon du vil ha (og hva du vil teste for). Når du er fornøyd med innstillingene, trykk på den store blå knappen, len deg tilbake og slapp av. Etter noen sekunder vil du få en detaljert rapport som ser omtrent slik ut:
Tallene du ser i skjermbildet over viser den totale poengsummen for hver kategori. Kategorien for Progressive Web Apps (PWA) er nedtonet, sannsynligvis fordi denne nettsiden ikke har noen PWA-funksjoner. Som du ser på rullefeltet til høyre, er rapporten ganske lang.
Slik ser en del av ytelsesdelen ut:
Jeg vil ikke påstå at Lighthouse og dens forslag er den endelige sannheten for nettsideytelse, men den er ekstremt nyttig. Det er fordi nettsideeiere og utviklere sjelden har en anelse om hvilke problemer som eksisterer, og hvordan de skal løse dem.
Ærlig talt, selv jeg føler meg usikker som webutvikler, siden ytelse og testing ofte er egne spesialområder. Derfor er Lighthouse et lite kjent, undervurdert verktøy som nå er en del av Chrome DevTools, og som er til stor hjelp for både bedriftseiere og utviklere/systemadministratorer.
Kode redigering
Kilder-fanen i DevTools gir oss tilgang til ulike filer lastet av nettsiden. Den har også funksjoner for koderedigering, lagring av kodebiter osv. Dette er ikke overraskende for webutviklere. Men DevTools har også noen praktiske funksjoner som gjør livet lettere for utviklere som er vant til sine favorittkode-IDE-er.
DevTools bruker noen kjente hurtigtaster som sparer tid og reduserer frustrasjon ved koding. For eksempel kan Ctrl + D (eller Cmd + D på Mac) brukes til å markere flere forekomster av et ord. Hvis du holder Ctrl (eller Cmd på Mac) og klikker flere steder i koden, får du flere markører. Se videoen nedenfor for å få en bedre forståelse:
Hvis du synes dette er nyttig, bør du sjekke ut de offisielle dokumentene for å lære mer om koderedigeringsfunksjonene i DevTools.
Kontroller DOM-elementers tilstand
Noen ganger tester eller feilsøker vi noe, men den ønskede atferden er bare tilgjengelig i en bestemt elementtilstand. Avhengig av tilstanden, kan det være en vanskelig oppgave å feilsøke. For meg er «hover»-tilstanden den vanskeligste, da jeg har brukt utallige minutter på å prøve å trigge hover-effekten eller legge til ekstra, midlertidig CSS.
Heldigvis har Chrome DevTools en enkel måte å endre tilstanden til et inspisert element på. Du finner denne muligheten ved å høyreklikke på elementet (i Elementer-fanen), men det er lett å overse dette på grunn av alle funksjonene og stresset ved en arbeidsdag.
Ja, det er så enkelt!
Nå trenger du ikke å legge inn betinget testlogikk i koden din, skrive ekstra CSS eller gjøre andre vanskelige ting for å observere et element i en annen tilstand.
Verktøy-panelet
Sist, men ikke minst, på denne listen er Verktøy-panelet. Det er en annen utrolig nyttig funksjon som er godt gjemt og bare kan ses ved hjelp av hurtigtaster. Som navnet antyder, er Verktøy-panelet ikke et enkelt verktøy, men et slags dashbord hvor nesten alle DevTools-funksjoner er tilgjengelige. Siden det finnes så mange funksjoner, er det også en søkelinje øverst.
For å aktivere Verktøy-panelet, må du være i DevTools-panelet og deretter trykke Ctrl + Shift + P (eller Cmd + Shift + P for Mac-brukere):
Verktøy-panelet er fullt av muligheter og overraskelser. Visste du for eksempel at du kunne ta et skjermbilde direkte fra DevTools?
Sannsynligvis ikke, fordi du må starte verktøy-panelet og skrive «skjermbilde» i søkefeltet for å finne det:
Du vil også legge merke til flere alternativer for å ta skjermbilder, inkludert et for den valgte DOM-noden! Utforsk Verktøy-panelet, og du vil ikke bli skuffet!
Hvis du trenger å ta et skjermbilde av en hvilken som helst nettside eksternt, kan du sjekke ut tipsbilk.net sitt skjermbildeverktøy.
Konklusjon
Chrome-nettleseren er i seg selv funksjonsrik, men det er DevTools som virkelig skiller den ut. Som vi har sett i denne artikkelen, finnes det mange godt gjemte funksjoner – og andre som er lett å overse – som de fleste brukere ikke vet om. Hvorfor er disse funksjonene gjemt?
Jeg antar at noen av dem er veldig eksperimentelle (som designmodus), og at Chrome-utviklerne vil gjøre det vanskelig for vanlige brukere å finne dem. For de andre funksjonene tror jeg det handler om informasjonsoverbelastning. Med 120 funksjoner, noen med underfunksjoner osv., er det vanskelig å designe et brukervennlig grensesnitt. I tillegg har Google historisk sett ikke vært de beste på brukeropplevelse, så det er kanskje ikke så overraskende. 🤷🏻♂️
Uansett, jeg håper du fant noen av disse funksjonene nyttige. Og enda viktigere, jeg håper denne artikkelen har gitt deg en følelse av hva som finnes, slik at du vet hvor du skal lete neste gang du trenger å «grave dypt» etter noe spesielt. 😆