Sådan bruges Inspect Element

De fleste mennesker er uvidende om, at der er en skatkammer af udviklerværktøjer til deres rådighed, og at det er skjult i deres yndlingsbrowser.

Hver webbrowser tilbyder udviklerværktøjer til at tjekke kodningen af et websted, men det er en fremmed enhed for den gennemsnitlige internetbruger. Når alt kommer til alt, hvem ønsker at se på en hjemmesides kodning, ikke?

Som det viser sig, er der masser af ting, du kan lære ved at se på en hjemmesides kodning. Læs videre for at finde ud af, hvad inspiceringselementfunktionen har at tilbyde, og hvordan du bruger den.

Sådan bruges Inspect Element i en specifik browser

De fleste browsere har værktøjer til at inspicere elementer på et websted, men de fungerer generelt alle på samme måde.

Brug af Inspect Element i Google Chrome

Åbn det websted, du gerne vil inspicere.
Højreklik hvor som helst på siden og vælg Inspicere.
ELLER
Klik på de tre lodrette prikker i højre hjørne af din værktøjslinje.
Gå til Flere værktøjer.
Vælg Udvikler værktøjer.
ELLER
Tryk på F12 tastaturgenvejstast på pc eller CMD + Optioner + I på en Mac.

Brug af Inspect Element i Microsoft Edge

Åbn en hjemmeside.
Klik på de tre lodrette prikker i øverste højre hjørne af browserens værktøjslinje.
Rul ned og klik på Flere værktøjer.
Klik på Udvikler værktøjer.
ELLER
Højreklik hvor som helst på webstedet.
Klik på Inspicere.
ELLER
Trykke Ctrl + Shift + I.

Enhver af disse tre metoder vil give dig det samme resultat.

Hvis du gjorde dette korrekt, vil du se en ny rude åbne nederst i din browser. Disse er udviklerværktøjerne og inkluderer fanen Elementer. Dette er værktøjet, du skal bruge for at inspicere Element.

Panelet åbnes nederst på din skærm som standard, men du kan altid ændre, hvordan det ser ud. Følg disse enkle trin for at flytte panelet Udviklerværktøjer:

Klik på de tre lodrette prikker i det øverste hjørne af panelet Udviklerværktøjer.
Vælg en dockside (venstre, bund eller højre) eller frigør til et separat vindue.

Hvis du holder markøren ved siden af kanten af panelrammen for udviklerværktøjer og trækker, indsnævres eller udvides arbejdsområdet. For eksempel, hvis du vælger at forankre panelet til højre side af browservinduet, kan du prøve at svæve på venstre kant. Du kan trække panelet for at ændre størrelsen på det, når du ser pilemarkøren.

Brug af Inspect Element (OS-specifik)

Selvom mange af de involverede trin måske er blevet dækket ved blot at vise dig, hvordan du bruger Inspect Element i browseren, hvor det findes i første omgang, men vi vil alligevel vise dig hvordan på de fleste OS.

Sådan bruger du Inspect Element på en Chromebook

Standardbrowseren på en Chromebook er Google, så følg Chrome-browserens instruktioner for at få adgang Inspicer element. Her er et lille genopfriskningskursus til dig:

Åbn en hjemmeside.
Klik på de tre lodrette linjer i øverste højre hjørne af værktøjslinjen.
Vælg Flere værktøjer.
Klik på Udvikler værktøjer.

Du kan også bruge højreklik-metoden eller F12 funktionstast for at komme hurtigere til udviklerværktøjerne.

Sådan bruger du Inspect Element på en Android-enhed

At køre Inspect Element på en Android-enhed er lidt anderledes. Se, hvordan du kommer til panelet Inspect Element på Android:

Tryk på F12 funktionstast.
Vælge Skift Device Bar.
Vælg Android-enheden fra rullemenuen.

Når du vælger en bestemt Android-enhed, vil du bemærke, at en mobilversion af webstedet indlæses. Herfra kan du frit bruge funktionen Inspect Element på din Android-enhed fra dit skrivebord.

Denne metode fungerer for både Chrome- og Firefox-browsere, fordi de har en funktion i deres udviklerværktøjer kaldet Device Simulation.

Det fungerer også på samme måde for iPhone-enheder. Du skal blot vælge den rigtige i rullemenuen.

Sådan bruges Inspect Element i Windows

Inspect Element-værktøjet er ikke nødvendigvis OS-specifikt, men browser-specifikt. Det betyder, at udviklerværktøjer er en funktion i den browser, du bruger, og ikke nødvendigvis Windows. Du kan dog komme til Inspect Element-panelet, uanset hvilken browser du foretrækker.

Hvis du bruger Windows OS, vil du sandsynligvis også bruge Microsoft Edge-browseren. Tjek, hvordan du får adgang til Inspect Element på MS Edge:

Åbn det websted, du gerne vil inspicere.
Tryk på de tre lodrette prikker i hjørnet af browservinduet.
Rul ned og vælg Flere værktøjer.
Klik på Udvikler værktøjer.

Du kan også bruge F12 funktionstast, hvis du vil have adgang til Inspect Element hurtigere. Det virker også at højreklikke på websiden og vælge Undersøg.

Sådan bruges Inspect Element på en Mac

Hvis du bruger en Mac, er din foretrukne browser sandsynligvis Safari. Åbning af Inspect Elements på Safari er lidt anderledes end på Chrome og Firefox. Men det er lige så enkelt med disse trin:

Åbn Safari-browseren.
Klik på Safari i hovedfanen.
Vælg Præferencer fra rullemenuen.
Klik på Fremskreden tandhjulsikonet øverst på skærmen.
Marker boksen, der siger Vis Udvikle-menuen i menulinjen.

Gennemgang af disse trin aktiverer Inspect Element-funktionen i din browser. Hvis du ikke aktiverer Inspect Element først, vil du ikke se muligheden, når du åbner et websted.

Når du har fuldført dette trin, skal du blot højreklikke på en åben webside og vælge Inspicer. Du kan også bruge hurtigtastkommandoen: CMD + Option + I (inspicere).

Sådan bruges Inspect Element på en iPhone

Vil du bruge funktionen Inspect Elements til at se, hvordan en mobilversion af en webside vises på en iPhone? Du kan gøre dette og mere med blot et par enkle trin. Men før du ser på et element, skal du aktivere Webinspektør til din iOS-enhed:

Gå til Indstillinger.
Vælg nu Safari.
Rul til bunden og tryk på Avanceret menu.
Tryk nu på vippekontakten for at tænde Webinspektør.

Du skal også sørge for, at menuen Udvikl er aktiveret på din Mac:

Åbn Safari.
Vælg Safari fra de øverste overskrifter.
Klik derefter på Præferencer.
Klik derefter på Fremskreden.
Marker boksen, der siger Vis Udvikle-menuen i menulinjen.

Efter at have aktiveret både iOS-mobilenhed og Mac, vil du se Udvikle-menuen i den øverste bjælke på din Mac. Klik på den for at se den tilsluttede iPhone og den aktive webside på enheden. Når du vælger websiden, åbnes der også et Web Inspector-vindue for den samme side på din Mac-skærm.

Husk dog, at disse anvisninger kun virker for Safari, der kører en Mac, ikke Safari på Windows.

Sådan bruger du Inspect Element i Google Forms

Du kan også bruge Inspect Element på Google Forms. Men hvis du leder efter svar på en quiz, er du ikke heldig. Du finder ikke svarene indlejret i kodningen. Du kan kun se svar, hvis du er skaberen eller redaktøren af formularen. Uanset hvad, hvis du er studerende, der besvarer en quiz i Google Forms, vil du kun se dine egne svar.

Du kan højreklikke på formularen og vælge Inspicere for at se al koden til formularen.

Sådan bruges Inspect Element, når det er blokeret

Nogle gange vil du opdage, at du ikke kan inspicere en webside, og valget Inspicer er nedtonet, hvis du prøver at højreklikke på det. Du tror måske, at det er blokeret, men der er mange måder at undgå dette på:

Metode 1 – Slå Javascript fra

Gå ind i Indstillinger.
Søg "JavaScript”.
Slukke JavaScript.

Metode 2 – Få adgang til udviklerværktøjer den lange vej

I stedet for at højreklikke på musen for at inspicere, skal du gøre dette:

Gå til Indstillinger i din browser.
Vælg Flere værktøjer.
Rul ned og klik på Udvikler værktøjer.

Metode 3 – Brug af funktionstasten

Du kan også prøve at bruge F12 funktionstast på websider, der blokerer for højreklik for Inspect.

Du skal muligvis prøve alle disse metoder, før du finder en, der virker for dig. Som en sidste udvej kan du også prøve at se kildekoden ved at skrive ind view-source: [indtast fuld url].

Sådan bruges Inspect Element på Discord

At tjekke din kodning på Discord er en nem proces. Brug blot Ctrl + Shift + I kommando eller F12 tasten på en Discord-side.

Sådan bruger du Inspect Element på en skole-Chromebook

Hvis din Chromebook blev udstedt af en skole, indebærer brugen af funktionen Inspect Element et par enkle trin:

Højreklik eller tryk med to fingre på websiden og vælg Inspicere.
Trykke Ctrl + Shift + I.
Prøv at bruge view-source:[url] metoden, såsom "view-source://www.wikipedia.com“ uden anførselstegn.

Nogle skoler og organisationer blokerer dog denne funktion. Så hvis det ikke virker for dig, skal du muligvis kontakte din organisation eller skoleadministrator.

Sådan bruger du Inspect Element til at finde svar

Du kan bruge Inspect Element til at finde svar på en række ting som:

Forhåndsvisning af webstedsdesign på mobile enheder.
Find ud af søgeord, som konkurrenterne bruger.
Hastighedsprøver.
Ændring af tekst på en webside.
Find hurtige eksempler for at vise udviklere, hvad du har brug for.

Når du starter panelet Inspect Element, vil du se al kodning for webstedet. Det inkluderer al den indbyggede JavaScript-, CSS- og HTML-kodning. Det er som at se kildekoden på en webside, bortset fra at du kan foretage ændringer i koden. Plus, du kan se eventuelle ændringer implementeret i realtid.

Dette værktøj gør det uvurderligt for marketingfolk, designere og udviklere at se eventuelle designændringer, før de færdiggøres. Men at lave ændringer i kodning med Inspect Element varer ikke evigt. Når du genindlæser siden, går den tilbage til standardtilstanden.

Yderligere ofte stillede spørgsmål

Hvordan bruger jeg kommandoen Inspect Element til at finde svar?

Den eneste måde at finde svar på ved hjælp af Inspect Element-funktionen er, hvis webstedet øjeblikkeligt afslører det efter indsendelse. I dette tilfælde er svar til stede i kodningen.

Ellers ser du blot kodningen til quizzen eller testen, når du bruger Inspect Element-funktionen, samt eventuelle svar, du sender.

Er Inspicer Element ulovligt?

Nej, Inspect Element-værktøjet er ikke ulovligt, det er designet til webudviklere. Det er ikke ulovligt at se kildekoden til et websted, det bliver kun et problem, hvis du bruger de indsamlede oplysninger til ondsindede formål, såsom forsøg på udnyttelse osv.

Er det muligt at deaktivere Inspicer Element i Browser?

Det korte svar er nej.

Du kan ikke deaktivere Inspect Element i en browser. Men du kan indstille parametre, der forhindrer brugere i at udføre visse handlinger som at højreklikke på en webside. Der er adskillige tutorials online til at indstille de rigtige scripts til at deaktivere visse begivenheder. Du kan dog faktisk ikke deaktivere Inspect Element-funktionen i sin helhed.

Lær det indre af en webside at kende

At tjekke funktionen Inspect Element på en webside er sandsynligvis et udviklerværktøj, som du aldrig vidste, du havde brug for - også selvom du ikke selv er en udvikler. Den har tonsvis af design- og marketingapplikationer, der kan få dit websted til at køre mere glat. Og måske give dig et forspring i forhold til en konkurrent.

Hvad bruger du Inspect Element til? Fortæl os om det i kommentarfeltet nedenfor.