De flesta människor är omedvetna om att det finns en skattkammare av utvecklarverktyg till sitt förfogande och att det är gömt i deras favoritwebbläsare.
Varje webbläsare erbjuder utvecklarverktyg för att kolla in kodningen av en webbplats, men det är en främmande enhet för den genomsnittliga internetanvändaren. När allt kommer omkring, vem vill titta på en webbplatss kodning, eller hur?
Som det visar sig finns det massor av saker du kan lära dig genom att titta på en webbplatss kodning. Läs vidare för att ta reda på vad funktionen inspektera element har att erbjuda och hur du använder den.
Hur man använder Inspect Element i en specifik webbläsare
De flesta webbläsare har verktyg för att inspektera delar av en webbplats, men de fungerar i allmänhet på samma sätt.
Använda Inspect Element i Google Chrome
- Öppna webbplatsen du vill inspektera.
- Högerklicka var som helst på sidan och välj Inspektera.
ELLER
- Klicka på de tre vertikala prickarna i det högra hörnet av ditt verktygsfält.
- Gå till Fler verktyg.
- Välj Utvecklarverktyg.
ELLER
- tryck på F12 kortkommando på PC eller CMD + Alternativ + I på en Mac.
Använda Inspect Element i Microsoft Edge
- Öppna en webbplats.
- Klicka på de tre vertikala prickarna i det övre högra hörnet av webbläsarens verktygsfält.
- Scrolla ner och klicka på Fler verktyg.
- Klicka på Utvecklarverktyg.
ELLER
- Högerklicka var som helst på webbplatsen.
- Klicka på Inspektera.
ELLER
- Tryck Ctrl + Shift + I.
Någon av dessa tre metoder ger dig samma resultat.
Om du gjorde detta korrekt kommer du att se en ny ruta som öppnas längst ned i din webbläsare. Dessa är utvecklarverktygen och inkluderar fliken Element. Detta är verktyget du behöver för att inspektera element.
Panelen öppnas längst ned på skärmen som standard, men du kan alltid ändra hur den ser ut. Följ dessa enkla steg för att flytta om panelen för utvecklarverktyg:
- Klicka på de tre vertikala prickarna i det övre hörnet av panelen för utvecklarverktyg.
- Välj en dockningssida (vänster, botten eller höger) eller koppla av till ett separat fönster.
Håller du markören bredvid kanten på panelramen för utvecklarverktyg och drar du för att begränsa eller bredda arbetsytan. Om du till exempel väljer att docka panelen till höger sida av webbläsarfönstret, försök att hålla muspekaren över den vänstra kanten. Du kan dra panelen för att ändra storlek på den när du ser pilmarkören.
Använda Inspect Element (OS-specifikt)
Även om många av de involverade stegen kan ha täckts genom att bara visa dig hur du använder Inspect Element i webbläsaren, där det finns i första hand, men vi kommer att visa dig hur på de flesta operativsystem ändå.
Så här använder du Inspect Element på en Chromebook
Standardwebbläsaren på en Chromebook är Google, så följ instruktionerna för Chrome för att komma åt Inspektera elementet. Här är en liten repetitionskurs för dig:
- Öppna en webbplats.
- Klicka på de tre vertikala linjerna i det övre högra hörnet av verktygsfältet.
- Välj Fler verktyg.
- Klicka på Utvecklarverktyg.
Du kan också använda högerklicksmetoden eller F12 funktionstangent för att snabbare komma till utvecklarverktygen.
Hur man använder Inspect Element på en Android-enhet
Att köra Inspect Element på en Android-enhet är något annorlunda. Kolla in hur du kommer till panelen Inspect Element på Android:
- tryck på F12 funktionstangent.
- Välja Växla enhetsfältet.
- Välj Android-enheten från rullgardinsmenyn.
När du väljer en specifik Android-enhet kommer du att märka att en mobilversion av webbplatsen laddas. Härifrån är du fri att använda Inspect Element-funktionen på din Android-enhet från bekvämligheten av ditt skrivbord.
Denna metod fungerar för både Chrome och Firefox webbläsare eftersom de har en funktion i sina utvecklarverktyg som heter Device Simulation.
Det fungerar också på samma sätt för iPhone-enheter. Du behöver bara välja rätt i rullgardinsmenyn.
Hur man använder Inspect Element i Windows
Inspect Element-verktyget är inte nödvändigtvis OS-specifikt utan är webbläsarspecifikt. Det betyder att utvecklarverktyg är en funktion i webbläsaren som du använder och inte nödvändigtvis Windows. Du kan dock komma till panelen Inspektera element oavsett vilken webbläsare du föredrar.
Om du använder Windows OS kommer du sannolikt också att använda webbläsaren Microsoft Edge. Kolla in hur du kommer åt Inspect Element på MS Edge:
- Öppna webbplatsen du vill inspektera.
- Tryck på de tre vertikala prickarna i hörnet av webbläsarfönstret.
- Rulla ned och välj Fler verktyg.
- Klicka på Utvecklarverktyg.
Du kan också använda F12 funktionstangent om du vill komma åt Inspect Element snabbare. Att högerklicka på webbsidan och välja Inspektera fungerar också.
Hur man använder Inspect Element på en Mac
Om du använder en Mac är din webbläsare förmodligen Safari. Att öppna Inspect Elements på Safari är något annorlunda än på Chrome och Firefox. Men det är lika enkelt med dessa steg:
- Öppna webbläsaren Safari.
- Klicka på Safari i rubrikfliken.
- Välj Inställningar från rullgardinsmenyn.
- Klicka på Avancerad kugghjulsikonen högst upp på skärmen.
- Markera rutan som säger Visa Utveckla-menyn i menyraden.
Genom att gå igenom dessa steg aktiveras funktionen Inspektera element i din webbläsare. Om du inte aktiverar Inspect Element först, kommer du inte att se alternativet när du öppnar en webbplats.
När du har slutfört det här steget högerklickar du helt enkelt på en öppen webbsida och väljer Inspektera. Du kan också använda kommandot snabbknappar: CMD + Option + I (inspektera).
Hur man använder Inspect Element på en iPhone
Vill du använda funktionen Inspektera element för att se hur en mobilversion av en webbsida visas på en iPhone? Du kan göra detta och mer med bara några enkla steg. Men innan du tittar på ett element måste du aktivera Webbinspektör för din iOS-enhet:
- Gå till inställningar.
- Välj nu Safari.
- Scrolla till botten och tryck på Avancerad meny.
- Tryck nu på vippknappen för att slå på Webbinspektör.
Du måste också se till att Utveckla-menyn är aktiverad på din Mac:
- Öppna Safari.
- Välj Safari från de övre rubrikerna.
- Klicka sedan på Inställningar.
- Klicka sedan på Avancerad.
- Markera rutan som säger Visa Utveckla-menyn i menyraden.
När du har aktiverat både iOS-mobilenheter och Mac ser du menyn Utveckla i det översta fältet på din Mac. Klicka på den för att se den anslutna iPhonen och webbsidan som är aktiv på enheten. Om du väljer webbsidan öppnas också ett webbinspektörsfönster för samma sida på din Mac-skärm.
Tänk dock på att dessa anvisningar bara fungerar för Safari som kör en Mac, inte Safari på Windows.
Hur man använder Inspect Element i Google Formulär
Du kan också använda Inspect Element på Google Formulär. Men om du letar efter svar på en frågesport har du ingen tur. Du hittar inte svaren inbäddade i kodningen. Du kan bara se svar om du har skapat eller redigerat formuläret. Hur som helst, om du är student och svarar på en frågesport på Google Formulär, ser du bara dina egna svar.
- Du kan högerklicka på formuläret och välja Inspektera för att se all kod för formuläret.
Hur man använder Inspektera element när det är blockerat
Ibland upptäcker du att du inte kan inspektera en webbsida och alternativet Inspektera är nedtonat om du försöker högerklicka på den. Du kanske tror att det är blockerat, men det finns många sätt att kringgå detta:
Metod 1 – Stäng av Javascript
- Gå in i inställningar.
- Sök "JavaScript”.
- Stäng av JavaScript.
Metod 2 – Få tillgång till utvecklarverktyg på långa vägar
Istället för att högerklicka på musen för att Inspektera, gör så här:
- Gå till inställningar i din webbläsare.
- Välj Fler verktyg.
- Scrolla ner och klicka på Utvecklarverktyg.
Metod 3 – Använda funktionstangenten
Du kan också prova att använda F12 funktionstangent på webbsidor som blockerar högerklicket för Inspektera.
Du kanske måste prova alla dessa metoder innan du hittar en som fungerar för dig. Som en sista utväg kan du också prova att visa källkoden genom att skriva in visa-källa: [ange fullständig url]. 
Hur man använder Inspect Element on Discord
Att kolla in din kodning på Discord är en enkel process. Använd bara Ctrl + Shift + I kommando eller F12 på en Discord-sida.
Så här använder du Inspect Element på en skol-Chromebook
Om din Chromebook har utfärdats av en skola innebär användningen av funktionen Inspektera element några enkla steg:
- Högerklicka eller tryck med två fingrar på webbsidan och välj Inspektera.
- Tryck Ctrl + Shift + I.
- Prova och använd metoden view-source:[url], som "view-source://www.wikipedia.com", utan citaten.
Vissa skolor och organisationer blockerar dock denna funktion. Så om det inte fungerar för dig kan du behöva kontakta din organisation eller skoladministratör.
Hur man använder Inspect Element för att hitta svar
Du kan använda Inspect Element för att hitta svar på en mängd olika saker som:
- Förhandsgranska webbplatsdesign på mobila enheter.
- Ta reda på nyckelord som konkurrenterna använder.
- Hastighetstester.
- Ändra text på en webbsida.
- Hitta snabba exempel för att visa utvecklare vad du behöver.
När du startar panelen Inspektera element ser du all kodning för webbplatsen. Det inkluderar all JavaScript-, CSS- och HTML-kodning som är inbyggd i den. Det är som att se källkodningen för en webbsida, förutom att du kan göra ändringar i koden. Dessutom får du se alla förändringar implementerade i realtid.
Det här verktyget gör det ovärderligt för marknadsförare, designers och utvecklare att se eventuella designändringar innan de slutförs. Att göra ändringar i kodning med Inspect Element varar dock inte för evigt. När du laddar om sidan kommer den att gå tillbaka till standardläget.
Ytterligare FAQ
Hur använder jag kommandot Inspektera element för att hitta svar?
Det enda sättet att hitta svar med funktionen Inspektera element är om webbplatsen omedelbart avslöjar det efter inlämning. I det här fallet finns svar i kodningen.
Annars tittar du helt enkelt på kodningen för frågesporten eller testet när du använder funktionen Inspektera element, såväl som alla svar du skickar in.
Är inspektera element olagligt?
Nej, verktyget Inspect Element är inte olagligt, det är designat för webbutvecklare. Att titta på källkoden för en webbplats är inte olagligt, det blir bara ett problem om du använder informationen som samlats in för otrevliga ändamål, som att försöka utnyttja, etc.
Är det möjligt att inaktivera Inspektera element i webbläsaren?
Det korta svaret är nej.
Du kan inte inaktivera Inspect Element i en webbläsare. Men du kan ställa in parametrar som hindrar användare från att göra vissa åtgärder som att högerklicka på en webbsida. Det finns många handledningar online för att ställa in rätt skript för att inaktivera vissa händelser. Men du kan faktiskt inte inaktivera funktionen Inspektera element i sin helhet.
Lär känna insidan av en webbsida
Att kolla in Inspect Element-funktionen på en webbsida är förmodligen ett utvecklarverktyg som du aldrig visste att du behövde – även om du inte är en utvecklare själv. Den har massor av design- och marknadsföringsapplikationer som kan få din webbplats att fungera smidigare. Och kanske ge dig ett försprång på en konkurrent.
Vad använder du Inspect Element till? Berätta för oss om det i kommentarsfältet nedan.
