Home
» Mac os
»
MacOS: Aktiver Web Inspector i Safari
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.
Lær hva Safari Web Inspector er (Foto: Courtesy of Apple)
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.
Slik finner du Safari Preferanser-alternativet
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.
Safari Preferanser-menyens Avansert fane for å aktivere Web Inspector i Safari
Naviger til Avansert fanen.
Akkurat under Proxyer alternativet bør du se avmerkingsboksen for Vis utvikler-meny i menylinje. Kryss av i boksen.
Utvikler-menyen på Mac-verktøylinjen
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.
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.
Slik bruker du Safari Web Inspector på macOS Monterey
I kontekstmenyen som dukker opp, klikk Vis Web Inspector. Hurtigtasten for denne handlingen er Option + Command + I.
Visning av Web Inspector
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.
Inspiser element på Safari for Mac
Høyreklikk og velg Inspiser element i kontekstmenyen som åpnes.
Web Inspector i Safari vil åpne.
Inspiser spesifikke elementer på Safari
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.
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:
Kjør Inspector Element-kode for å aktivere Web Inspector i Safari
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.