Hvordan bruke Inspect Element

De fleste er ikke klar over at det er en skattekiste med utviklerverktøy til deres disposisjon, og at den er skjult i favorittleseren.

Hver nettleser tilbyr utviklerverktøy for å sjekke kodingen til et nettsted, men det er en utenlandsk enhet til den gjennomsnittlige internettbrukeren. Når alt kommer til alt, hvem vil se på kodingen av et nettsted, ikke sant?

Det viser seg at det er mange ting du kan lære ved å se på kodingen av et nettsted. Les videre for å finne ut hva inspeksjonselementfunksjonen har å tilby og hvordan du bruker den.

Hvordan bruke Inspect Element

De fleste nettlesere har verktøy for å inspisere elementer på et nettsted, men de fungerer generelt på samme måte.

Bruke Inspect Element i Google Chrome

Åpne nettstedet du vil inspisere.
Høyreklikk hvor som helst på siden og velg Undersøke .

ELLER
Klikk på de tre vertikale prikkene i høyre hjørne av verktøylinjen.
Gå til Flere verktøy .
Å velge Utviklerverktøy .

ELLER
trykk F12 hurtigtast på PC eller CMD + Alternativer + I på en Mac.

Bruke Inspect Element i Microsoft Edge

Åpne et nettsted.
Klikk på de tre vertikale prikkene øverst til høyre på nettleserens verktøylinje.
Rull ned og klikk på Flere verktøy .
Klikk på Utviklerverktøy .

ELLER
Høyreklikk hvor som helst på nettstedet.
Klikk på Undersøke .

ELLER
trykk Ctrl + Shift + I .

En av disse tre metodene vil gi deg det samme resultatet.

Hvis du gjorde dette riktig, vil du se en ny rute åpnes nederst i nettleseren din. Dette er utviklerverktøyene og inkluderer fanen Elementer. Dette er verktøyet du trenger for å inspisere element.

se Outlook-kalenderen i Google-kalenderen

Panelet åpnes nederst på skjermen som standard, men du kan alltid endre hvordan det vises. Følg disse enkle trinnene for å plassere panelet Developer Tools:

Klikk på de tre vertikale punktene i øvre hjørne av panelet Developer Tools.
Velg dokkside (venstre, bunn eller høyre) eller koble fra til et eget vindu.

Hvis du holder markøren ved siden av kanten av rammen for utviklerverktøypanelet og drar, blir arbeidsområdet begrenset eller utvidet. Hvis du for eksempel velger å forankre panelet til høyre i nettleservinduet, kan du prøve å sveve på venstre kant. Du kan dra panelet for å endre størrelse på det når du ser pilmarkøren.

Hvordan bruke Inspect Element for å finne svar

Du kan bruke Inspect Element til å finne svar på en rekke ting som:

Forhåndsvisning av nettstedsdesign på mobile enheter.
Finn ut nøkkelord som konkurrentene bruker.
Hastighetstester.
Endring av tekst på en webside.
Finn raske eksempler for å vise utviklere hva du trenger.

Når du starter Inspect Element-panelet, ser du all kodingen for nettstedet. Det inkluderer all JavaScript, CSS og HTML-koding innebygd i den. Det er som å se kildekodingen til en webside, bortsett fra at du kan gjøre endringer i koden. I tillegg får du se eventuelle endringer implementert i sanntid.

Dette verktøyet gjør det uvurderlig for markedsførere, designere og utviklere å se på designendringer før de fullføres. Imidlertid varer endringer i koding med Inspect Element ikke for alltid. Når du laster siden inn på nytt, går den tilbake til standardtilstanden.

Hvordan bruke Inspect Element på Chromebook

Standard nettleser på Chromebooks er Google, så følg instruksjonene for Chrome-nettleseren for å få tilgang Inspisér element . Her er et lite oppfriskningskurs for deg:

Åpne et nettsted.
Klikk på de tre vertikale linjene øverst til høyre på verktøylinjen.
Å velge Flere verktøy .
Klikk på Utviklerverktøy .

Du kan også bruke høyreklikkemetoden eller F12 funksjonstasten for å komme til Developer Tools raskere.

Hvordan bruke Inspect Element på Android

Å kjøre Inspect Element på en Android-enhet er litt annerledes. Sjekk ut hvordan du kommer til Inspect Element-panelet på Android:

trykk F12 funksjonstast.
Velge Bytt enhetslinje .
Velg Android-enheten fra rullegardinmenyen.

Når du velger en bestemt Android-enhet, vil du legge merke til at en mobilversjon av nettstedet lastes inn. Herfra kan du bruke Inspect Element-funksjonen på Android-enheten din fra skrivebordet ditt.

Denne metoden fungerer for både Chrome- og Firefox-nettlesere fordi de har en funksjon i utviklerverktøyene deres kalt Device Simulation.

Det fungerer også på samme måte for iPhone-enheter. Du trenger bare å velge den rette i rullegardinmenyen.

Hvordan bruke Inspect Element på Windows

Inspect Element-verktøyet er ikke nødvendigvis OS-spesifikt, men er nettleserspesifikt. Det betyr at utviklerverktøy er en funksjon i nettleseren du bruker, og ikke nødvendigvis Windows. Du kan imidlertid komme til Inspect Element-panelet uansett hvilken nettleser du foretrekker.

Hvis du bruker Windows OS, vil du sannsynligvis også bruke Microsoft Edge-nettleseren. Sjekk ut hvordan du får tilgang til Inspect Element på MS Edge:

Åpne nettstedet du vil inspisere.
Trykk på de tre vertikale punktene i hjørnet av nettleservinduet.
Bla ned og velg Flere verktøy .
Klikk på Utviklerverktøy .

Du kan også bruke F12-funksjonstasten hvis du vil få tilgang til Inspect Element raskere. Høyreklikk på websiden og velg Inspect fungerer også.

Hvordan bruke Inspect Element på Chrome

Det er tre måter å få tilgang til Inspect Element på Chrome. Du kan:

unturned hvordan du spiller med venner

Klikk på innstillingsmenyen eller tre vertikale prikker i nettleseren og gå til Flere verktøy> Utviklerverktøy .
Høyreklikk på websiden og velg Undersøke .
Bruk Ctrl + Shift + I (Undersøke).

Den første måten er mer intuitiv for nye brukere av Inspect Element å huske. Men hvis du planlegger å bruke denne funksjonen ofte, kan hurtigtastene komme til nytte.

Hvordan bruke Inspect Element på Mac

Hvis du bruker en Mac, er det sannsynligvis Safari du velger. Åpne Inspect Elements på Safari er litt annerledes enn på Chrome og Firefox. Men det er like enkelt med disse trinnene:

Åpne Safari-nettleseren.
Klikk på Safari i topptekstfanen.
Å velge Preferanser fra rullegardinmenyen.
Klikk på Avansert tannhjulikon øverst på skjermen
Merk av i boksen som sier Vis Utvikle-menyen i menylinjen .

Hvis du går gjennom disse trinnene, kan du inspisere elementfunksjonen i nettleseren din. Hvis du ikke aktiverer Inspect Element først, ser du ikke alternativet når du åpner et nettsted.

Når du har fullført dette trinnet, høyreklikker du bare på en hvilken som helst åpen webside og velger Inspiser. Du kan også bruke hurtigtastkommandoen: CMD + Alternativ + I (undersøke).

Hvordan bruke Inspect Element på Google Forms

Du kan også bruke Inspect Element på Google Forms. Men hvis du leter etter svar på en quiz, har du ikke lykke til. Du finner ikke svarene innebygd i kodingen.

Du kan bare se svarene hvis du er skaper eller redaktør av skjemaet. Men hvis du er student som svarer på en quiz på Google Forms, ser du bare dine egne svar.

Uansett kan du høyreklikke på skjemaet og velge Undersøke for å se all koden for skjemaet.

Hvordan bruke Inspect Element på iPhone

Vil du bruke Inspect Elements-funksjonen til å se hvordan en mobilversjon av en webside vises på en iPhone? Du kan gjøre dette og mer med bare noen få enkle trinn. Men før du ser på et element, må du aktivere Web Inspector for iOS-enheten din:

Gå til Innstillinger .
Å velge Safari .
Bla til bunnen og trykk på Avansert meny .
Trykk for å slå på Webinspektør .

Du må også sørge for at Develop-menyen er aktivert på din Mac:

Åpne Safari.
Å velge Safari fra topptekstene.
Klikk på Preferanser .
Klikk på Avansert .
Merk av i boksen som sier Vis Utvikle-menyen i menylinjen .

Etter at du har aktivert både iOS-mobilenhet og Mac, ser du Utvikle-menyen i topplinjen på Mac-en. Klikk på den for å se den tilkoblede iPhone og websiden som er aktiv på enheten. Når du velger websiden, åpnes også et webinspektørvindu for den samme siden på Mac-skjermen.

Husk imidlertid at disse instruksjonene bare fungerer for Safari som kjører en Mac, ikke Safari på Windows.

Hvordan bruke inspiserelement når det er blokkert

Noen ganger vil du oppdage at du ikke kan inspisere en webside, og Inspect-utvalget er nedtonet hvis du prøver å høyreklikke på det. Du tror kanskje det er blokkert, men det er mange måter å gjøre dette på:

Metode 1 - Slå av Javascript

Gå inn til Innstillinger .
SøkJavaScript.
Slå av JavaScript .

Metode 2 - Få tilgang til utviklerverktøy på lang vei

I stedet for å høyreklikke på musen for å inspisere, gjør du dette:

Gå til Innstillinger i nettleseren din.
Å velge Flere verktøy .
Rull ned og klikk på Utviklerinnstillinger .

Metode 3 - Bruke funksjonstasten

legg til tilpasset skrift til Google Docs

Du kan også prøve å bruke F12 funksjonstast på websider som blokkerer høyreklikk for Inspect.

Du må kanskje prøve alle disse metodene før du kommer over en som fungerer for deg. Som en siste utvei kan du også prøve å se kildekoden ved å skrive inn visningskilde: [skriv inn full url] .

Hvordan bruke Inspect Element on Discord

Å sjekke ut kodingen din på Discord er en enkel prosess. Bare bruk Ctrl + Shift + I kommando eller F12 på en Discord-side.

Hvordan bruke Inspect Element på en Chromebook på skolen

Hvis Chromebooken din ble utstedt av en skole, bruker Inspect Element-funksjonen noen få enkle trinn:

Høyreklikk eller trykk med to fingre på websiden og velg Undersøke .
ELLER
trykk Ctrl + Shift + I

Noen skoler og organisasjoner blokkerer imidlertid denne funksjonen. Så hvis det ikke fungerer for deg, kan det hende du må kontakte organisasjonen eller skoleadministratoren.

Ytterligere spørsmål

Hvordan bruker jeg Inspect Element Command til å finne svar?

Den eneste måten å finne svar ved hjelp av Inspect Element-funksjonen er hvis nettstedet umiddelbart avslører det etter innsending. I dette tilfellet er svarene til stede i kodingen.

Ellers ser du bare kodingen for quizen eller testen når du bruker Inspect Element-funksjonen, samt eventuelle svar du sender inn.

Er Inspect Element ulovlig?

Nei, Inspect Element er ikke ulovlig. Å se kildekoden for et nettsted er ikke ulovlig, det blir bare et problem hvis du bruker informasjonen som er samlet inn til skjemmende formål, for eksempel forsøk på utnyttelse osv.

Er det mulig å deaktivere inspiseringselement i nettleseren?

Det korte svaret er nei.

Du kan ikke deaktivere Inspect Element i en nettleser. Men du kan angi parametere som hindrer brukere i å utføre bestemte handlinger, for eksempel å høyreklikke på en webside. Det er mange opplæringsprogrammer på nettet for å sette de riktige skriptene for å deaktivere visse hendelser. Du kan imidlertid ikke deaktivere Inspect Element-funksjonen i sin helhet.

Bli kjent med innmaten på en webside

Å sjekke ut Inspect Element-funksjonen på en webside er sannsynligvis et utviklerverktøy du aldri visste at du trengte - selv om du ikke selv er en utvikler. Den har mange design- og markedsføringsapplikasjoner som kan gjøre nettstedet ditt jevnere. Og kanskje gi deg et forsprang på en konkurrent.

Hva bruker du Inspect Element til? Fortell oss om det i kommentarfeltet nedenfor.