Hur man inspekterar element på Mac, Windows, iPhone och iPad

Utvecklare och UI-designers använder Inspect Element-funktionen för att ändra webbplatser online utan att ändra källkoden. Men hur inspekterar man element utan att gå en webbutvecklingskurs?

Inspect Element är ett praktiskt utvecklarverktyg som kommer ur lådan med populära webbläsare. Du behöver bara veta hur du distribuerar verktyget med några få klick medan du surfar på webbplatser.

Du kan göra många magiska trick som att ändra webbplatsens layout, ta textfria skärmdumpar, ändra teckensnitt, ändra siffror och mer.

Nedan hittar du en kortfattad steg-för-steg-guide för att lära dig hur du inspekterar element utan ansträngning.

Vad är Inspect Element?

Inspect Element är ett webbutvecklingsverktyg som finns i de flesta webbläsare. Du kan använda den för att redigera front-end-källkoden för alla webbplatser du besöker.

Ändringarna du gör sker i en sandlåda i din webbläsare. Så du gör inga ändringar på den faktiska webbplatsen. Dessutom försvinner de ytliga ändringarna du gör när du uppdaterar sidan.

Här är några kreativa sätt att använda den:

• Du måste ta en skärmdump från en webbplats, och texterna på bilden stör dig. Använd verktyget Inspektera element för att ta bort dessa texter.
• Du vill busa dina vänner genom att visa dem ditt namn i New York Times eller Washington Post. Inspect Element är det bästa sättet att göra detta.
• Testa felsökningskoder på webbplatser genom att använda dem i realtid med hjälp av verktyget Inspect Element. Om det fungerar kan du ändra backend-källkoden.
• Som digital marknadsförare kan du avslöja konkurrenters sökord, SEO-titlar, metataggar etc. med hjälp av detta mäktiga webbutvecklingsverktyg.

Hur man inspekterar element på Windows

Att använda verktyget Inspect Element på Windows är löjligt enkelt. Nedan hittar du en stegvis guide för att inspektera element med olika webbläsare på Windows:

Google Chrome Inspect Tool

Hur man inspekterar element i webbläsaren Windows Chrome

• När du använder Google Chrome högerklickar du var som helst på en webbplats .
• Högerklickskontextmenyn dyker upp.
• Längst ner ser du Inspektera .
• Klicka på Inspektera för att se HTML- och CSS-koderna på en panel till höger .

Hur öppnar jag Inspect Element i Chrome utan att högerklicka?

Det finns några praktiska genvägar för att öppna verktyget Inspect Element på Google Chrome för Windows. Dessa snabbtangenter är som nedan:

• Ctrl + Shift + C
• Funktionstangenten F12

Ovanstående snabbtangenter fungerar även i Mozilla-webbläsaren för Windows.

Mozilla Inspector Tool

Hur man inspekterar element i Windows Mozilla-webbläsare

I Mozilla-webbläsaren är processen densamma som Google Chrome. Inspektörsfönstret kommer dock att dyka upp längst ner i webbläsaren istället för på höger sida, som i Google Chrome.

Microsoft Edge Inspect Tool

Hur man inspekterar element i Windows Edge Browser

Överraskande nog fungerar Microsoft Edges Inspect Element på samma sätt som webbläsaren Google Chrome. Inspektera verktyget är tillgängligt när du högerklickar. HTML- och CSS-koderna visas på höger sida, liknande Google Chrome.

Hur man inspekterar element på Mac

Använder du Google Chrome, Mozilla Firefox eller Microsoft Edge på Apples Mac-datorer? Om ja, kan du distribuera verktyget Inspect Element genom att följa stegen som nämns ovan i Windows-avsnittet.

Men om du använder standardwebbläsaren macOS, Safari, är det ett knepigt spel att använda verktyget Inspect Element. Som standard visar Safari inte Inspect Element på en Mac. Här är vad du behöver göra:

Hur man öppnar Inspect Element på Mac

Först och främst måste du aktivera utvecklarverktyg på Safari på en Mac. Här är hur:

• Kör webbläsaren Safari .
• Besök en webbplats där du vill inspektera webbelement.
• Välj Safari från den övre menyraden i webbläsaren Safari.
• Klicka på Inställningar från snabbmenyn som öppnas.
• På skärmen Inställningar väljer du Avancerat .
• Markera menyn Visa utveckla längst ned på skärmen Avancerade inställningar .

Du har framgångsrikt aktiverat utvecklarverktyg på Safari för Mac. Följ nu dessa steg för att använda Inspect Element:

• Högerklicka på valfritt element på en webbplats, som en text eller bild .
• En snabbmeny visas. Längst ner ser du Inspektera element .
• Klicka på det för att öppna en felsökningssektion under webbplatsen som visar HTML- och CSS -koder.

Vilka är nycklarna för Inspect Element?

Du kanske letar efter genvägar för Inspect Element på Mac. Du kan använda följande:

• Kommando + Skift + C
• Tryck på Ctrl- tangenten och välj sedan valfritt element.
• Klicka på styrplattan med två fingrar

Hur man inspekterar element på Chromebooks

Chromebook använder Google Chrome som standardwebbläsare. Därför, efter att ha öppnat en webbplats, högerklicka helt enkelt för att hitta alternativet Inspektera element i snabbmenyn som följer.

Om du använder en Chromebook från jobbet eller skolan kanske du ställer den här frågan:

Varför kan jag inte inspektera på min skol-Chromebook?

De flesta skol- och företagsadministratörer inaktiverar avancerade funktioner på Chromebook de ger dig för arbete eller studier. Eftersom utvecklarverktyg är avancerade funktioner är chansen stor att din skola eller arbets-Chromebook inte visar verktyget Inspect Element.

Hur man inspekterar element på iPad/iPhone

Tyvärr kan du inte använda verktyget Inspect Element på en iPhone eller iPad utan en Mac.

iOS och iPadOS har Web Inspector för Safari-appen. Det fungerar dock bara om du ansluter den mobila enheten till en Mac där du redan har aktiverat utvecklarverktyg för Safari. Nedan följer stegen du kan prova:

• Öppna appen Inställningar för iPad/iPhone .
• Klicka på Safari i navigeringsfönstret till vänster.

Öppna Safari-inställningar på iPad eller iPhone

• Bläddra sedan ned till höger för att hitta och välja Avancerat .

Aktivera Web Inspector på iPad och iPhone

• Aktivera växeln för Web Inspector .
• Anslut nu den mobila enheten till Mac med USB .
• Auktorisera iPhone/iPad på Mac.
• Öppna valfri webbplats på en mobil enhet på Safari.
• Kör nu Safari på Mac och välj Utveckla i den övre menyraden.
• På snabbmenyn som öppnas letar du efter din mobila enhets namn.
• Håll muspekaren över den mobila enheten för att se alla öppna webbplatser.
• Välj nu valfri webbplats för att se HTML- och CSS-källkoden i Macs Safari-webbläsare.

Slutsats

Du har utforskat alla möjliga sätt att använda verktyget Inspektera element för tillfällig redigering av webbsidor. Du har också lärt dig hur du inspekterar element för olika enheter som Mac, Windows, Chromebook, iPad och iPhone.

Nästa gång du behöver ändra en webbsida för skojs skull eller för professionella behov, prova dessa metoder. Du kommer definitivt att älska dessa enkla steg framför andra komplicerade metoder som förklaras på annat håll.

Glöm inte att lämna kommentarer nedan om stegen ovan hjälpte dig, någon metod som du tycker är utmanande eller några hemliga tips om verktyget Inspect Element.

Behöver du en webbsida som tryckt referens? Lär dig hur du snabbt sparar en webbsida som PDF nu!