Slik får du tilgang til og bruker Chrome-utviklerverktøyene

Chrome Developer Tools (DevTools) føles litt essensielt når du først har blitt vant til det, men i starten kan det være litt overveldende. Spesielt hvis du prøver å rote rundt i koden til et nettsted eller feilsøke problemer uten noen kodebakgrunn. Noen ganger fungerer ikke ting som forventet – kanskje elementene ikke viser riktig stil, eller siden lastes supertreg. Og selvfølgelig er det frustrerende når du ikke finner ut hvordan du åpner det uten å klikke og utforske menyer i all evighet. Heldigvis finnes det noen velprøvde måter å åpne og bruke DevTools på, slik at du ikke må fomle rundt hver gang.

Slik åpner du Chrome Developer Tools – raskt og enkelt

Bruke hurtigtaster

Dette er sannsynligvis den raskeste måten, spesielt hvis du er vant til tastaturkommandoer. På Windows eller Linux trykker du bare på Ctrl + Shift + Cfor å åpne Elementer-fanen og begynne å inspisere ting. Hvis du vil hoppe rett til konsollloggen, trykker du på Ctrl + Shift + J. Og for en generell rask veksling, Ctrl + Shift + Ieller bare trykk på F12. På en Mac? Det er stort sett det samme, men bytt Ctrlmed Commandog Shiftmed Option. For eksempel Command + Option + Cåpner Elements. Noen ganger fungerer ikke dette på første forsøk, spesielt hvis Chrome er sta eller hvis du bruker et merkelig tastaturoppsett – bare prøv igjen eller start Chrome på nytt om nødvendig.

Ærlig talt, disse snarveiene er livreddere – litt rart at de ikke er mer fremtredende, men når du først memorerer dem, går det raskere enn å klikke deg gjennom menyer.

Bruk av Chrome-menyen – ingen snarvei nødvendig

Mindre snikende, men like nyttig, høyreklikk på et hvilket som helst element på en nettside og velg Inspiser. I stedet for å lete gjennom menyer, åpnes DevTools umiddelbart og uthever det elementet i Elementer-fanen. Eller klikk på trepunktsmenyen øverst til høyre i Chrome, gå til Flere verktøy og velg deretter Utviklerverktøy. Denne metoden er bra hvis du ikke liker snarveier eller vil spare litt hjernekraft ved å klikke rundt.

Hvis Chrome ikke åpnes umiddelbart, eller utviklerverktøyene ikke viser det du forventer, bør du dobbeltsjekke at Chrome-nettleseren din er oppdatert. Noen ganger kan feil eller utdaterte versjoner forstyrre funksjonen til utviklerverktøyene.

Få mest mulig ut av Chrome DevTools

Mange utviklere og litt nysgjerrige bruker DevTools til en rekke oppgaver – inspisere HTML-koden på siden, feilsøke JavaScript, sjekke nettverksforespørsler eller til og med teste hvordan siden deres ser ut på forskjellige enheter. Men husk: eventuelle redigeringer du gjør er bare midlertidige. Last inn siden på nytt, og alt tilbakestilles. Likevel er det veldig nyttig for å prøve raske løsninger eller se hva som går galt før du redigerer selve kodebasen.

Det hjelper å bli kjent med kjernefanene:

• Elementer : Vis og rediger sidens HTML/CSS live. Nyttig for raskt å justere stiler eller finne ut hvorfor noe ser rart ut.
• Konsoll : Kjør JavaScript-snutter, vis feilmeldinger eller feilsøk skript. Nyttig hvis JavaScript ikke oppfører seg som det skal, eller du vil prøve ut hurtigreparasjoner.
• Nettverk : Overvåk alle nettverksforespørsler – bilder, skript, fonter osv.– og se hvor lang tid de tar. Bra for å oppdage ressurser som laster sakte eller unødvendige forespørsler.
• Ytelse : Registrer hvordan siden lastes inn og se hvor flaskehalsene er. Chrome må jo gjøre det vanskeligere enn nødvendig.
• Lighthouse : Kjør revisjoner for SEO, ytelse, tilgjengelighet og beste praksis. Litt som en helsesjekk for nettstedet ditt, uten behov for ekstra plugins.

Prøv responsiv designtesting

Vil du se hvordan nettstedet ditt ser ut på telefoner eller nettbrett? Klikk på enhetsknappen (det lille smarttelefonikonet) i DevTools, eller trykk på Ctrl + Shift + M. Du kan velge forhåndsinnstilte enheter fra en rullegardinmeny – som iPhone eller Pixel – eller angi egendefinerte dimensjoner for testing av rare skjermstørrelser. Vanligvis hjelper dette med å oppdage layoutproblemer du kanskje overser på en stor skjerm.

Sjekk nettstedets hastighet og forespørsler

Har du noen gang lurt på hvorfor nettstedet ditt føles tregt? Klikk på Nettverk -fanen, oppdater siden, så ser du alle forespørslene som blir gjort for å laste siden. Se nederst – DOMContentLoaded og Lastetider forteller deg hvor lang tid det tok å laste HTML kontra alt annet. Hvis disse tidene er lange, er kanskje noen bilder for store, eller hosting-en din er treg. Du kan til og med simulere tregere tilkoblinger fra nedtrekksmenyen for begrensning, noe som er nyttig hvis du vil se hvordan den yter på mellomklasseenheter.

Hva med SEO og grunnleggende revisjon?

Et annet verktøy du har i beltet er Lighthouse, som du får tilgang til via menyen (dobbeltpilikonet > Lighthouse ).Kjør en rask SEO-revisjon, ytelsessjekk eller gjennomgang av beste praksis. Det er litt som å gi nettstedet ditt en helserapport. Endre innstillingene slik at de samsvarer med målenheten din, velg kategorier som SEO, og kjør revisjonen. Resultatene tar vanligvis omtrent 30 sekunder, men de kan gi gode tips om hvordan du fikser metatagger, innholdsstruktur eller lasteproblemer.

Profftips: Chromes dokumentasjon ([her](https://developer.chrome.com/docs/devtools/)) er ganske detaljert hvis du vil gå videre utover det grunnleggende.

Alt i alt, når du først har blitt komfortabel med disse alternativene, blir det en selvfølge å bruke DevTools. Det er ikke perfekt – noen ganger er det tregt eller har mange feil – men til syvende og sist er det den raskeste måten å feilsøke og forbedre nettstedet ditt uten å måtte vente på utviklere eller skrive din egen kode fra bunnen av.

Sammendrag

• Tastatursnarveier — Ctrl + Shift + C, Ctrl + Shift + Jog F12— er raske måter å åpne DevTools på.
• Høyreklikk og Inspiser er enkelt for rask elementsjekk.
• Kjernefanene som Elements, Console, Network og Lighthouse er dine beste venner for feilsøking.
• Enhetsveksling hjelper deg med å se hvordan nettstedet ditt ser ut på forskjellige skjermer.
• Nettverksfanen avslører trege ressurser og bidrar til å optimalisere lastetider.

Oppsummering

Å bli kjent med Chrome Developer Tools åpner opp for mange muligheter, enten det gjelder feilsøking eller bare å finne ut hvordan nettsteder bygges. Det kan være litt vanskelig i starten – spesielt på noen oppsett – men når du først har blitt vant til det, sparer det mye tid. Og hei, hvis litt manipulering sparer timer med frustrasjon, er det absolutt verdt det. Krysser fingrene for at dette hjelper noen å komme i gang uten for mye styr.