Så använder du webbläsarens ”Inspektera element”–verktyg för att redigera webbsidor

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.

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:

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:

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

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:

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.

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.

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.

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å:

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:

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:

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

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:

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:

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

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:

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:

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:

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:

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:

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:

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

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

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:

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:

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

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

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:

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:

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:

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:

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:

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.

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:

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:

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:

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

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

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:

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:

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

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.

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!