MacOS: Aktivera Web Inspector i Safari

Om du vill visa källkoden för en webbsida i Apple Safari för macOS Sierra måste du aktivera verktyget Safari Web Inspector med hjälp av följande metoder.

Webbläsarutvecklare som Apple, Google, etc., tillhandahåller ett färdigt verktyg för att se de underliggande koderna. Utvecklare använder detta främst för att debugga och visualisera ändringar som görs på en live-webbplats utan att störa den faktiska koden på servern. Men detta verktyg har nu blivit populärt bland innehållsskapare och teknikintresserade internetanvändare som vill redigera en live-webbplats för personliga eller professionella ändamål. Om du är en av dessa, läs artikeln till slutet för att veta allt om Safari Web Inspector och hur man inspekterar element.

Innehåll

• 1 Vad är Safari Web Inspector?
• 2 Hur man aktiverar Safari Web Inspector i Safari 10 och senare
• 3 Hur man använder Safari Web Inspector på macOS
• 4 Hur man öppnar Safari Web Inspector i äldre versioner av macOS
  • 4.1 Safari Web Inspector: Avslutande ord

Vad är Safari Web Inspector?

Web Inspector är en del av utvecklingsverktygen som Apple erbjuder till webb- och apputvecklare runt om i världen. Verktyget är tillgängligt för både macOS och iOS-enheter. Utvecklare kan enkelt modifiera, optimera och debugga webbplatser för att uppnå maximal prestanda för sina online-egendomar.

Web Inspector-verktyget i Safari samlar de flesta webbplatsresurser under ett enhetligt gränssnitt. Verktyget separerar också resurser och deras parametrar i dedikerade flikar så att du inte blir överväldigad av för många koder och alternativ. Web Inspector ger dig också en tidslinjevy av webbplatsens minne så att du lätt kan debugga minnet. Dessutom kan du som utvecklare justera och optimera mer än 150 populära CSS-egenskaper som du behöver för att utveckla en funktionell webbplats.

På Web Inspector-verktyget får du följande flikar för webbplatsresurser:

• Element
• Konsol
• Källor
• Nätverk
• Tidslinjer
• Lagring
• Grafik
• Skikt
• Granskning

Hur man aktiverar Safari Web Inspector i Safari 10 och senare

Som standard inaktiverar Apple Mac Web Inspector i Safari. Detta görs för att förhindra onödig rörighet i webbbläsarens användargränssnitt (UI). Men om du är en utvecklare, innehållsskapare och expert Mac-användare kan du vilja aktivera funktionen genom att följa dessa steg:

• Öppna Safari-appen på din MacBook eller iMac.
• Se till att du har klickat på webbläsaren för att få Safari-ikonen på Mac-verktygsfältet.

• Klicka på Safari i det övre vänstra hörnet och välj Inställningar.
• Alternativt kan du använda snabbtangenten Command + , för att visa menyn Inställningar.
• Medan du är i menyn Inställningar, bör du vara på fliken Allmänt.

• Navigera till fliken Avancerat.
• Precis under alternativet Proxy bör du se kryssrutan för Visa utvecklarmenyn i menyraden. Markera rutan.

• Nu kommer utvecklarmenyn i Safari att visas på Mac-verktygsfältet.

Läs också: Html 4.01

Så långt har du lärt dig hur man får Web Inspector-funktionen på Mac Safari-appen. Lär dig nedan hur du använder den på Safari för live-webbplatser:

Hur man använder Safari Web Inspector på macOS

Hitta nedan stegen för att kalla på Web Inspector-verktyget för webb utveckling, innehållsskapande eller andra syften. I den här artikeln visar jag stegen med operativsystemet macOS Monterey. Stegen är dock ganska lika från macOS Jaguar till Ventura.

• Öppna Safari och besök vilken webbplats som helst som du vill inspektera.
• Det finns två sätt att inspektera de underliggande HTML/CSS-koderna för en webbplats eller göra ändringar med hjälp av Apples utvecklarverktyg Web Inspector. Dessa är:
  • Utveckla > Visa Web Inspector.
  • Högerklicka > Inspektera element.
• För att använda det första, gå till Mac-verktygsfältet för Safari-webbläsaren och klicka på Utveckla menyn.

• I kontextmenyn som dyker upp, klicka på Visa Web Inspector. Snabbtangenten för denna åtgärd är Option + Command + I.

• Detta öppnar Web Inspector-verktyget i den nedre halvan av webbläsaren. Koderna du ser är för hela URL:en eller webbsidan du har besökt.
• Om du vill visualisera den underliggande koden för ett specifikt element på webbsidan utan att öppna koden för hela webbsidan, välj det element som du vill inspektera.

• Högerklicka och välj Inspektera element i kontextmenyn som öppnas.
• Safari Web Inspector kommer att öppnas.

• Men denna gång kommer Safari direkt att ta dig till den underliggande HTML- eller CSS-koden för det element du granskar.
• I detta verktyg får du HTML- och CSS-koderna för webbsideelementet som du inspekterar.

Läs också: Technipages förklarar CSS

Hur man öppnar Safari Web Inspector i äldre versioner av macOS

Anta att du är på en Mac äldre än Jaguar och behöver använda Web Inspector-verktyget. Om du inte hittar de ovanstående stegen på den Macen, kan du köra en enkel kod för att aktivera Web Inspector. Så här gör du:

• Öppna Program och gå till Verktyg -mappen.
• Inuti Verktyg bör du hitta Terminal. Det är kommandotolken för macOS-datorer.
• Starta nu Terminal kommandoradsgränssnittet och skriv in följande enkla kommando:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Tryck på Return för att köra kommandot.
• Nu kan du öppna en webbsida i Safari och högerklicka eller hålla ner musknappen var som helst på sidan tills kontextmenyn visas.
• Där klickar du på alternativet Inspektera element för att visa de underliggande CSS- och HTML-koderna på webbplatsen.

Safari Web Inspector: Avslutande ord

Dessa är metoderna för att aktivera Web Inspector i Safari utan problem. Du kan följa stegen på egen hand och komma igång med utveckling eller innehållsskapande på några minuter. Du har lärt dig metoderna för att aktivera Inspektor Element i Safari för både nya och äldre macOS-versioner. Om jag missade någon metod för att få och använda Web Inspector, tveka inte att låta mig veta genom att lämna en kommentar nedan.

Nästa steg, de bästa kodningsapparna för iPad.