Hur man använder inspekteringselementet

De flesta är inte medvetna om att det finns en skattkälla av utvecklarverktyg till deras förfogande och att den är dold i deras favoritwebbläsare.

Varje webbläsare erbjuder utvecklarverktyg för att kontrollera kodningen av en webbplats, men det är en utländsk enhet för den genomsnittliga internetanvändaren. När allt kommer omkring, vem vill titta på en webbplats kodning, eller hur?

Som det visar sig finns det många saker du kan lära dig genom att titta på webbplatsens kodning. Läs vidare för att ta reda på vad inspektionselementfunktionen har att erbjuda och hur man använder den.

Hur man använder inspekteringselementet

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 till höger i verktygsfältet.
Gå till Fler verktyg .
Välj Utvecklarverktyg .

ELLER
tryck på F12 snabbtangent 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.
Bläddra ner och klicka på Fler verktyg .
Klicka på Utvecklarverktyg .

ELLER
Högerklicka var som helst på webbplatsen.
Klicka på Inspektera .

ELLER
Tryck Ctrl + Skift + I .

Någon av dessa tre metoder ger dig samma resultat.

Om du gjorde det korrekt ser du att en ny ruta öppnas längst ner i din webbläsare. Dessa är utvecklarverktygen och inkluderar fliken Element. Detta är verktyget du behöver för att inspektera element.

hur man ändrar input på vizio tv

Panelen öppnas längst ner på skärmen som standard, men du kan alltid ändra hur den ser ut. Följ dessa enkla steg för att omplacera panelen Developer Tools:

Klicka på de tre vertikala prickarna i det övre hörnet av panelen Developer Tools.
Välj en dockningssida (vänster, botten eller höger) eller lossa i ett separat fönster.

Om du håller muspekaren bredvid kanten på panelen och utvecklarverktygets ram och drar kommer arbetsytan att begränsas eller utvidgas. Om du till exempel väljer att docka panelen till höger om webbläsarfönstret, försök att sväva på den vänstra kanten. Du kan dra panelen för att ändra storlek på den när du ser pilmarkören.

Hur man använder inspekteringselement 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 webbdesign på mobila enheter.
Ta reda på nyckelord som konkurrenter använder.
Hastighetstest.
Ä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 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 som implementeras i realtid.

Detta verktyg gör det ovärderligt för marknadsförare, designers och utvecklare att se alla designändringar innan de slutförs. Att göra ändringar i kodning med Inspect Element varar dock inte för alltid. När du laddar om sidan kommer den att återgå till standardläget.

Hur man använder Inspect Element på Chromebook

Standardwebbläsaren på Chromebooks är Google, så följ Chrome-webbläsarens instruktioner för att komma åt Inspektera elementet . Här är en liten uppfriskningskurs för dig:

Öppna en webbplats.
Klicka på de tre vertikala linjerna i verktygsfältets övre högra hörn.
Välj Fler verktyg .
Klicka på Utvecklarverktyg .

Du kan också använda högerklickmetoden eller F12 funktionsknapp för att komma till utvecklarverktygen snabbare.

Hur man använder Inspect Element på Android

Att köra Inspect Element på en Android-enhet är lite annorlunda. Kolla in hur du kommer till panelen Inspektera element på Android:

tryck på F12 funktionsknapp.
Välja Växla enhetsfältet .
Välj Android-enhet från rullgardinsmenyn.

När du väljer en specifik Android-enhet märker du att en mobilversion av webbplatsen laddas. Härifrån är du fri att använda Inspect Element-funktionen på din Android-enhet från 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

Verktyget Inspektera element är inte nödvändigtvis OS-specifikt men är webbläsarspecifikt. Det betyder att Developer Tools ä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 gillar.

Om du använder Windows OS använder du sannolikt också 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.
Bläddra ner och välj Fler verktyg .
Klicka på Utvecklarverktyg .

Du kan också använda F12-funktionsknappen om du vill komma åt Inspect Element snabbare. Högerklicka på webbsidan och välj Inspektera fungerar också.

Hur man använder Inspect Element i Chrome

Det finns tre sätt att komma åt Inspect Element i Chrome. Du kan:

vem har dämpat mig på Twitter

Klicka på inställningsmenyn eller tre vertikala prickar i webbläsaren och gå till Fler verktyg> Utvecklarverktyg .
Högerklicka på webbsidan och välj Inspektera .
Använda sig av Ctrl + Skift + I (Inspektera).

Det första sättet är mer intuitivt för nya Inspect Element-användare att komma ihåg. Men om du planerar att använda den här funktionen ofta kan snabbtangenterna vara till nytta.

Hur man använder Inspect Element på Mac

Om du använder en Mac är din webbläsare troligen Safari. Öppna Inspect Elements på Safari är något annorlunda än i Chrome och Firefox. Men det är lika enkelt med dessa steg:

Öppna Safari-webbläsaren.
Klicka på Safari i rubrikfliken.
Välj Inställningar från rullgardinsmenyn.
Klicka på Avancerad kugghjulsikonen högst upp på skärmen
Markera rutan där det står Visa utvecklingsmenyn i menyraden .

Genom att gå igenom dessa steg aktiveras funktionen Inspektera element i din webbläsare. Om du inte aktiverar Inspect Element först ser du inte alternativet när du öppnar en webbplats.

När du har slutfört det här steget högerklickar du bara på en öppen webbsida och väljer Inspektera. Du kan också använda kommandot snabbknappar: CMD + Alternativ + I (inspektera).

Hur man använder Inspect Element på Google Forms

Du kan också använda inspekteringselementet på Google Forms. Men om du letar efter svar på ett frågesport har du tur. Du hittar inte svaren inbäddade i kodningen.

Du kan bara se svaren om du skapar eller redigerar formuläret. Men om du är student som svarar på ett frågesport på Google Forms ser du bara dina egna svar.

Hur som helst kan du högerklicka på formuläret och välja Inspektera för att se all kod för formuläret.

Hur man använder Inspect Element på 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 Web Inspector för din iOS-enhet:

Gå till inställningar .
Välj Safari .
Bläddra till botten och tryck på Avancerad meny .
Tryck 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 topprubrikerna.
Klicka på Inställningar .
Klicka på Avancerad .
Markera rutan där det står Visa utvecklingsmenyn i menyraden .

När du har aktiverat både iOS-mobilenhet och Mac ser du Utveckla-menyn i det övre fältet på din Mac. Klicka på den för att se den anslutna iPhone och webbsidan aktiv på enheten. Genom att välja 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 inspekteringselement när det är blockerat

Ibland kommer du att upptäcka att du inte kan inspektera en webbsida och valet 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å det:

Metod 1 - Stäng av Javascript

Gå in i inställningar .
SökJavaScript.
Stäng av JavaScript .

Metod 2 - Få åtkomst till utvecklarverktyg på lång väg

Istället för att högerklicka på musen för att inspektera gör du detta:

Gå till inställningar i din webbläsare.
Välj Fler verktyg .
Bläddra ner och klicka på Utvecklarinställningar .

Metod 3 - Använda funktionsknappen

hur man roterar en video i Windows

Du kan också prova att använda F12 funktionstangent på webbsidor som blockerar högerklick för Inspect.

Du kan behöva prova alla dessa metoder innan du stöter på en som fungerar för dig. Som en sista utväg kan du också försöka visa källkoden genom att skriva in visningskälla: [skriv in fullständig webbadress] .

Hur man använder Inspect Element på Discord

Att kolla in din kodning på Discord är en enkel process. Använd bara Ctrl + Skift + I kommando eller F12 på en Discord-sida.

Hur man använder inspekteringselement på en skol Chromebook

Om din Chromebook utfärdades av en skola, använder funktionen Inspektera element några enkla steg:

Högerklicka eller tryck två gånger på webbsidan och välj Inspektera .
ELLER
Tryck Ctrl + Skift + I

Vissa skolor och organisationer blockerar dock den här funktionen. Så om det inte fungerar för dig kan du behöva kontakta din organisation eller skoladministratör.

Ytterligare FAQ

Hur använder jag kommandot Inspect 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 bara på kodningen för frågesporten eller testet när du använder funktionen Inspektera element, liksom alla svar du skickar.

Är inspektionselementet olagligt?

Nej, Inspektionselementet är inte olagligt. Att visa källkod för en webbplats är inte olagligt, det blir bara ett problem om du använder informationen som samlats in för onödiga syften, som att försöka utnyttja osv.

Är det möjligt att inaktivera inspektionselement i webbläsaren?

Det korta svaret är nej.

Du kan inte inaktivera inspektionselementet 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 handledning online för att ställa in rätt skript för att inaktivera vissa händelser. Du kan dock 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 själv är utvecklare. Det har massor av design- och marknadsföringsapplikationer som kan göra din webbplats smidigare. Och kanske ge dig ett försprång på en konkurrent.

Vad använder du Inspect Element för? Berätta om det i kommentarfältet nedan.