Utviklere og UI-designere bruker Inspect Element-funksjonen til å endre nettsteder på nettet uten å endre kildekoden. Men hvordan inspisere elementer uten å gjennomføre et webutviklingskurs?
Inspect Element er et hendig utviklerverktøy som kommer ut av esken med populære nettlesere. Du trenger bare å vite hvordan du distribuerer verktøyet med noen få klikk mens du surfer på nettsteder.
Du kan gjøre mange magiske triks som å endre nettstedets layout, ta skjermbilder uten tekst, endre fonter, endre tall og mer.
Nedenfor finner du en kortfattet trinn-for-trinn-guide for å lære hvordan du inspiserer elementer uten problemer.
Hva er Inspiser element?
Inspect Element er et webutviklingsverktøy tilgjengelig i de fleste nettlesere. Du kan bruke den til å redigere front-end-kildekoden til ethvert nettsted du besøker.
Endringene du gjør skjer i en sandkasse i nettleseren din. Så du gjør ingen endringer på det faktiske nettstedet. Dessuten forsvinner de overfladiske endringene du gjør når du oppdaterer siden.
Her er noen kreative måter å bruke den på:
- Du må ta et skjermbilde fra et nettsted, og tekstene på bildet plager deg. Bruk verktøyet Inspiser element for å slette disse tekstene.
- Du vil tulle vennene dine ved å vise dem navnet ditt i New York Times eller Washington Post. Inspect Element er den beste måten å gjøre dette på.
- Test feilsøkingskoder på nettsteder ved å bruke dem i sanntid ved å bruke Inspect Element-verktøyet. Hvis det fungerer, kan du endre backend-kildekoden.
- Som digital markedsfører kan du avsløre konkurrentenes søkeord, SEO-titler, metakoder osv. ved å bruke dette mektige nettutviklingsverktøyet.
Hvordan inspisere elementer på Windows
Å bruke Inspect Element-verktøyet på Windows er latterlig enkelt. Nedenfor finner du en trinnvis guide for å inspisere elementer ved hjelp av ulike nettlesere på Windows:
Google Chrome Inspeksjonsverktøy
- Når du bruker Google Chrome, Høyreklikk hvor som helst på et nettsted.
- Høyreklikk kontekstmenyen vil dukke opp.
- Nederst ser du Undersøke.
- Klikk Undersøke for å se HTML- og CSS-kodene på en panel på høyre side.
Hvordan åpner jeg Inspect Element i Chrome uten å høyreklikke?
Det er noen nyttige snarveier for å åpne Inspect Element-verktøyet på Google Chrome for Windows. Disse hurtigtastene er som nedenfor:
- Ctrl + Skifte + C
- Funksjonstasten F12
Ovennevnte hurtigtaster fungerer også på Mozilla-nettleseren for Windows.
Mozilla Inspector Tool
I Mozilla-nettleseren er prosessen den samme som i Google Chrome. Imidlertid Inspektør vinduet vises nederst i nettleseren i stedet for på høyre side, som i Google Chrome.
Microsoft Edge Inspect Tool
Overraskende nok fungerer Microsoft Edges Inspect Element på samme måte som Google Chrome-nettleseren. Inspiser-verktøyet er tilgjengelig ved å høyreklikke. HTML- og CSS-kodene vises også på høyre side, på samme måte som Google Chrome.
Hvordan inspisere elementer på Mac
Bruker du Google Chrome, Mozilla Firefox eller Microsoft Edge på Apples Mac-datamaskiner? Hvis ja, kan du distribuere Inspect Element-verktøyet ved å følge trinnene nevnt ovenfor i Windows-delen.
Men hvis du bruker standard macOS nettleser, Safari, er det et vanskelig spill å bruke Inspect Element-verktøyet. Som standard viser ikke Safari Inspect Element på en Mac. Her er hva du må gjøre:
Slik åpner du Inspect Element på Mac
Først må du aktivere utviklerverktøy på Safari på en Mac. Dette er hvordan:
- Løpe de Safari-nettleseren.
- Besøk et nettsted der du vil inspisere nettelementer.
- Plukke ut Safari fra den øverste menylinjen i Safari-nettleseren.
- Klikk Preferanser fra kontekstmenyen som åpnes.
- På Skjerm for preferanser, plukke ut Avansert.
- Merk av for Vis Utvikle menyen nederst på Avanserte innstillinger skjerm.
Du har aktivert utviklerverktøy på Safari for Mac. Følg nå disse trinnene for å bruke Inspect Element:
- På ethvert element på et nettsted som en tekst eller et bilde, Høyreklikk.
- En kontekstmeny vises. Nederst ser du Inspisér element.
- Klikk på det for å åpne en feilsøkingsdel under nettstedet som viser HTML og CSS koder.
Hva er nøklene for Inspiser element?
Du leter kanskje etter snarveier for Inspect Element på Mac. Du kan bruke følgende:
- Kommando + Skifte + C
- trykk Kontroll tasten og velg deretter et hvilket som helst element.
- Klikk på styreflaten med to fingre
Slik inspiserer du elementer på Chromebooks
Chromebook bruker Google Chrome som standard nettleser. Derfor, etter å ha åpnet et nettsted, høyreklikker du bare for å finne alternativet Inspiser element i kontekstmenyen som følger.
Hvis du bruker en Chromebook fra jobb eller skole, stiller du kanskje dette spørsmålet:
Hvorfor kan jeg ikke inspisere på min skole-Chromebook?
De fleste skole- og bedriftsadministratorer deaktiverer avanserte funksjoner på Chromebooken de gir deg til jobb eller studier. Siden utviklerverktøy er avanserte funksjoner, er sjansen stor for at Chromebooken din på skolen eller jobben ikke viser Inspiser Element-verktøyet.
Hvordan inspisere elementer på iPad/iPhone
Dessverre kan du ikke bruke Inspect Element-verktøyet på en iPhone eller iPad uten Mac.
iOS og iPadOS har Web Inspector for Safari-appen. Det fungerer imidlertid bare hvis du kobler mobilenheten til en Mac som du allerede har aktivert utviklerverktøy for Safari på. Nedenfor er trinnene du kan prøve:
- Åpne iPad/iPhone Innstillinger app.
- Klikk Safari på venstre navigasjonsrute.
- Rull deretter ned på høyre side for å finne og velge Avansert.
- Aktiver bryteren for Webinspektør.
- Koble nå den mobile enheten til Mac ved hjelp av USB.
- Autoriser iPhone/iPad på Mac.
- Åpne et hvilket som helst nettsted på en mobilenhet på Safari.
- Kjør Safari på Mac og velg Utvikle på den øverste menylinjen.
- På hurtigmenyen som åpnes, se etter mobilenhetens navn.
- Hold markøren over mobilenheten for å se alle de åpne nettstedene.
- Velg nå et hvilket som helst nettsted for å se HTML- og CSS-kildekoden på Macs Safari-nettleser.
Konklusjon
Du har utforsket alle mulige måter å bruke Inspect Element-verktøyet for midlertidig redigering av nettsider. Du har også lært hvordan du inspiserer elementer for ulike enheter som Mac, Windows, Chromebook, iPad og iPhone.
Neste gang du trenger å endre en nettside for moro skyld eller for profesjonelle behov, prøv disse metodene. Du vil definitivt elske disse uanstrengte trinnene fremfor andre kompliserte metoder forklart andre steder.
Ikke glem å legge igjen kommentarer nedenfor hvis trinnene ovenfor hjalp deg, hvilken som helst metode du synes er utfordrende, eller noen hemmelige tips om Inspiser Element-verktøyet.
Trenger du en nettside som trykt referanse? Lær hvordan raskt lagre en nettside som PDF nå!