Bruk Chrome Developer Tools effektivt (tutorial)

Optimaliser nettsidene dine med Chrome Developer-verktøyene

En feilfri nettside som laster superraskt og ser bra ut på alle skjermstørrelser?! For å oppnå dette må du analysere og optimalisere koden på sidene dine. Chrome Developer-verktøyene egner seg utmerket til dette formålet. Med dem kan du finne feil i HTML-, CSS- og JavaScript-koden din. I tillegg kan du få en detaljert oversikt over ytelse, kodeutvikling og minnebruk. Bruk innsikten til å redigere sidene dine målrettet og til slutt øke synligheten til sidene dine gjennom feilsøking og optimalisering.

Hvordan du effektivt bruker Chrome Developer-verktøyene, lærer du i denne over seks timer lange opplæringen fra programvareutvikler og instruktør Stephan Haewß. Begynn med grunnleggende om Chrome DevTools og gå videre med avanserte teknikker – for en ren, kraftig fremvisning av sidene dine!

HTML, CSS, JavaScript – Feilsøking for rene, raske nettsider med optimaliserte layouter

Kurset starter med en introduksjon til Chrome Developer-verktøyene, som er tilgjengelige direkte i nettleseren. Du får vite hva DevTools er og hvordan du kan bruke dem grunnleggende. Deretter dykker du inn i Elementer-fanen, hvor du kan inspisere og redigere styling, layout og utseende på sidene dine. Med områdene Kilder og Konsoll utfører du skriptfeilsøking. I tillegg lærer du hvordan du med Chrome Developer-verktøyene kan utføre nettverksanalyse samt ytelses- og minneoptimalisering. Til slutt får du en oversikt over DevTools i andre nettlesere. Alt i alt passer kurset derfor for alle nettutviklere som ønsker å feilsøke og optimalisere nettsider ved bruk av Chrome DevTools.

Bruk av Chrome DevTools på en effektiv måte – oversikten over innholdet i opplæringen

• Introduksjon til Chrome DevTools: Kurset viser deg hvordan du åpner DevTools, navigerer i dem og bruker de viktigste funksjonene for redigering og feilsøking av HTML, CSS og JavaScript effektivt.
• Feilsøking av HTML og CSS: Hvordan du med Chrome DevTools undersøker DOM-treet på en nettside, redigerer HTML og CSS direkte i sanntid og dermed umiddelbart løser layoutproblemer og CSS-stylingfeil – optimalt for rask testing og justering av designet før endringene blir permanent implementert.
• Feilsøking av JavaScript: Lær hvordan du kan laste JavaScript-filer, sette pauser og stegvis kjøre koden. Variabler og objekter kan undersøkes i sanntid mens CallStack gjør det enklere å spore funksjonsanrop – ideelt for presis feilsøking.
• Bruk av konsollen: Konsollen til Chrome Developer-verktøyene lar deg åpne og analysere logger, kjøre JavaScript-kode, samt direkte manipulere nettsideelementer. Ved hjelp av målrettede loggutskrifter kan du grundig analysere og optimalisere koden, noe som betydelig forenkler feilsøking og ytelsesforbedring.
• Ytelse optimalisering: Sjekk nettverksforespørsler og lastetider, overvåk minnebruk og identifiser minnelekkasjer. Ved å målrettet optimalisere JavaScript-ytelsen og utføre detaljerte applikasjonsytelsesanalyser kan du effektivt forbedre lastetid og ressursstyring.
• Avanserte teknikker: Applikasjonspanelet til Chrome DevTools gir deg tilgang til nettleserlagring som LocalStorage, IndexedDB og Cache, samt administrasjon av tjenestearbeidere og manifest. I tillegg kan utvidelser som React-DevTools integreres for å bedre feilsøke reaktive applikasjoner. Tilpassbare innstillinger gir også en optimal konfigurasjon av DevTools for individuelle arbeidskrav.