MacOS: Aktiver Web Inspector i Safari

Hvis du vil se kildekoden til en webside i Apple Safari for macOS Sierra, må du aktivere Safari Web Inspector-verktøyet ved å bruke følgende metoder.

Webløsning utviklere som Apple, Google, osv. leverer et verktøy for å se de underliggende kodene. Utviklerne bruker dette hovedsakelig for å feilsøke og visualisere endringer som gjøres på en aktiv nettside uten å forstyrre den faktiske koden på serveren. Dette verktøyet har imidlertid blitt populært blant innholdskapere og teknisk kyndige internettbrukere som ønsker å redigere en aktiv nettside for personlige eller profesjonelle formål. Hvis du er en av disse, kan du lese artikkelen til slutt for å vite alt om Safari Web Inspector og hvordan du inspiserer elementer.

Innhold

• 1 Hva er Safari Web Inspector?
• 2 Hvordan aktivere Safari Web Inspector i Safari 10 og nyere
• 3 Hvordan bruke Safari Web Inspector på macOS
• 4 Hvordan åpne Safari Web Inspector i eldre versjoner av macOS
  • 4.1 Safari Web Inspector: Avsluttende ord

Hva er Safari Web Inspector?

Web Inspector er en del av pakken med utviklerverktøy som Apple tilbyr nettside- og apputviklere over hele verden. Verktøyet er tilgjengelig for både macOS og iOS-enheter. Utviklere kan enkelt modifisere, optimalisere og feilsøke nettsteder for å oppnå best mulig ytelse for sine nett eiendommer.

Web Inspector-verktøyet på Safari bringer de fleste nettressurser under ett enhetlig grensesnitt. Verktøyet separerer også ressursene og deres parametere i dedikerte faner, slik at du ikke blir overveldet av så mange koder og alternativer. Web Inspector gir deg også en tidslinjevisning av nettstedets minne, så du enkelt kan feilsøke minnet. Videre, som utvikler, kan du justere og optimalisere mer enn 150 populære CSS-egenskaper som du trenger i utviklingen av en funksjonell nettside.

I Web Inspector-verktøyet får du følgende faner for nettressurser:

• Elementer
• Konsoll
• Kilder
• Nettverk
• Tidslinjer
• Lagring
• Grafikk
• Lag
• Revisjon

Hvordan aktivere Safari Web Inspector i Safari 10 og nyere

Som standard deaktiverer Apple Mac Web Inspector i Safari. Dette er for å forhindre unødvendig rot i brukergrensesnittet (UI) til nettleseren. Hvis du er utvikler, innholdsskaper eller en ekspert Mac-bruker, kan du aktivere funksjonen ved å følge disse trinnene:

• Åpne Safari-appen på MacBook eller iMac.
• Sikre at du har klikket på nettleseren for å få Safari-ikonet på Mac-verktøylinjen.

• Klikk Safari i øverste venstre hjørne og velg Preferanser.
• Alternativt kan du bruke hurtigtastene Command + , for å vise Preferanse-menyen.
• Mens du er i Preferanser-menyen, må du være på Generelt fanen.

• Naviger til Avansert fanen.
• Akkurat under Proxyer alternativet bør du se avmerkingsboksen for Vis utvikler-meny i menylinje. Kryss av i boksen.

• Nå vil utvikler-menyen i Safari vises på Mac-verktøylinjen.

Slik kan du aktivere Web Inspector-funksjonen i din Mac-nettleser Safari. Stegene er lignende for den nyeste macOS-utgaven Ventura, og tidligere som Monterey, Big Sur, Catalina, osv., til Jaguar.

Les også: Html 4.01

Så langt har du lært hvordan du får Web Inspector-funksjonen i Mac Safari-appen. Lær nedenfor hvordan du bruker den på Safari for live-nettsteder:

Hvordan bruke Safari Web Inspector på macOS

Finn nedenfor stegene for å bruke Web Inspector-verktøyet til webutvikling, innholdsskaping eller andre formål. I denne artikkelen viser jeg trinnene ved bruk av macOS Monterey-operativsystemet. Imidlertid er stegene ganske like fra macOS Jaguar til Ventura.

• Åpne Safari og besøk hvilken som helst nettside du ønsker å inspisere.
• Det er to måter å inspisere de underliggende HTML/CSS-kodene til en nettside eller gjøre endringer ved hjelp av Apple utviklerverktøyet Web Inspector. Disse er:
  • Utvikle > Vis Web Inspector.
  • Høyreklikk > Inspiser element.
• For å bruke den første, gå til Mac-verktøylinjen for Safari-nettleseren og klikk på Utvikle menyen.

• I kontekstmenyen som dukker opp, klikk Vis Web Inspector. Hurtigtasten for denne handlingen er Option + Command + I.

• Dette vil åpne Web Inspector-verktøyet i den nederste halvdelen av nettleseren. Kodene du ser gjelder hele URL-en eller nettsiden du har fått tilgang til.
• Hvis du vil visualisere den underliggende koden for et spesifikt element på nettsiden uten å åpne koden for hele nettsiden, velg elementet du ønsker å inspisere.

• Høyreklikk og velg Inspiser element i kontekstmenyen som åpnes.
• Web Inspector i Safari vil åpne.

• Men denne gangen vil Safari ta deg direkte til den underliggende HTML- eller CSS-koden til elementet du auditorerer.
• I dette verktøyet får du HTML- og CSS-kodene for nettsideelementet du inspiserer.

Les også: Technipages forklarer CSS

Hvordan åpne Safari Web Inspector i eldre versjoner av macOS

Anta at du er på en Mac eldre enn Jaguar og trenger å bruke Web Inspector-verktøyet. Hvis du ikke finner de ovennevnte stegene på den Mac-en, kan du utføre en enkel kode for å aktivere Web Inspector. Slik gjør du det:

• Åpne Programmer og gå til Verktøy mappen.
• Inni Verktøy bør du finne Terminal. Det er kommandoprompten for macOS-datamaskiner.
• Nå, åpne Terminal kommandolinjegrensesnittet og skriv inn følgende enkle kommando:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Trykk Retur for å utføre kommandoen.
• Nå kan du åpne en webside i Safari og høyreklikke eller holde nede museknappen hvor som helst på siden til kontekstmenyen vises.
• Der, klikk på Inspiser element alternativet for å se de underliggende CSS- og HTML-kodene til nettsiden.

Safari Web Inspector: Avsluttende ord

Så dette er metodene for å aktivere Web Inspector i Safari uten problemer. Du kan følge stegene selv og komme i gang med utvikling eller innholdsskaping på noen minutter. Du lærte metodene for å aktivere Inspiser Element på Safari for både nye og eldre macOS-utgaver. Hvis jeg har gått glipp av noen metode for å få og bruke Web Inspector, nøl ikke med å gi meg beskjed ved å legge igjen en kommentar nedenfor.

Neste opp, de beste koding-appene for iPad.