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. Det är dock en utländsk enhet för den genomsnittlige 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.
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-kortkommandot på en 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.
- Rulla ned och klicka på Fler verktyg.
- Klicka på Utvecklarverktyg.
ELLER - Högerklicka var som helst på webbplatsen och klicka på Inspektera.
ELLER - Tryck på Ctrl + Shift + I.
Någon av dessa tre metoder ger dig samma resultat.
Om du gjorde detta på rätt sätt öppnas en ny ruta 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 horisontella 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.
Om du håller markören bredvid kanten på panelramen för utvecklarverktyg och drar kommer du 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 inblandade stegen kan ha täckts genom att bara visa dig hur du använder Inspect Element i webbläsaren, kommer vi 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 Inspect Element. Här är en liten repetitionskurs för dig:
- Öppna en webbplats.
- Klicka på de tre vertikala prickarna 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 funktionstangenten F12 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å funktionstangenten F12.
- Välj Växla enhetsfält.
- 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 funktionen Inspektera element på din Android-enhet från bekvämligheten av ditt skrivbord.
Den här metoden 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
Verktyget Inspect Element är inte nödvändigtvis OS-specifikt, men det är webbläsarspecifikt. Det betyder att utvecklarverktyg är en funktion i webbläsaren 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 funktionstangenten F12 för att komma åt Inspect Element snabbare. Det fungerar också att högerklicka på webbsidan och välja Inspektera.
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 och välj Inställningar från rullgardinsmenyn.
- Klicka på den avancerade kugghjulsikonen längst upp på skärmen.
- Markera rutan som säger Visa utvecklingsmeny 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å iOS
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 Web Inspector för din iOS-enhet:
- Gå till Inställningar.
- Välj nu Safari.
- Bläddra till botten och tryck på den avancerade menyn.
- Tryck nu på vippknappen för att aktivera Web Inspector.
Se också till att Utveckla-menyn är aktiverad på din Mac genom att följa stegen i avsnittet ovan.
När du har aktiverat både mobila iOS-enheter och Mac-datorer ser du menyn Utveckla i det övre 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 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 komma runt detta:
Metod 1 – Stäng av Javascript
- Gå till Inställningar.
- Sök i 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.
- Rulla ned och klicka på Utvecklarverktyg.
Metod 3 – Använda funktionstangenten
Du kan också prova att använda funktionstangenten F12 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 view-source: [enter full url].
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 på Ctrl + Shift + I.
- Prova och använd visningskällan:[url] metod, såsom view-source:https://www.wikipedia.com.
Vissa skolor och organisationer blockerar dock den här funktionen, så om den 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
Om du inte är expert på Inspect Element efter att ha läst ovan, finns det fler svar här.
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 svaren närvarande i kodningen.
Annars tittar du helt enkelt på kodningen för frågesporten eller testet när du använder funktionen Inspektera element, samt alla svar du skickar in.
Är inspektera element olagligt?
Nej, verktyget Inspect Element är inte olagligt; den är designad för webbutvecklare. Att titta på källkoden för en webbplats är inte olagligt; det blir bara ett problem om du använder den insamlade informationen för skändliga syften, 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 tutorials online för att ställa in rätt skript för att inaktivera vissa händelser. Du kan dock faktiskt inte inaktivera funktionen Inspektera element i sin helhet.
Lär känna insidan av en webbsida
Att kolla in funktionen Inspect Element 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.