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
- När man använder Google Chrome, Högerklicka var som helst på en webbplats.
- Högerklickskontextmenyn dyker upp.
- Längst ner ser du Inspektera.
- Klick Inspektera för att se HTML- och CSS-koderna på en högerpanel.
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 + Flytta + C
- Funktionstangenten F12
Ovanstående snabbtangenter fungerar även i Mozilla-webbläsaren för Windows.
Mozilla Inspector Tool
I Mozilla-webbläsaren är processen densamma som Google Chrome. Men den Inspektör fönstret visas längst ned i webbläsaren istället för på höger sida, som i Google Chrome.
Microsoft Edge Inspect Tool
Ö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 för 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:
- Springa de Safari webbläsare.
- Besök en webbplats där du vill inspektera webbelement.
- Välj Safari från den övre menyraden i webbläsaren Safari.
- Klick Inställningar från snabbmenyn som öppnas.
- På Skärmen Inställningar, Välj Avancerad.
- Markera Visa utveckla menyn längst ner på Avancerade inställningar skärm.
Du har framgångsrikt aktiverat utvecklarverktyg på Safari för Mac. Följ nu dessa steg för att använda Inspect Element:
- På alla delar av en webbplats som en text eller bild, Högerklicka.
- En snabbmeny visas. Längst ner ser du Inspektera elementet.
- 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 + Flytta + C
- tryck på Kontrollera 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 iPad/iPhone inställningar app.
- Klick Safari på den vänstra navigeringsrutan.
- Scrolla sedan ner till höger för att hitta och välja Avancerad.
- Aktivera växeln för Webbinspektör.
- Anslut nu den mobila enheten till Mac med hjälp av 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 på den översta 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 vilken webbplats som helst 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 Inspect Element för tillfällig webbsidesredigering. 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 över 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ära sig hur snabbt spara en webbsida som PDF nu!