Hvordan inspisere elementer på Mac, Windows, iPhone og iPad

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å selve 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. Inspiser 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 webutviklingsverktø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

Hvordan inspisere elementer i Windows Chrome-nettleseren

• Når du bruker Google Chrome , høyreklikk hvor som helst på et nettsted.
• Høyreklikk kontekstmenyen vil dukke opp.
• Nederst ser du Inspiser .
• Klikk på Inspiser for å se HTML- og CSS-kodene på et 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 + Shift + C
• Funksjonstasten F12

Ovennevnte hurtigtaster fungerer også på Mozilla-nettleseren for Windows.

Mozilla Inspector Tool

Hvordan inspisere elementer på Windows Mozilla-nettleseren

I Mozilla-nettleseren er prosessen den samme som i Google Chrome. Inspektørvinduet vil imidlertid vises nederst i nettleseren i stedet for på høyre side, som i Google Chrome.

Microsoft Edge Inspect Tool

Hvordan inspisere elementer på Windows Edge-nettleseren

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:

• Kjør Safari -nettleseren .
• Besøk et nettsted der du vil inspisere nettelementer.
• Velg Safari fra den øverste menylinjen i Safari-nettleseren.
• Klikk på Innstillinger fra hurtigmenyen som åpnes.
• På skjermbildet Preferanser velger du Avansert .
• Merk av for Vis utvikling -menyen nederst på skjermbildet Avanserte innstillinger .

Du har aktivert utviklerverktøy på Safari for Mac. Følg nå disse trinnene for å bruke Inspiser element:

• Høyreklikk på et hvilket som helst element på et nettsted som en tekst eller et bilde .
• En kontekstmeny vises. Nederst ser du Inspiser 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 + Shift + C
• Trykk på kontrolltasten og velg 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 appen for iPad/iPhone -innstillinger .
• Klikk Safari i navigasjonsruten til venstre.

Åpne Safari-innstillinger på iPad eller iPhone

• Bla deretter ned på høyre side for å finne og velge Avansert .

Aktivering av Web Inspector på iPad og iPhone

• Aktiver bryteren for Web Inspector .
• Koble nå den mobile enheten til Mac med 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 du raskt lagrer en nettside som PDF nå!