MacOS: Povolit Web Inspector v prohlížeči Safari

Pokud chcete zobrazit zdrojový kód webové stránky v Apple Safari pro macOS Sierra, budete muset povolit nástroj Safari Web Inspector pomocí následujících metod.

Vývojáři webových prohlížečů, jako jsou Apple, Google atd., poskytují nástroj, který umožňuje zobrazit základní kódy. Vývojáři jej často používají k ladění a vizualizaci změn provedených na živých webových stránkách, aniž by zasahovali do skutečného kódu na serveru. Tento nástroj se však stal populárním také mezi tvůrci obsahu a technicky zdatnými uživateli internetu, kteří chtějí upravit živé webové stránky pro osobní nebo profesionální účely. Pokud patříte mezi ně, přečtěte si článek až do konce, abyste se dozvěděli vše o Safari Web Inspector a jak inspektovat elementy.

Obsah

• 1 Co je Safari Web Inspector?
• 2 Jak aktivovat Safari Web Inspector v Safari 10 a novějších
• 3 Jak používat Safari Web Inspector v macOS
• 4 Jak otevřít Safari Web Inspector ve starších verzích macOS
  • 4.1 Safari Web Inspector: Závěrečná slova

Co je Safari Web Inspector?

Web Inspector je součástí sady vývojových nástrojů, které Apple nabízí vývojářům webových stránek a aplikací po celém světě. Nástroj je k dispozici pro zařízení macOS i iOS. Vývojáři mohou snadno upravovat, optimalizovat a ladit webové stránky, aby dosáhli maximálního výkonu pro své online vlastnosti.

Nástroj Web Inspector v Safari shromažďuje většinu zdrojů webových stránek do jednoho jednotného rozhraní. Nástroj také odděluje zdroje a jejich parametry do speciálních záložek, takže nejste zahlceni množstvím kódů a možností. Web Inspector vám také poskytuje časovou osu paměti webových stránek, díky čemuž můžete snadno debugovat paměť. Navíc jako vývojář můžete upravit a optimalizovat více než 150 populárních vlastností CSS, které potřebujete při vývoji funkční webové stránky.

V nástroji Web Inspector máte k dispozici následující záložky pro zdroje webových stránek:

• Elementy
• Konzole
• Zdrojový kód
• Síť
• Časové osy
• Úložiště
• Grafika
• Vrstvy
• Kontrola zabezpečení

Jak aktivovat Safari Web Inspector v Safari 10 a novějších

Ve výchozím nastavení Apple Mac zakazuje Web Inspector v Safari. Je to proto, aby se zabránilo zbytečnému nepořádku na uživatelském rozhraní (UI) webového prohlížeče. Pokud jste však vývojář, tvůrce obsahu nebo odborný uživatel Macu, můžete chtít tuto funkci aktivovat podle následujících kroků:

• Otevřete aplikaci Safari na MacBooku nebo iMacu.
• Ujistěte se, že jste klikli na prohlížeč, aby se ikona Safari objevila na panelu nástrojů Macu.

• Klikněte na Safari v levém horním rohu a vyberte Předvolby.
• Alternativně můžete použít klávesovou zkratku Command + , abyste zobrazili nabídku předvoleb.
• Pokud jste uvnitř nabídky Předvolby, měli byste být na záložce Obecné.

• Přejděte na záložku Pokročilé.
• Těsně pod možností Proxy byste měli vidět zaškrtávací políčko pro Zobrazit vývojovou nabídku na panelu nabídek. Zaškrtněte toto políčko.

• Teď se nabídka Vývoj v Safari zobrazí na panelu nástrojů Macu.

Toto je způsob, jak aktivovat funkci Web Inspector ve vašem prohlížeči Safari. Kroky jsou podobné pro nejnovější edici macOS Ventura a pro starší, například Monterey, Big Sur, Catalina atd., až po Jaguar.

Přečtěte si také: Html 4.01

Takže jste se dozvěděli, jak získat funkci Web Inspector na aplikaci Mac Safari. Nyní se naučte, jak ji používat na Safari pro živé webové stránky:

Jak používat Safari Web Inspector v macOS

Najděte níže kroky, jak použít nástroj Web Inspector pro vývoj webu, vytváření obsahu nebo jakékoli jiné účely. V tomto článku ukazuji kroky pomocí operačního systému macOS Monterey. Kroky jsou však poměrně podobné od macOS Jaguar po Ventura.

• Otevřete Safari a navštivte jakoukoli webovou stránku, kterou chcete prozkoumat.
• Existují dva způsoby, jak inspektovat základní HTML/CSS kódy webové stránky nebo provádět změny pomocí nástroje Web Inspector od Apple. Tyto způsoby jsou:
  • Vývoj > Zobrazit Web Inspector.
  • Pravým tlačítkem myši > Inspektovat element.
• Pro využití prvního způsobu přejděte na panel nástrojů Macu pro webový prohlížeč Safari a klikněte na menu Vývoj.

• V kontextovém menu, které se objeví, klikněte na Zobrazit Web Inspector. Klávesová zkratka pro tuto akci je Option + Command + I.

• Toto otevře nástroj Web Inspector ve spodní části webového prohlížeče. Kódy, které vidíte, jsou pro celou URL nebo webovou stránku, kterou jste navštívili.
• Pokud chcete vizualizovat základní kód pro konkrétní element na webové stránce bez otevření kódu pro celou webovou stránku, vyberte element, který chcete inspektovat.

• Pravým tlačítkem myši a vyberte Inspektovat element v kontextovém menu, které se otevře.
• Web Inspector Safari se otevře.

• V tomto případě vás Safari přenese přímo na základní HTML nebo CSS kód elementu, který auditujete.
• V tomto nástroji získáte HTML a CSS kódy webového elementu, který inspektujete.

Přečtěte si také: Technipages vysvětluje CSS

Jak otevřít Safari Web Inspector ve starších verzích macOS

Pokud jste na Macu starším než Jaguar a potřebujete použít nástroj Web Inspector. Pokud nenajdete výše uvedené kroky v tomto Macu, můžete provést jednoduchý kód pro aktivaci Web Inspector. Zde je návod, jak to udělat:

• Otevřete Applications a přejděte do složky Utilities.
• Uvnitř Utility byste měli najít Terminál. Je to příkazový řádek macOS.
• Nyní spusťte rozhraní příkazového řádku Terminál a zadejte následující jednoduchý příkaz:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Stiskněte Return, abyste příkaz provedli.
• Nyní můžete otevřít webovou stránku v Safari a pravým tlačítkem myši nebo podržením tlačítka myši kdekoliv na stránce, dokud se neobjeví kontextové menu.
• Odtud klikněte na možnost Inspektovat element, abyste zobrazili základní CSS a HTML kódy webu.

Safari Web Inspector: Závěrečná slova

Toto jsou tedy metody, jak snadno povolit Web Inspector v Safari. Můžete následovat kroky sami a začít vyvíjet nebo vytvářet obsah během několika minut. Naučili jste se metody, jak aktivovat Inspektor Elementů v Safari pro nové i starší verze macOS. Pokud jsem vynechal nějakou metodu, jak získat a používat Web Inspector, neváhejte se ozvat tím, že zanecháte komentář níže.

Další téma: nejlepší aplikace pro programování pro iPad.