Chrome DevTools: Elements, Console och Network
Navigera i panelerna Elements, Console och Network för att inspektera format, felsöka JavaScript-fel och övervaka HTTP-begäranden.
Chrome DevTools: Elements, Console och Network är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Öppna DevTools effektivt
Högerklicka på valfritt element och välj Inspect för att öppna DevTools med elementet markerat. F12 visar eller döljer panelen. Cmd+Shift+C (Mac) eller Ctrl+Shift+C (Windows) aktiverar inspektionsläget direkt utan att öppna hela panelen.
Elements-panelen – DOM-inspektör
Elements-panelen visar det aktuella, tolkade DOM-trädet – inte den oförändrade HTML-källan. Den återspeglar ändringar som gjorts med JavaScript. Hovra över noder för att markera dem på sidan. Dubbelklicka för att redigera HTML direkt i panelen.
Panelerna Styles och Computed
När ett element är markerat visar panelen Styles alla tillämpade CSS-regler sorterade efter specificitet. Genomstrukna regler har åsidosatts. Panelen Computed visar de slutliga beräknade värdena för varje egenskap.
Tvinga elementtillstånd
Klicka på knappen :hov i panelen Styles för att tvinga fram ett CSS-tillstånd som :hover, :focus, :active eller :visited. Inspektera hover-stilar utan att behöva hålla pekaren helt stilla.
Visualisera boxmodellen
Panelen Computed visar ett interaktivt diagram över boxmodellen: innehåll, padding, kantlinje och marginal. Hovra över varje område för att se dess värde. Klicka för att redigera marginal- och paddingvärden direkt.
Grunderna i Console – logga och kör kod
Console visar fel, varningar och loggar. Skriv valfritt JavaScript-uttryck och tryck på Enter för att utvärdera det mot den aktuella sidan. Använd Console som en interaktiv REPL för att testa kodfragment direkt.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Metoder i Console-API:t
Utöver console.log: console.warn() (gul varning), console.error() (rött fel), console.table() (visar en array eller ett objekt som en tabell), console.group() / console.groupEnd() för grupperade utdata samt console.time() för tidtagning.
Översikt över Network-panelen
Varje HTTP-begäran (HTML, JS, CSS, bilder, XHR, Fetch) visas som en rad. Kolumnerna visar metod, status, storlek och tidsåtgång. Klicka på en rad för att se fullständig information om begäran och svaret.
Filtrera nätverksbegäranden
Använd filterfältet för att söka efter URL eller filtrera efter typ: All, XHR/Fetch, JS, CSS, Img, Media, Font, WS. Filtret XHR/Fetch är mest användbart när Ni felsöker API-anrop från JavaScript.
Inspektera begäran och svar
Välj en nätverksbegäran för att se: Headers (begärans- och svarshuvuden), Preview (formaterad JSON/HTML), Response (rått innehåll) och Timing (anslutningens olika faser). Fliken Payload visar parametrarna i POST-innehållet.
Begränsa nätverkshastigheten – simulera långsamma nätverk
Klicka på rullgardinsmenyn för nätverksbegränsning (standard: No throttling) för att simulera Slow 3G, Fast 3G eller Offline. Kryssrutan Disable cache hindrar webbläsaren från att använda cachade resurser under testningen.
Snabbkontroll
Var i Chrome DevTools kan Ni se alla CSS-regler som tillämpas på ett markerat element, inklusive de som har åsidosatts?
Sammanfattning: Chrome DevTools-paneler
Elements: inspektera och redigera den aktuella DOM-strukturen och CSS. Tvinga fram pseudotillstånd för att inspektera hover-stilar. Console: logga, felsök och kör JavaScript direkt. Network: övervaka alla HTTP-begäranden, inspektera huvuden och svar samt begränsa hastigheten för att simulera långsamma anslutningar.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Chrome DevTools: Elements, Console och Network” gratis?
Ja – hela texten till ”Chrome DevTools: Elements, Console och Network” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Chrome DevTools: Elements, Console och Network”?
Navigera i panelerna Elements, Console och Network för att inspektera format, felsöka JavaScript-fel och övervaka HTTP-begäranden. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Chrome DevTools: Elements, Console och Network”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Chrome DevTools: Elements, Console och Network
- VSCode: tillägg, Emmet och kortkommandon
- Konfigurera Prettier och ESLint
- Webbläsarkompatibilitet och caniuse.com