Chrome DevTools: Elements, Console og Network
Navigér i panelerne Elements, Console og Network for at inspicere typografier, fejlfinde JavaScript-fejl og overvåge HTTP-anmodninger.
Chrome DevTools: Elements, Console og Network er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Åbn DevTools effektivt
Højreklik på et element, og vælg Inspect for at åbne DevTools med elementet valgt. F12 viser eller skjuler panelet. Cmd+Shift+C (Mac) eller Ctrl+Shift+C (Windows) åbner inspektionstilstanden direkte uden at åbne hele panelet.
Elementpanelet — DOM-inspektør
Elementpanelet viser det aktive, fortolkede DOM-træ — ikke den rå HTML-kilde. Det afspejler ændringer foretaget med JavaScript. Hold markøren over noder for at fremhæve dem på siden. Dobbeltklik for at redigere HTML direkte.
Ruderne Typografier og Beregnede værdier
Når et element er valgt, viser ruden Typografier alle anvendte CSS-regler sorteret efter specificitet. Gennemstregede regler er tilsidesat. Ruden Beregnede værdier viser de endeligt beregnede værdier for hver egenskab.
Tving elementtilstande
Klik på knappen :hov i ruden Typografier for at tvinge en CSS-tilstand som :hover, :focus, :active eller :visited. Undersøg typografier for markørens placering uden at skulle holde markøren helt stille.
Visualisering af boksmodellen
Ruden Beregnede værdier viser et interaktivt diagram over boksmodellen: indhold, indvendig margen, kant og udvendig margen. Hold markøren over hvert område for at se dets værdi. Klik for at redigere værdierne for udvendig og indvendig margen direkte.
Grundlæggende om konsollen — logning og kørsel af kode
Konsollen viser fejl, advarsler og logmeddelelser. Skriv et JavaScript-udtryk, og tryk på Enter for at evaluere det på den aktive side. Brug konsollen som en interaktiv REPL til straks at afprøve kodestykker.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Konsollens API-metoder
Ud over console.log: console.warn() (gul advarsel), console.error() (rød), console.table() (viser et array eller objekt som en tabel), console.group() / console.groupEnd() til grupperede resultater og console.time() til tidsmåling.
Oversigt over netværkspanelet
Hver HTTP-anmodning (HTML, JS, CSS, billeder, XHR, Fetch) vises som en række. Kolonnerne viser metode, status, størrelse og tidsmåling. Klik på en række for at se alle detaljer om anmodningen og svaret.
Filtrering af netværksanmodninger
Brug filterlinjen til at søge efter en URL eller filtrere efter type: Alle, XHR/Fetch, JS, CSS, billeder, medier, skrifttyper, WS. Filteret XHR/Fetch er mest nyttigt, når du fejlsøger API-kald fra JavaScript.
Undersøgelse af anmodning og svar
Vælg en netværksanmodning for at se: Overskrifter (anmodning og svar), Forhåndsvisning (formatteret JSON/HTML), Svar (rå brødtekst) og Tidsmåling (forbindelsesfaser). Datafanen viser parametre i POST-brødteksten.
Hastighedsbegrænsning — simulering af langsomme netværk
Klik på rullemenuen for hastighedsbegrænsning (standard: Ingen begrænsning) for at simulere Langsom 3G, Hurtig 3G eller en internetforbindelse uden netværk. Afkrydsningsfeltet Deaktivér cache forhindrer browseren i at bruge cachrede ressourcer under afprøvning.
Hurtigt tjek
Hvor i Chrome DevTools kan du se alle CSS-regler, der anvendes på et valgt element, inklusive de tilsidesatte?
Opsummering: Chrome DevTools-paneler
Elementer: Undersøg og rediger det aktive DOM og CSS. Tving pseudotilstande for at undersøge typografier ved markørens placering. Konsol: Log, fejlsøg, og kør JS direkte. Netværk: Overvåg alle HTTP-anmodninger, undersøg overskrifter og svar, og begræns hastigheden for at simulere langsomme forbindelser.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Chrome DevTools: Elements, Console og Network” gratis?
Ja — hele teksten til “Chrome DevTools: Elements, Console og Network” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Chrome DevTools: Elements, Console og Network”?
Navigér i panelerne Elements, Console og Network for at inspicere typografier, fejlfinde JavaScript-fejl og overvåge HTTP-anmodninger. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Chrome DevTools: Elements, Console og Network”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Chrome DevTools: Elements, Console og Network
- VSCode: Udvidelser, Emmet og genveje
- Opsætning af Prettier og ESLint
- Browserkompatibilitet og caniuse.com