MacOS: Aktiver Web Inspector i Safari

Hvis du ønsker at se kildekoden på en webside i Apple Safari for macOS Sierra, skal du aktivere Safari Web Inspector-værktøjet ved at følge disse metoder.

Udviklere af webbrowserer som Apple, Google osv. tilbyder et værktøj til at se de underliggende koder. Udviklere bruger det meste dette til at fejlfinde og visualisere ændringer, der er foretaget på en live hjemmeside, uden at forstyrre den faktiske kode på serveren. Dette værktøj er dog nu blevet populært blandt indholdsproducenter og teknisk kyndige internetbrugere, der ønsker at redigere en live hjemmeside til personlige eller professionelle formål. Hvis du er en af dem, så læs artiklen til slut for at vide alt om Safari Web Inspector og hvordan man inspicerer elementer.

Indhold

• 1 Hvad Er Safari Web Inspector?
• 2 Hvordan Aktiverer Man Safari Web Inspector i Safari 10 og Øvre?
• 3 Hvordan Bruger Man Safari Web Inspector på macOS
• 4 Hvordan Åbner Man Safari Web Inspector i Ældre Versioner af macOS
  • 4.1 Safari Web Inspector: Afsluttende Bemærkninger

Hvad Er Safari Web Inspector?

Web Inspector er en del af pakken af udviklingsværktøjer, som Apple tilbyder til websted- og app-udviklere verden over. Værktøjet er tilgængeligt for både macOS og iOS-enheder. Udviklere kan problemfrit ændre, optimere og fejlfinde hjemmesider for at få maksimal ydeevne til deres online ejendom.

Web Inspector-værktøjet på Safari bringer de fleste webstedressourcer under én samlet grænseflade. Værktøjet adskiller også ressourcerne og deres parametre i dedikerede faner, så du ikke bliver overvældet af så mange koder og muligheder. Web Inspector giver dig også en tidslinjevisning af webstedets hukommelse, så du nemt kan fejlfinde hukommelsen. Desuden kan du som udvikler justere og optimere mere end 150 populære CSS-egenskaber, som du har brug for til at udvikle en funktionel hjemmeside.

I Web Inspector-værktøjet får du følgende faner for webstedressourcer:

• Elementer
• Konsol
• Kilder
• Netværk
• Tidslinjer
• Lagring
• Grafik
• Lag
• Revision

Hvordan Aktiverer Man Safari Web Inspector i Safari 10 og Øvre?

Som standard deaktiverer Apple Mac Web Inspector i Safari. Dette er for at forhindre unødvendig rod på webbrowserens brugergrænseflade (UI). Hvis du er en udvikler, indholdsproducent og ekspert Mac-bruger, vil du måske aktivere funktionen ved at følge disse trin:

• Åbn Safari-appen på din MacBook eller iMac.
• Sørg for, at du har klikket på browseren for at få Safari-ikonet på Mac-værktøjslinjen.

• Klik Safari i øverste venstre hjørne og vælg Præferencer.
• Alternativt kan du bruge genvejstasten Command + , for at vise præferencer-menuen.
• Mens du er i Præferencer-menuen, skal du være på Generelt-fanen.

• Naviger til Avanceret-fanen.
• Lige under Proxyer-muligheden bør du se afkrydsningsfeltet for Vis udvikler-menu i menulinjen. Kryds af i boksen.

• Nu vil Safari udvikler-menuen vises på Mac-værktøjslinjen.

Denne metode kan du bruge til at aktivere Web Inspector-funktionen på din Mac-browser Safari. Trinene er ens for den nyeste macOS-version Ventura og tidligere versioner som Monterey, Big Sur, Catalina osv., indtil Jaguar.

Læs også: Html 4.01

Indtil nu har du lært, hvordan du får Web Inspector-funktionen på Mac Safari-appen. Læs nedenfor hvordan du bruger den på Safari til live hjemmesider:

Hvordan Bruger Man Safari Web Inspector på macOS

Find nedenfor trinene til at kalde Web Inspector-værktøjet til webudvikling, indholdsproduktion eller andre formål. I denne artikel viser jeg trinene ved hjælp af macOS Monterey operativsystemet. Dog er trinene ret ens fra macOS Jaguar til Ventura.

• Åbn Safari og besøg en hvilken som helst hjemmeside, som du vil inspicere.
• Der er to måder at inspicere de underliggende HTML/CSS-koder på en hjemmeside eller foretage ændringer ved hjælp af Apples udvikler værktøj Web Inspector. Disse er:
  • Udvikler > Vis Web Inspector.
  • Højreklik > Inspicér element.
• For at bruge den første, skal du gå til Mac-værktøjslinjen for Safari-browseren og klikke på Udvikler-menuen.

• I kontekstmenuen, der dukker op, skal du klikke på Vis Web Inspector. Genvejstasten til denne handling er Option + Command + I.

• Dette åbner Web Inspector-værktøjet i den nederste del af webbrowseren. Koderne, du ser, er for hele URL'en eller web siden, du har fået adgang til.
• Hvis du vil visualisere den underliggende kode for et specifikt element på web-siden uden at åbne koden for hele web-siden, skal du vælge det element, du vil inspicere.

• Højreklik og vælg Inspicér element i kontekstmenuen, der åbnes.
• Web Inspector i Safari vil åbne.

• Men denne gang vil Safari tage dig direkte til den underliggende HTML- eller CSS-kode for det element, du auditerer.
• I dette værktøj får du HTML- og CSS-koderne for det websidelement, du inspicerer.

Læs også: Technipages Forklarer CSS

Hvordan Åbner Man Safari Web Inspector i Ældre Versioner af macOS

Hvis du er på en Mac, der er ældre end Jaguar og har brug for at bruge Web Inspector-værktøjet. Hvis du ikke finder de ovenstående trin i den Mac, kan du udføre en simpel kode for at aktivere Web Inspector. Her er hvordan det gør:

• Åbn Applikationer og gå til Værktøjer mappen.
• Inde i Værktøjer, bør du finde Terminal. Det er kommandoprompten for macOS-computere.
• Nu skal du starte Terminal kommandolinjegrænsefladen og indtaste følgende enkle kommando:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Tryk på Return for at køre kommandoen.
• Nu kan du åbne en webside i Safari og højreklikke eller holde museknappen nede hvor som helst på siden, indtil kontekstmenuen vises.
• Der skal du klikke på Inspicér element for at se de underliggende CSS- og HTML-koder for websiden.

Safari Web Inspector: Afsluttende Bemærkninger

Så disse er metoderne til at aktivere Web Inspector i Safari uden besvær. Du kan følge trinene selv og komme i gang med udvikling eller indholdsproduktion på få minutter. Du har lært metoderne til at aktivere Inspector Element på Safari for både nye og ældre macOS-versioner. Hvis jeg har overset nogen metode til at få og bruge Web Inspector, så tøv ikke med at lade mig vide det ved at efterlade en kommentar nedenfor.

Næste op, de bedste kodeapps til iPad.