Sådan inspiceres elementer på Mac, Windows, iPhone og iPad

Udviklere og UI-designere bruger Inspect Element-funktionen til at ændre websteder online uden at ændre kildekoden. Men hvordan inspicerer man elementer uden at tage et webudviklingskursus?

Inspect Element er et praktisk udviklerværktøj, der kommer ud af boksen med populære webbrowsere. Du skal bare vide, hvordan du implementerer værktøjet med et par klik, mens du browser på websteder.

Du kan lave mange magiske tricks som at ændre hjemmesidens layout, tage tekstløse skærmbilleder, ændre skrifttyper, ændre tal og mere.

Nedenfor finder du en kortfattet trin-for-trin guide til at lære, hvordan du nemt inspicerer elementer.

Hvad er Inspect Element?

Inspect Element er et webudviklingsværktøj, der er tilgængeligt i de fleste webbrowsere. Du kan bruge den til at redigere frontend-kildekoden på ethvert websted, du besøger.

De ændringer, du foretager, sker i en sandkasse i din webbrowser. Så du laver ingen ændringer på det faktiske websted. Også de overfladiske ændringer, du foretager, forsvinder, når du opdaterer siden.

Her er nogle kreative måder at bruge det på:

• Du skal tage et skærmbillede fra en hjemmeside, og teksterne på billedet bekymrer dig. Brug Inspect Element-værktøjet til at slette disse tekster.
• Du ønsker at pranke dine venner ved at vise dem dit navn i New York Times eller Washington Post. Inspect Element er den bedste måde at gøre dette på.
• Test fejlfindingskoder på websteder ved at anvende dem i realtid ved hjælp af Inspect Element-værktøjet. Hvis det virker, kan du ændre backend-kildekoden.
• Som digital marketingmedarbejder kan du afsløre konkurrenternes søgeord, SEO-titler, metatags osv. ved hjælp af dette mægtige webudviklingsværktøj.

Sådan inspiceres elementer på Windows

Det er latterligt nemt at bruge værktøjet Inspect Element på Windows. Nedenfor finder du en trinvis guide til at inspicere elementer ved hjælp af forskellige webbrowsere på Windows:

Google Chrome Inspect Tool

Sådan inspiceres elementer i Windows Chrome-browseren

• Når du bruger Google Chrome , skal du højreklikke hvor som helst på et websted.
• Højreklik-kontekstmenuen dukker op.
• Nederst kan du se Inspicer .
• Klik på Inspicer for at se HTML- og CSS-koderne på et panel i højre side .

Hvordan åbner jeg Inspect Element i Chrome uden at højreklikke?

Der er nogle praktiske genveje til at åbne Inspect Element-værktøjet på Google Chrome til Windows. Disse genvejstaster er som nedenfor:

• Ctrl + Shift + C
• Funktionstasten F12

Ovenstående genvejstaster virker også på Mozilla-browseren til Windows.

Mozilla Inspector Tool

Sådan inspiceres elementer på Windows Mozilla Browser

I Mozilla-browseren er processen den samme som Google Chrome. Inspektør- vinduet vises dog i bunden af ​​browseren i stedet for i højre side, som i Google Chrome.

Microsoft Edge Inspect Tool

Sådan inspiceres elementer i Windows Edge Browser

Overraskende nok fungerer Microsoft Edge's Inspect Element på samme måde som Google Chrome-browseren. Inspicer-værktøjet er tilgængeligt ved at højreklikke. HTML- og CSS-koderne vises også på højre side, ligesom Google Chrome.

Sådan inspiceres elementer på Mac

Bruger du Google Chrome, Mozilla Firefox eller Microsoft Edge på Apples Mac-computere? Hvis ja, så kan du implementere Inspect Element-værktøjet ved at følge trinene nævnt ovenfor i Windows-sektionen.

Men hvis du bruger standard macOS-webbrowseren, Safari, er det et vanskeligt spil at bruge værktøjet Inspect Element. Som standard viser Safari ikke Inspect Element på en Mac. Her er hvad du skal gøre:

Sådan åbnes Inspect Element på Mac

Først og fremmest skal du aktivere udviklerværktøjer på Safari på en Mac. Sådan gør du:

• Kør Safari -browseren .
• Besøg et websted, hvor du vil inspicere webelementer.
• Vælg Safari fra den øverste menulinje i Safari-browseren.
• Klik på Præferencer i kontekstmenuen, der åbnes.
• På skærmen Præferencer skal du vælge Avanceret .
• Markér menuen Vis udvikling nederst på skærmen Avancerede indstillinger .

Du har med succes aktiveret udviklerværktøjer på Safari til Mac. Følg nu disse trin for at bruge Inspect Element:

• Højreklik på ethvert element på et websted, f.eks. en tekst eller et billede .
• En kontekstmenu vises. Nederst kan du se Inspicer element .
• Klik på det for at åbne en fejlretningssektion under webstedet, der viser HTML- og CSS- koder.

Hvad er nøglerne til Inspect Element?

Du leder måske efter genveje til Inspect Element på Mac. Du kan bruge følgende:

• Kommando + Shift + C
• Tryk på kontroltasten , og vælg derefter ethvert element.
• Klik på pegefeltet med to fingre

Sådan inspiceres elementer på Chromebooks

Chromebook bruger Google Chrome som standardbrowser. Derfor, efter at have åbnet et websted, skal du blot højreklikke for at finde indstillingen Inspect Element i kontekstmenuen, der følger.

Hvis du bruger en Chromebook fra arbejde eller skole, stiller du muligvis dette spørgsmål:

Hvorfor kan jeg ikke inspicere på min skole-Chromebook?

De fleste skole- og virksomhedsadministratorer deaktiverer avancerede funktioner på den Chromebook, de giver dig til arbejde eller studie. Da udviklerværktøjer er avancerede funktioner, er chancerne for, at din skole eller dit arbejde, Chromebook ikke viser værktøjet Inspect Element.

Sådan inspiceres elementer på iPad/iPhone

Desværre kan du ikke bruge Inspect Element-værktøjet på en iPhone eller iPad uden en Mac.

iOS og iPadOS har Web Inspector til Safari-appen. Det virker dog kun, hvis du tilslutter mobilenheden til en Mac, hvor du allerede har aktiveret udviklerværktøjer til Safari. Nedenfor er de trin, du kan prøve:

• Åbn appen iPad/iPhone Indstillinger .
• Klik på Safari i venstre navigationsrude.

Åbning af Safari-indstillinger på iPad eller iPhone

• Rul derefter ned i højre side for at finde og vælge Avanceret .

Aktivering af Web Inspector på iPad og iPhone

• Aktiver til/fra-knappen for Web Inspector .
• Tilslut nu den mobile enhed til Mac ved hjælp af USB .
• Godkend iPhone/iPad på Mac.
• Åbn et hvilket som helst websted på en mobilenhed på Safari.
• Kør nu Safari på Mac og vælg Udvikl på den øverste menulinje.
• I kontekstmenuen, der åbnes, skal du kigge efter din mobilenheds navn.
• Hold markøren over mobilenheden for at se alle de åbne websteder.
• Vælg nu et hvilket som helst websted for at se HTML- og CSS-kildekoden på Macs Safari-browser.

Konklusion

Du har undersøgt alle mulige måder at bruge værktøjet Inspect Element til midlertidig redigering af websider. Du har også lært, hvordan du inspicerer elementer for forskellige enheder som Mac, Windows, Chromebook, iPad og iPhone.

Næste gang du skal ændre en webside for sjov eller professionelle behov, så prøv disse metoder. Du vil helt sikkert elske disse ubesværede trin frem for andre komplicerede metoder, der er forklaret andetsteds.

Glem ikke at efterlade kommentarer nedenfor, hvis ovenstående trin hjalp dig, enhver metode, du finder udfordrende, eller hemmelige tips om Inspect Element-værktøjet.

Har du brug for en webside som trykt reference? Lær, hvordan du hurtigt gemmer en webside som PDF nu!