Chrome DevTools: Elements, Console og Network
Naviger i panelene Elements, Console og Network for å inspisere stiler, feilsøke JavaScript-feil og overvåke HTTP-forespørsler.
Chrome DevTools: Elements, Console og Network er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Åpne DevTools effektivt
Høyreklikk på et element og velg Inspect for å åpne DevTools med elementet valgt. F12 viser eller skjuler panelet. Cmd+Shift+C (Mac) eller Ctrl+Shift+C (Windows) aktiverer inspeksjonsmodus direkte uten å åpne hele panelet.
Elements-panelet – DOM-inspektør
Elements-panelet viser det aktive, analyserte DOM-treet – ikke den rå HTML-kilden. Det gjenspeiler endringer som er gjort med JavaScript. Hold markøren over noder for å fremheve dem på siden. Dobbeltklikk for å redigere HTML direkte.
Styles- og Computed-rutene
Når et element er valgt, viser Styles-ruten alle anvendte CSS-regler sortert etter spesifisitet. Regler med gjennomstreking er overstyrt. Computed-ruten viser de endelig beregnede verdiene for hver egenskap.
Tvinge frem elementtilstander
Klikk på :hov-knappen i Styles-ruten for å tvinge frem en CSS-tilstand som :hover, :focus, :active eller :visited. Inspiser hover-stiler uten å måtte holde markøren helt stille.
Visualisering av boksmodellen
Computed-ruten viser et interaktivt diagram over boksmodellen: innhold, padding, kantlinje og marg. Hold markøren over hver del for å se verdien. Klikk for å redigere marg- og paddingverdier direkte.
Grunnleggende om Console – loggføring og kjøring av kode
Console viser feil, advarsler og logger. Skriv inn et hvilket som helst JavaScript-uttrykk og trykk Enter for å evaluere det mot den aktive siden. Bruk Console som en interaktiv REPL for å teste kodebiter umiddelbart.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Metoder i Console-API-et
I tillegg til console.log: console.warn() (gul advarsel), console.error() (rød), console.table() (viser en tabell for en tabell eller et objekt), console.group() / console.groupEnd() for gruppert utskrift og console.time() for tidsmåling.
Oversikt over Network-panelet
Alle HTTP-forespørsler (HTML, JS, CSS, bilder, XHR, Fetch) vises som en rad. Kolonnene viser metode, status, størrelse og tidsbruk. Klikk på en rad for å se fullstendige detaljer om forespørselen og svaret.
Filtrere nettverksforespørsler
Bruk filterfeltet til å søke etter URL eller filtrere etter type: All, XHR/Fetch, JS, CSS, Img, Media, Font, WS. XHR/Fetch-filteret er mest nyttig når du feilsøker API-kall fra JavaScript.
Inspisere forespørsel og svar
Velg en nettverksforespørsel for å se: Headers (forespørsels- og svarhoder), Preview (formatert JSON/HTML), Response (rådatainnhold) og Timing (tilkoblingsfaser). Payload-fanen viser parametere i POST-innholdet.
Begrensning – simulere trege nettverk
Klikk på rullegardinmenyen for begrensning (standard: No throttling) for å simulere Slow 3G, Fast 3G eller Offline. Avmerkingsboksen Disable cache hindrer nettleseren i å bruke bufrede ressurser under testing.
Kunnskapssjekk
Hvor i Chrome DevTools kan du se alle CSS-reglene som er brukt på et valgt element, inkludert overstyrte regler?
Oppsummering: Panelene i Chrome DevTools
Elements: Inspiser og rediger det aktive DOM-treet og CSS-en. Tving frem pseudotilstander for å inspisere hover-stiler. Console: Loggfør, feilsøk og kjør JS direkte. Network: Overvåk alle HTTP-forespørsler, inspiser hoder og svar, og begrens hastigheten for å simulere trege forbindelser.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Chrome DevTools: Elements, Console og Network» gratis?
Ja – hele teksten i «Chrome DevTools: Elements, Console og Network» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Chrome DevTools: Elements, Console og Network»?
Naviger i panelene Elements, Console og Network for å inspisere stiler, feilsøke JavaScript-feil og overvåke HTTP-forespørsler. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Chrome DevTools: Elements, Console og Network»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Chrome DevTools: Elements, Console og Network
- VSCode: utvidelser, Emmet og hurtigtaster
- Oppsett av Prettier og ESLint
- Nettleserkompatibilitet og caniuse.com