Utvecklarverktyg: öppna och använda DevTools

Alla moderna webbläsare levereras med en inbyggd uppsättning utvecklarverktyg. DevTools låter dig inspektera HTML och CSS, felsöka JavaScript, analysera prestanda, övervaka nätverksbegäranden och mycket mer — allt utan att lämna webbläsaren.

Öppna DevTools med F12 (Windows/Linux) eller Cmd+Option+I (Mac). Du kan också högerklicka på valfritt element och välja Inspect. Kortkommandot Ctrl+Shift+J / Cmd+Option+J öppnar konsolen direkt.

Panelen Elements visar det aktuella DOM-trädet. Klicka på ett element för att välja det och se dess beräknade stilar i panelen Styles. Du kan dubbelklicka för att redigera HTML eller CSS-värden i realtid — ändringarna visas direkt men sparas inte i filen.

I panelen Styles klickar du på valfritt egenskapsvärde för att ändra det. Lägg till nya regler med +-knappen. Använd kryssrutorna för att inaktivera regler. Det här är det snabbaste sättet att prototypa CSS utan att växla till din editor.

Console visar loggade meddelanden, varningar och fel. Du kan också skriva JavaScript direkt och köra det. Använd console.log(), console.warn(), console.error() och console.table() för att skriva ut data under felsökning.

Panelen Network visar alla HTTP-begäranden som sidan gör. Välj en begäran för att se dess headers, förhandsvisa svarsinnehållet och granska tidslinjen i vattenfallsdiagrammet. Filtrera efter typ: XHR/Fetch, JS, CSS, Images, Fonts.

Varje begäran visar: Queued, DNS Lookup, Initial Connection, SSL, Request Sent, Waiting (TTFB) och Content Download. TTFB (Time To First Byte) visar hur lång tid servern tar på sig att svara.

Använd rullgardinsmenyn för nätverksbegränsning i panelen Network för att simulera långsamma 3G- eller offlinelägen. Då upptäcker du prestandaproblem som inte syns med snabbt bredband och kan bygga upplevelser som fungerar för användare med dåliga anslutningar.

Klicka på enhetsikonen (Ctrl+Shift+M / Cmd+Shift+M) för att aktivera Device Mode. Simulera mobila visningsytor, DPR, pekhändelser och nätverksförhållanden. Välj bland förinställningar som iPhone 14 eller ange en anpassad bredd.

Panelen Sources låter dig läsa JavaScript-filer och ange brytpunkter i dem. En brytpunkt pausar körningen så att du kan granska variabelvärden och anropsstacken samt stega igenom koden rad för rad med F10 (step over) och F11 (step into).

Lägg till en brytpunkt genom att klicka på ett radnummer i Sources. När körningen pausas kan Ni hålla muspekaren över variabler för att se deras värden eller skriva in dem i Console. Använd fönstret Call Stack för att se vilka funktioner som ledde fram till denna punkt.

Elements: inspektera och redigera den aktuella DOM-strukturen. Console: logga och kör JavaScript. Network: övervaka HTTP-trafik. Sources: ange brytpunkter och felsök. Device Mode: testa responsiva layouter. Att behärska dessa fyra paneler förändrar arbetsflödet för felsökning.