Det finns många värdefulla webbutvecklingsresurser, både bland böcker, videor, onlinekurser, och mycket mer. Att lära sig att använda en webbläsares ”Inspektera element”–verktyg är en sådan kraftfull förmåga. Det är ett ovärderligt inlärningsverktyg – ett som finns precis vid fingerspetsarna och alltid är tillgängligt.

Med funktionen ”Inspektera Element” kan du titta på webbplatsens inre arbete. Även om du bara kan se frontend–markering som HTML, CSS och ibland JavaScript ger det dig ett sätt att se exakt hur utvecklarna byggde webbplatsen.

I det här inlägget kommer vi att visa dig hur du använder verktyget ”Inspektera element” och några av de relaterade teknikerna och funktionerna du kommer att stöta på. Låt oss först ge dig en formell introduktion till själva inspektionsverktyget.

Kolla in vår videoguide om hur du redigerar en webbplats med Inspect Element

Introduktion till verktyget Inspektera element

I webbens unga dagar fanns det bara ett sätt att titta på en webbplats kod — Visa källa–funktionen.

Kinsta.coms "Visa källa"–sida
Kinsta.coms ”Visa källa”–sida

Detta var innan vi hade Cascading Style Sheets (CSS) och JavaScript i överflöd. Webbutvecklare använde HTML för alla webbplatselement, inklusive innehåll, design och… ja, allt.

När webben började utvecklas och den underliggande tekniken blev allt kraftfullare var det nödvändigt att utveckla bättre verktyg. Firefoxs Firebug  var en tidig lösning för att ta reda på hur en webbplats presterade och arbetade under huven:

Firefoxs och Firebugs logotyper
Firefoxs och Firebugs logotyper

Efter ett tag fann den funktionaliteten sin väg in i nästan alla webbläsare. Idag känner vi till funktionen som Inspektera element–verktyget:

Inspektera Element–verktyget på Kinstas webbplats
Inspektera Element–verktyget på Kinstas webbplats

Det är ett kraftfullt sätt att se den underliggande tekniken och koden på en webbplats. Du kan hitta det på några olika ställen – ofta via en verktygsradsmeny, att högerklicka på en sida och välja alternativet eller med en tangentbordsgenväg.

Medan inspektionsverktygets primära fokus ligger på HTML och CSS på en sida, finns det mer du kan göra med det.

En titt på inspektionspanelen

Braves DevTools
Braves DevTools

Inspektera Element är mycket mer än ett sätt att visa kod. Det finns ofta flera paneler.

  • Inspektör – Detta heter Element i vissa webbläsare. Det är huvudskärmen i inspektionsverktyget och visar sidkoden, tillsammans med elementspecifika CSS. Du hittar också ytterligare detaljer på en webbplats ”rutnätssystem” och andra aspekter.
  • Konsol – Detta är en frontend–varningslogg för en webbplats, och det är en plats där du också kan skriva in ett kodavsnitt för att utföra ett snabbt test av en idé.
  • Nätverk – Här ser du förfrågningar till och från en server, till exempel alla POST och GET–förfrågningar.
  • Prestanda – Naturligtvis måste en webbplats prestera väl. Därför finns det ett dedikerat verktyg för att mäta några viktiga webbplatsmått. Vissa webbläsare gör det bättre än andra.
  • Minne – Med den här panelen kan du se hur en webbplats använder minne, och återigen erbjuder vissa webbläsare omfattande mätvärden.
  • App – I den här panelen kan du se en hel rad information om webbplatsens cache, bakgrundstjänster och mer.

Utöver detta finns det fler paneler du kan lägga till:

En lista över andra paneler inom Braves DevTools
En lista över andra paneler inom Braves DevTools

Det finns enkla paneler, såsom Media och mer komplicerade som JavaScript Profiler och Prestandaövervakaren. I ett nötskal gör namnet på Inspektera element-verktyget det en björntjänst på grund av alla funktioner som finns att tillgå under huven. Det har enorm kraft och bör vara centralt för alla webbutvecklares arbetsflöde.

Varför du borde använda Inspektera Element?

Verktyget Inspektera Element är nästan den enda ”påspikade” lösningen du behöver ha vid din sida under utveckling. Vi kommer in på de tekniska detaljerna om varför under resten av artikeln. Först är det dock värt att prata om din anledning till att använda Inspektera Element.

Det finns flera anledningar till att använda verktyget:

  • Du kan bläddra genom andra webbplatser för inspiration om hur du ska jobba på din.
  • Du lär dig hur andra webbplatser eller utvecklare uppnår specifika tekniker.
  • Det ger dig en möjlighet att experimentera på din webbplats utan konsekvenser.
  • I de flesta inspektionsverktyg får du möjlighet att felsöka webbplatserna.
  • Det är bra för att ta reda på mer om webbplatsen i fråga.

Kort sagt innebär att lära sig mer om webbutveckling att titta på bra exempel på webbplatser och ta reda på vad som får dem att funka.

Verktyget Inspektera Element låter dig se den exakta HTML- och CSS-kod som används på en webbplats, vilket ger dig en god chans att implementera dessa aspekter och tekniker i ditt arbete.

Så här hittar du webbläsarens Inspektera Element–verktyg?

Den goda nyheten är att det är enkelt att hitta verktyget. I de flesta fall högerklickar du på en sida och väljer Inspektera eller Inspektera element.

Välja verktyget Inspektera Element
Välja verktyget Inspektera Element

Som standard öppnas verktyget i ett delat fönster. Det är ofta på höger sida som standard. Men du kan anpassa detta efter dina önskemål och även lossa verktyget från dess fönster.

Verktyget Inspektera Element i sitt fönster
Verktyget Inspektera Element i sitt fönster

Självklart kan du också komma åt Inspektera Element från webbläsarens verktygsfält eller via en tangentbordsgenväg. Exakt var varierar beroende på webbläsaren. I exempelvis Firefox hittar du Verktyg för webbutvecklare i Verktyg > Webbläsarverktyg–menyn. Brave däremot, (och andra Chromium–baserade webbläsare) har Utvecklingsverktyg i sin meny Visa > Utvecklare.

Braves verktygsfältsmeny visar dess utvecklingsverktyg
Braves verktygsfältsmeny visar dess utvecklingsverktyg

Kortkommandon är ofta liknande på alla webbläsare: Command + Skift + C (Ctrl + Skift + C Windows). Denna genväg gör det snabbt att ta fram de verktyg du behöver arbeta med direkt.

Om du aldrig har öppnat verktyget Inspektera Element tidigare syns det ofta på höger sida av menyn, som vi nämnde tidigare. För att ändra detta, klicka på trafikljusmenyn i verktygsfältet. Här kan du byta vilken sida dockan visas på:

Alternativen "Docka sida" under Inspektera Element
Alternativen ”Docka sida” under Inspektera Element

Observera att Firefox också använder en trippelpanelsvisning som standard, vilket hjälper dig att få så mycket information från Inspektera Element som möjligt:

Firefox trippelpanelsvisning
Firefox trippelpanelsvisning

Nu när du har verktyget öppet är det en bra idé att ta reda på vad du kan göra med det. Vi kommer prata om det härnäst.

3 användningsområden för Inspektera Element

Vi har berört några sätt på vilka du kan använda Inspektera Element men vi kan gå längre än så för att erbjuda specifika användningsfall. Låt oss diskutera dessa i korthet.

1. Söka efter specifika element på en webbplats.

Det primära målet med inspektionsverktyget finns i dess namn – att inspektera webbplatselement. För att göra detta går du till önskad webbsida och väljer sedan din metod för att öppna utvecklingsverktygen.

När panelen är öppen klickar du på pilen som låter dig välja ditt önskade element:

Granskningspilen
Granskningspilen

Härifrån kan du sväva över ett element på sidan, och du ser det markerat i Inspektör/Element–fönstret:

Markera ett element i utvecklingsverktygspanelen
Markera ett element i utvecklingsverktygspanelen

Det är en enkel process – en av anledningarna till att inspektionsverktyget är så värdefullt och populärt bland webbutvecklare.

2. Emulera en målenhet, display och webbläsare

Inspektera Element fungerar också som en sorts enhetsemulator. Med andra ord kan du se hur en webbplats ser ut på en viss enhet. Alternativen är många:

En lista över emulerade enheter i Brave
En lista över emulerade enheter i Brave

Denna emulator kommer att vara bra för att bedöma om din mobile-first-strategi eller responsiva design är korrekt och fungerar. Det är ovärderligt och också mer kostnadseffektivt än att ha 200 enheter gömda i skrivbordslådorna.

Du kommer oftast åt enhetsemulering från en liten ikon någonstans på Inspektera Element–panelen:

Emulera en enhet med verktyget Inspektera Element
Emulera en enhet med verktyget Inspektera Element

Om du klickar på den här ikonen visas din webbplats som den ser ut på den enhet du har valt:

Välja en enhet som ska emuleras från Inspektera Element
Välja en enhet som ska emuleras från Inspektera Element

Vi går in mer på detalj senare, men det är ett solitt sätt att göra din design konsekvent över olika enheter.

3. Fastställa webbsidans prestanda

Inspektera Element kan också hjälpa dig att bedöma hastighet och prestanda för en webbplats via Prestanda–panelen:

Inspektera Elements prestandapanel
Inspektera Elements prestandapanel

Den här funktionen fungerar genom att ”spela in” laddningstiderna för specifika element och skript. Chromium-baserade webbläsare är mycket duktiga på att erbjuda denna information. Du spelar in sidan när den laddas och visas sedan resultaten i ett tidslinjeformat.

Det är ett utmärkt sätt att ta reda på om en sida presterar väl på en allmän nivå. Därifrån bör du använda ett verktyg som Google PageSpeed Insights eller Lighthouse för att arbeta på din webbplatsprestanda ytterligare. Chromium-baserade webbläsare kommer att ha en inbyggd Lighthouse-rapportgenerator:

En inbyggd Google Lighthouse–rapport
En inbyggd Google Lighthouse–rapport

Du kan också se en sammanfattning av prestandatestningen på några andra flikar. Till exempel kan du se ett anropsträd, en övergripande sammanfattning, och en händelselogg:

Inspektera Element, händelselogg
Inspektera Element, händelselogg

Det är tänkbart att du inte skulle behöva något annat verktyg för att bedöma hur din webbplats presterar eller fungerar. Att lära sig hur det fungerar i praktiken är något vi kommer att diskutera härnäst.

Tips och tricks för att använda Inspektera Element

Vi har redan pratat om att Inspektera Element är ett kraftfullare verktyg än det kan tyckas vara vid första anblicken. Låt oss ta en titt på några tips och tricks för att få ut det mesta av dess uppsättning funktioner, grunderna först.

1. Ändra elementegendomar, värden och status

Hittills har vi bara berört konceptet att använda Inspektera Element för att göra tillfälliga ändringar på en webbplats. Låt oss diskutera hur man gör det mer detaljerat.

Stegen är enkla. Använd först pilikonen för att välja ditt valda element. Du ser ett överlägg som belyser de olika komponenterna när du svävar över dem:

Välj element i Inspektera Element–verktyget
Välj element i Inspektera Element–verktyget

När du kommer till ditt önskade element kan du dubbelklicka nästan var som helst där du ser en tagg inom Element–panelen och skriv in en förändring. Till exempel kan vi ändra den ursprungliga texten på Kinstas hemsida till något annat:

Ändra text på Kinstas hemsida
Ändra text på Kinstas hemsida

Du kan också arbeta med CSS på samma sätt som HTML. Ta till exempel uppmaning till handling-knapparna (CTA; Call to action) på Kinstas hemsida:

Välj en knapp på Kinstas hemsida
Välj en knapp på Kinstas hemsida

Om du väljer knappen med pekaren kan du se dess relaterade CSS i den högra Formatpanelen:

Formatpanelen i verktyget Inspektera Element
Formatpanelen i verktyget Inspektera Element

Precis som med HTML–element kan du ändra värden och lägga till din CSS också:

Ändra knappfärgen i Formatpanelen
Ändra knappfärgen i Formatpanelen

För element som knappar kanske du vill arbeta med dess olika status. I detta fall är dess :hover–status värt att ändra på också. För att göra detta klickar du på :hov–länken i stilpanelen. Om du väljer det här visas en lista med elementstatus, och du kan välja dem du vill se hover-state-CSS för:

Öppna statusalternativen i formatpanelen
Öppna statusalternativen i formatpanelen

Webbsidan visar hur statusen ser ut utan att du behöver agera. Här har vi ändrat hover-färgerna för att skilja dem från standardknappsstatusen:

Ändra hover–statusfärger i formatpanelen
Ändra hover–statusfärger i formatpanelen

Du kan även ta bildadresser och byta ut dem. På Kinstas hemsida visar vi en skärmdump av MyKinstapanelen:

MyKinstapanelen på Kinstas hemsida
MyKinstapanelen på Kinstas hemsida

Genom att hitta elementet och ändra källadressen till bilden kan du testa att använda andra bilder på dess plats:

I det här fallet gick ändringen live inom några minuter (bildkälla: Pixabay)
I det här fallet gick ändringen live inom några minuter (bildkälla: Pixabay).

Som du kan förvänta dig är dessa förändringar inte permanenta, och med en snabb uppdatering av sidan blir allt som vanligt igen. Som ett alternativ kan du också kopiera HTML och CSS–koden till din redigerare och inkludera dem i din kod för att göra dessa ändringar permanenta.

2. Söka efter element

Det kan vara så att innan du kan ändra ett element, måste du hitta det. Verktyget Inspektera Element har enkla sökfunktioner som kan hjälpa dig att hitta vilken aspekt som helst av en webbsida.

Med det sagt är det svårt att hitta om du inte vet var du ska leta. Den ”officiella” vägen i Chromium-baserade webbläsare är att gå till trafikljusmenyn på höger sida av sidan och välj Sök–alternativet:

Alternativet "Sök" i Braves DevTools
Alternativet ”Sök” i Braves DevTools

Detta kommer att öppna Konsol–panelen, tillsammans med en Sök–flik. Härifrån skriver du in önskad tagg i textrutan, så visas en lista över associerade element på sidan:

Söker efter element i Brave DevTools
Söker efter element i Brave DevTools

Observera att i funktionen kan finnas någon annanstans i andra webbläsare. Till exempel innehåller Firefox en Sökruta högst upp i Inspektör-panelen:

Sök efter element i Firefoxs Inspektörspanel
Sök efter element i Firefoxs Inspektörspanel

Här är ett annat snabbtips: du kan utföra rekursiv expansion av de olika noderna och elementen genom att högerklicka inom Element–panelen och välja Expandera rekursivt:

Alternativet expandera rekursivt i elementpanelen
Alternativet expandera rekursivt i elementpanelen

Om du tar en titt på formatpanelen kommer du också upptäcka en Filter–ruta. Detta fält låter dig filtrera efter CSS–egendomar, vilket gör det till en mycket bra följeslagare till den globala sökfunktionen:

Filtrering av egendomar i formatpanelen
Filtrering av egendomar i formatpanelen

På det hela taget borde det inte vara svårt att hitta vad du behöver med två dedikerade filter- och sökverktyg.

3. En snabb genomgång om lådmodellen

Ett av de bästa sätten som inspektionsverktyget kan hjälpa dig att lära dig mer om hur CSS–egendomar agerar på element är den visuella lådmodellspanelen.

Lådmodellen
Lådmodellen

Den här översikten ger dig en bild av hur en specifik låda (som ”element” eller ”div”) visas på skärmen. Med andra ord är det en översikt över hur marginalerna, spaltfyllnaden, ramen och innehållet kombineras för att bli den sektion du ser på skärmen.

Att förklara hela CSS–lådmodellen och hur den interagerar med webbplatsens HTML omfattas dock inte av denna artikel men Mozilla har en fantastisk guide över konceptet.

Du hittar ofta Lådmodells–panelen inom Layout eller Beräknad–avsnitten i av den högra rutan i verktyget:

Lådmodellspanelen i verktyget Inspektera Element
Lådmodellspanelen i verktyget Inspektera Element

Som med alla element och egendomar kan du också ändra värdena och inställningarna för en viss låda. Det kommer också att finnas en lista över andra egendomar som hjälper dig att placera lådan, ställa in en z–index, tillämpa flytnings– och visningsinställningar, och mycket mer.

När du arbetar med lådmodellen kan du också dra nytta av att kunna se rutnätssystemet på sidan. För att göra detta, ta en titt på Layout-panelen – de alternativ du behöver kommer ligga under Rutnätsmenyn:

Inställningar för rutnätsmenyn
Inställningar för rutnätsmenyn

Genom att klicka på dina önskade visningsinställningar och sedan välja ett relevant överlägg kommer att visa det på skärmen så att du kan fatta mer exakta beslut med hjälp av lådmodellen för att manipulera webbplatselement.

4. Emulera enheter med Inspektera Element

De har gått från modeord till integrerade lexikala termer, men ”responsiv” och ”mobilvänlig” är viktiga webbutvecklingsfaktorer. Inspektera element-verktyget tacklar detta genom ett par funktioner.

I de flesta webbläsare kommer inspektionsverktyget ha en mobil enhets–ikon längs det övre verktygsfältet:

Växla till mobil–responsiv visning inom Brave
Växla till mobil–responsiv visning inom Brave

Safari är dock annorlunda. I stället finns det en Öppna/Stäng responsivt designläge-knapp i Utvecklingsmenyn:

Alternativet "Stäng responsivt designläge" i Safari
Alternativet ”Stäng responsivt designläge” i Safari

Oavsett hur du kommer dit, när du väljer alternativet visas webbsidan som du skulle se den på en mindre enhet:

En layout för mobila enheter i Firefox
En layout för mobila enheter i Firefox

Medan Safari bara ger dig valet mellan olika Apple-enheter kommer andra webbläsare ge dig de verktyg du behöver för att designa enligt mobile-first-principer. Du kan till exempel välja visningsportens orientering, samt vilken enhet du vill emulera:

Enhetsemuleringslista i Brave
Enhetsemuleringslista i Brave

Det finns två andra intressanta funktioner här. Först kan du välja en emulerad nätverkshastighet. Safari innehåller inte några alternativ för detta, och Chromium-baserade webbläsare erbjuder ett litet, allmänt val av nätverksstrypning:

Strypningsalternativ i Brave
Strypningsalternativ i Brave

Firefox är bäst här med ett gott antal nätverksval att välja mellan:

Firefoxs strypningsalternativ
Firefoxs strypningsalternativ

För att runda ut saker och ting kan du simulera haptisk feedback och sensorigenkänning också. Det är standard i Chromium-baserade webbläsare, och i Firefox måste du slå på det.

Alternativet haptisk feedback i Firefox
Alternativet haptisk feedback i Firefox

Firefox hamnar på efterkälken här eftersom Chrome, Brave, och andra visar markören som ett litet fingertoppsliknande överlägg. Funktionaliteten är inte perfekt för alla webbläsare, men det är ett tillförlitligt sätt att avgöra hur din webbplats kan agera på andra enheter.

Denna typ av testning är något många webbutvecklare glömmer bort. Men det finns ingen ursäkt för det längre, nu när webbläsare erbjuder omfattande lösningar som denna.

5. Kortkommandon när du använder Inspektera Element

De flesta webbläsargenvägar, eller kortkommandon, är ofta desamma i alla webbläsare. Det är goda nyheter om du går mellan olika verktyg för att testa dina webbplatser.

Här är en snabb lista över några av de mest populära (och värdefulla) genvägarna:

Öppna Inspektera Element–verktyget Commando + Skift + C för Mac, CTRL + Skift + C för Windows
Flytta mellan noder Upp och Ner–piltangenterna
Expandera den valda noden Höger piltangent
Komprimera den valda noden Vänster piltangent
Rekursivt expandera och kollapsa noder Option + Klick för Mac, Alt + Klick för Windows
Flytta omkring inuti en nod för att arbeta med attribut Enter eller Return
Gå framåt genom en nods attribut Tab
Gå bakåt genom en nods attribut Shift + Tab
Dölj eller visa den valda noden H
Redigera och sluta redigera en nod som HTML F2
När en CSS– egendom är markerad, öka värdet med ett Uppåt piltangent
När en CSS–egendom är markerad, minska värdet med ett Nedåt piltangent
När en CSS–egendom är markerad, öka värdet med tio Shift + Uppåt piltangent
När en CSS–egendom är markerad, minska värdet med tio Shift + Nedåt piltangent
När en CSS–egendom är markerad, öka värdet med 0,1 Option + Uppåt–pilen för Mac, Alt + Uppåt–pilen för Windows
När en CSS–egendom är markerad, minska värdet med 0,1 Option + Nedåt–pilen för Mac, Alt + Nedåt–pilen för Windows

Naturligtvis finns det många fler genvägar tillgängliga. Mozilla har exceptionell dokumentation för Firefox, medan Chrome, Brave, Edge och andra delar genvägar. Apple är mindre hjälpsam med utvecklargenvägar för Safari, och det finns inte någon definierad lista på deras hjälpsidor. I stället föreslår vi att du läser igenom den officiella dokumentationen för Safaris utvecklarverktyg.

Sammanfattning

Webbutveckling är inte längre bara HTML. Det är många tekniker inblandade. Även om du håller dig till den heliga treenigheten av HTML, CSS och JavaScript behöver du fortfarande se hur en webbplats sätter ihop alla dessa komponenter.

Webbläsarens Inspektera Element-verktyg är ett av de bästa sätten att titta under huven på en webbplats och ta reda på hur den fungerar i detalj. Även om det är fantastiskt som ett inlärningsmedel kan det också hjälpa dig att testa ändringar på din webbplats och se hur den fungerar på olika enheter och mobila nätverk.

Använder du inspektionsverktyget ofta? Om så är fallet, vilka är dina favoritfunktioner? Dela dina åsikter i kommentarfältet!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.