Hur man använder Inspect Element

Enhetslänkar

Android
iPhone
Chromebook
Mac
Windows
Enhet saknas?

De flesta människor är inte medvetna om att det finns en skattkista med utvecklarverktyg till deras förfogande, och att det är dolt i deras favoritwebbläsare.

Varje webbläsare erbjuder utvecklarverktyg för att kolla in kodning 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å en webbplats kodning. Läs vidare för att ta reda på vad inspektionselementfunktionen har att erbjuda och hur du använder den.

Så här använder du 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 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.
Rulla 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.

Vilken som helst av dessa tre metoder ger dig samma resultat.

Om du gjorde detta korrekt ser du att en ny ruta öppnas längst ned i din webbläsare. Dessa är utvecklarverktygen och inkluderar fliken Elements. 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 utvecklingsverktygspanelen:

Klicka på de tre vertikala prickarna i det övre hörnet på panelen Utvecklarverktyg.
Välj en dockningssida (vänster, nedre eller höger) eller ta bort ett separat fönster.

Om du håller muspekaren bredvid kanten på panelen Utvecklarverktygspanel och drar kommer arbetsytan att begränsas eller vidgas. 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.

Använda Inspect Element (OS -specifik)

Ä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, där det finns i första hand, men vi visar dig hur det går med 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 i Chrome -webbläsaren 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ögerklickmetoden eller F12 funktionsknapp för att komma snabbare till utvecklarverktygen.

Så här använder du Inspect Element på en Android -enhet

Att köra Inspect Element på en Android -enhet är något annorlunda. Ta en titt på hur du kommer till panelen Inspektera element på Android:

tryck på F12 funktionsknapp.
Välja Växla enhetsfält.
Välj Android-enheten 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 funktionen Inspektera element 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 deras utvecklarverktyg som kallas Device Simulation.

Det fungerar också på samma sätt för iPhone -enheter. Du behöver bara välja den rätta i rullgardinsmenyn.

Så här använder du Inspect Element i Windows

Verktyget Inspektera element ä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 använder du sannolikt Microsoft Edge -webbläsaren. Ta reda på hur du får åtkomst till Inspect Element på MS Edge:

Öppna webbplatsen du vill inspektera.
Klicka 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 funktionsknapp om du vill komma åt Inspect Element snabbare. Högerklicka på webbsidan och välja Inspektera fungerar också.

Så här använder du Inspect Element på en Mac

Om du använder en Mac är din valda 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 Safari -webbläsaren.
Klicka på Safari på fliken rubrik.
Välj Preferenser från rullgardinsmenyn.
Klicka på Avancerad kugghjulsikonen längst upp på skärmen.
Markera rutan som säger Visa utvecklingsmenyn i menyraden.

Genom att gå igenom dessa steg aktiveras funktionen Inspektera element i din webbläsare. Om du inte aktiverar inspekteringselement 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 snabbtangenterna: CMD + Alternativ + I (inspektera).

Så här använder du 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.
Bläddra till botten och tryck på Avancerad meny.
Nu trycker du på omkopplaren för att slå på Webbinspektör.

Du måste också se till att utvecklingsmenyn är aktiverad på din Mac:

Öppna Safari.
Välj Safari från de översta rubrikerna.
Klicka sedan på Preferenser.
Klicka sedan på Avancerad.
Markera rutan som säger Visa utvecklingsmenyn i menyraden.

Efter att du har aktiverat både iOS -mobilenheten 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 som är aktiv på enheten. Om du väljer webbsidan öppnas också ett webbinspektionsfö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 Mac, inte Safari på Windows.

Så här använder du Inspect Element i Google Forms

Du kan också använda inspekteringselementet i Google Formulär. Men om du letar efter svar på en frågesport har du inte tur. Du hittar inte svaren inbäddade i kodningen. Du kan bara se svar om du är skaparen eller redaktören av formuläret. Hur som helst, om du är student som svarar på en frågesport i 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 inspektionselement 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 lösa 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 det långa Sätt

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

Gå till inställningar i din webbläsare.
Välj Fler verktyg.
Rulla ner och klicka på Utvecklarverktyg.

Metod 3 – Använda funktionsknappen

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

Du kanske måste 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 se källkoden genom att skriva in visa källa: [enter full url]. Wikipedia-källsida

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 nyckel på en Discord -sida.

Så här använder du Inspect Element på en Chromebook i skolan

Om din Chromebook utfärdades av en skola, med hjälp av funktionen Inspektera element, krävs några enkla steg:

Högerklicka eller tryck med två fingrar på webbsidan och välj Inspektera.
Tryck Ctrl + Skift + I.
Försök och använd view-source:[url] metod, till exempel ”view-source: https: //www.wikipedia.com”, utan citaten.

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 skolans administratör.

Så här använder du Inspect Element för att hitta svar

Du kan använda Inspektera element för att hitta svar på en mängd olika saker som:

Förhandsgranska webbplatsdesign på mobila enheter.
Ta reda på sökord som konkurrenter 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 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 eventuella förändringar implementerade i realtid.

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

Ytterligare vanliga frågor

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 i kodningen.

Annars tittar du helt enkelt på kodningen för frågesporten eller testet när du använder funktionen Inspektera element, liksom alla svar du skickar.

Är inspektionselement olagligt?

Nej, verktyget Inspektera element är inte olagligt, det är avsett 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 onda ändamål, till exempel försök till utnyttjande, etc.

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

Det korta svaret är nej.

Du kan inte inaktivera inspekteringselementet 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 självstudier 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 en internets inre

Att kolla in funktionen Inspektera element på en webbsida är förmodligen ett utvecklarverktyg som du aldrig visste att du behövde – även om du inte själv är utvecklare. Den har massor av design- och marknadsföringsapplikationer som kan göra din webbplats mjukare. Och kanske ge dig ett försprång på en konkurrent.

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