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

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 på Mac, Windows, iPhone och iPad

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 på Mac, Windows, iPhone och iPad

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 på Mac, Windows, iPhone och iPad

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.
  • 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.

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

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

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

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

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!


Hur man blir av med Yahoo Search i Chrome

Hur man blir av med Yahoo Search i Chrome

Lär dig hur du tar bort Yahoo Search som en oönskad sökmotor i Chrome, med effektiva metoder för att återställa dina webbläsarinställningar.

Hur man hanterar bokmärken i Google Chrome

Hur man hanterar bokmärken i Google Chrome

Lär dig att effektivt organisera och hantera dina bokmärken i Google Chrome för att lättare hitta det du behöver.

Hur du gör ditt Facebook-konto privat

Hur du gör ditt Facebook-konto privat

Lär dig hur du gör ditt Facebook-konto privat för att skydda din information.

Hur man lägger till eller tar bort en administratör från en Facebook-grupp

Hur man lägger till eller tar bort en administratör från en Facebook-grupp

Att hantera en grupp på Facebook kan vara utmanande. Denna guide hjälper dig att effektivt lägga till eller ta bort administratörer och moderatorer, vilket snabbar upp hanteringen av din Facebook-grupp.

Hur man visar sparade lösenord i Chrome, Opera, Edge och Firefox

Hur man visar sparade lösenord i Chrome, Opera, Edge och Firefox

Lär dig hur du enkelt ser dina sparade lösenord i Chrome, Opera, Edge och Firefox. Vi ger dig en steg-för-steg-guide för att hantera dina lösenord effektivt.

Hur man använder Signal-appen: Tips och tricks

Hur man använder Signal-appen: Tips och tricks

Upptäck hur du effektivt använder Signal-appen för att hålla dina konversationer säkra. Denna guide inkluderar användbara tips och tricks för bästa upplevelsen av den säkra meddelandeappen Signal.

Hur man stoppar Facebook från att komma åt mina foton

Hur man stoppar Facebook från att komma åt mina foton

I den här guiden visar du exakt hur du kan blockera Facebook från att komma åt dina foton och skydda din integritet.

Så här ändrar eller återställer du lösenordet för ditt Google-konto

Så här ändrar eller återställer du lösenordet för ditt Google-konto

Lösenordet till ditt Google-konto är inkörsporten till alla Google-tjänster. Lär dig hur du enkelt ändrar eller återställer lösenordet för att skydda dina personuppgifter.

Topp 8 sätt att kontakta Facebook för hjälp eller support

Topp 8 sätt att kontakta Facebook för hjälp eller support

Försöker du kontakta Facebook för hjälp eller support? Här är de bästa sätten att nå ut till Facebooks supportteam.

Kan du rita en radie på Google Maps?

Kan du rita en radie på Google Maps?

Även om Google Maps inte stöder radiefunktionen, kan du använda alternativa onlinekarttjänster för att enkelt rita en radie runt en plats.