MacOS: Aktivujte Web Inspector v Safari

Aby ste mohli zobraziť zdrojový kód webovej stránky v Apple Safari pre macOS Sierra, musíte aktivovať nástroj Safari Web Inspector pomocou nasledujúcich metód.

Vývojári webových prehliadačov ako Apple, Google a ďalší ponúkajú zabudovaný nástroj na zobrazenie základného kódu. Tento nástroj väčšinou používajú na ladnie a vizualizáciu zmien vykonaných na živých webových stránkach bez narušenia skutočného kódu na serveri. Dnes je tento nástroj populárny aj medzi tvorcami obsahu a technicky zdatnými používateľmi internetu, ktorí chcú upravovať živé webové stránky na osobné alebo profesionálne účely. Ak ste jedným z nich, čítajte článok až do konca, aby ste sa dozvedeli všetko o Safari Web Inspector a ako inspektovať prvky.

Obsah

• 1 Čo je Safari Web Inspector?
• 2 Ako aktivovať Safari Web Inspector vo verziách Safari 10 a vyšších
• 3 Ako používať Safari Web Inspector na macOS
• 4 Ako otvoriť Safari Web Inspector v starších verziách macOS
  • 4.1 Safari Web Inspector: Záverečné slová

Čo je Safari Web Inspector?

Web Inspector je súčasťou balíka vývojových nástrojov, ktoré Apple ponúka vývojárom webových stránok a aplikácií po celom svete. Nástroj je k dispozícii pre zariadenia s macOS aj iOS. Vývojári môžu ľahko upravovať, optimalizovať a ladenie webových stránok, aby dosiahli maximálny výkon svojich online majetkov.

Nástroj Web Inspector v Safari prináša väčšinu zdrojov webovej stránky pod jedno zjednotenú rozhranie. Nástroj tiež oddeluje zdroje a ich parametre v samostatných kartách, aby ste sa necítili zahltení množstvom kódov a možností. Web Inspector tiež poskytuje časovú os zobrazenia pamäte webovej stránky, takže môžete ľahko ladit pamäť. Okrem toho si ako vývojár môžete upravovať a optimalizovať viac ako 150 populárnych vlastností CSS, ktoré potrebujete na vytvorenie funkčnej webovej stránky.

Na nástroji Web Inspector získate nasledujúce karty pre zdroje webovej stránky:

• Elementy
• Konzola
• Zdroje
• Sieť
• Časové osi
• Úložisko
• Grafika
• Vrstvy
• Audit

Ako aktivovať Safari Web Inspector vo verziách Safari 10 a vyšších

Predvolene Apple Mac deaktivuje Web Inspector v Safari. Je to na zabránenie zbytočného neporiadku na používateľskom rozhraní (UI) webového prehliadača. Ak ste však vývojár, tvorca obsahu, alebo expert na Mac, môžete aktivovať funkciu nasledovaním týchto krokov:

• Otvorenie aplikácie Safari na vašom MacBooku alebo iMacu.
• Uistite sa, že je prehliadač zvolený, aby sa ikona Safari objavila na lište Mac.

• Kliknite na Safari v ľavom hornom rohu a vyberte Predvoľby.
• Alternatívne môžete použiť klávesovú skratku Command + ,, aby ste zobrazili menu Predvoľby.
• Keď ste v menu Predvoľby, musíte byť na karte Všeobecné.

• Prejdite na kartu Rozšírené.
• Pri voľbe Proxy by ste mali vidieť zaškrtávacie políčko pre možnosť Zobraziť menu Vytvoriť na paneli menu. Zaškrtnite políčko.

• Teraz sa menu Vytvoriť objaví na paneli nástrojov Mac.

Toto je spôsob, ako aktivovať funkciu Web Inspector na vašom Mac prehliadači Safari. Kroky sú podobné pre najnovšiu verziu macOS Ventura a predchádzajúce ako Monterey, Big Sur, Catalina atď., až po Jaguar.

Prečítajte si tiež: Html 4.01

Doteraz ste sa naučili, ako získať funkciu Web Inspector v aplikácii Mac Safari. Nižšie sa dozviete, ako ju používať v Safari pre živé webové stránky:

Ako používať Safari Web Inspector na macOS

Nájdite nižšie kroky na volanie nástroja Web Inspector pre vývoj webu, tvorbu obsahu alebo iné účely. V tomto článku ukážem kroky pomocou operačného systému macOS Monterey. Kroky sú však obdobné od macOS Jaguar po Ventura.

• Otvorené Safari a navštívte akúkoľvek webovú stránku, ktorú chcete skontrolovať.
• Existujú dva spôsoby, ako skontrolovať základné HTML/CSS kódy webovej stránky alebo vykonať zmeny pomocou nástroja Apple Web Inspector. Tieto sú:
  • Vytvoriť > Zobraziť Web Inspector.
  • Pravým tlačidlom myši > Skontrolovať prvok.
• Aby ste použili prvý spôsob, prejdite na panel nástrojov Mac pre prehliadač Safari a kliknite na menu Vytvoriť.

• V kontextovom menu, ktoré sa objaví, kliknite na Zobraziť Web Inspector. Klávesová skratka pre túto akciu je Option + Command + I.

• Tým sa otvorí nástroj Web Inspector v dolnej časti webového prehliadača. Kódy, ktoré vidíte, sú pre celú URL alebo webovú stránku, ktorú ste navštívili.
• Ak chcete zobraziť základný kód pre konkrétny prvok na webovej stránke bez otvorenia kódu pre celú webovú stránku, vyberte prvok, ktorý chcete skontrolovať.

• Pravým tlačidlom myši a vyberte Skontrolovať prvok v kontextovom menu, ktoré sa otvorí.
• Web Inspector v Safari sa otvorí.

• Ale tentokrát vás Safari privedie priamo k základnému HTML alebo CSS kódu prvku, ktorý audítujete.
• V tomto nástroji dostanete HTML a CSS kódy prvku webovej stránky, ktorý kontrolujete.

Prečítajte si tiež: Technipages vysvetľuje CSS

Ako otvoriť Safari Web Inspector v starších verziách macOS

Povedzme, že ste na Macu staršom než Jaguar a potrebujete použiť nástroj Web Inspector. Ak nenájdete vyššie uvedené kroky na tomto Macu, môžete vykonať jednoduchý kód na aktiváciu Web Inspector. Tu je, ako to urobiť:

• Otvorenie Aplikácií a prejdite do zložky Nástroje.
• Vo vnútri Nástroje by ste mali nájsť Terminál. Je to príkazový riadok macOS počítačov.
• Teraz spustite príkazové rozhranie Terminál a zadajte nasledujúci jednoduchý príkaz:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Stlačte Return na vykonanie príkazu.
• Teraz môžete otvoriť webovú stránku v Safari a pravým tlačidlom myši kliknúť kdekoľvek na stránke, kým sa neobjaví kontextové menu.
• Tam kliknite na možnosť Skontrolovať prvok, aby ste si pozreli základné CSS a HTML kódy webovej stránky.

Safari Web Inspector: Záverečné slová

Takto sú postupy na bezproblémovú aktiváciu Web Inspector v Safari. Môžete sledovať kroky samostatne a začať s vývojom alebo tvorbou obsahu za niekoľko minút. Naučili ste sa metódy aktivácie prvku Inspector na Safari pre nové aj staršie edície macOS. Ak som niektorú metódu na získanie a používanie Web Inspector vynechal, neváhajte ma informovať zanechaním komentára nižšie.

Ďalšie, najlepšie aplikácie na kódovanie pre iPad.