Efektivní využití Safari Developer Tools: Komplexní průvodce

V této příručce ti chci poskytnout hluboké porozumění používání Vývojářských nástrojů od Safari. I když mají vývojářské nástroje v Safari některé rozdíly ve srovnání s těmi v Chrome a Firefoxu, zůstává základní princip stejný. Naučíš se, jak aktivovat vývojářské nástroje, jak používat různé oblasti a funkce a jak provádět podstatné procesy ladění. Začněme rovnou s nejdůležitějšími poznatky.

Nejdůležitější poznatky

• Vývojářské nástroje v Safari nejsou tak snadno dostupné jako v jiných prohlížečích, protože je nutné je aktivovat v nastavení.
• Uživatelské rozhraní a funkce vývojářských nástrojů jsou podobné jako v jiných prohlížečích, ale specifické implementace se mohou lišit.
• Ladění na zařízeních iOS je možné v Safari tím, že připojíš zařízení přes USB.

Krok za krokem průvodce

1. Aktivace vývojářských nástrojů v Safari

Pro aktivaci vývojářských nástrojů v Safari musíš upravit nastavení Safari. Spusť Safari a přejdi do nabídky. Vyber zde „Safari“ a následně „Nastavení“.

Přepni na záložku „Pokročilé“ vpravo. Zde najdeš možnost „Zobrazit vývojářské funkce pro webové vývojáře“. Aktivuj tuto možnost pro zapnutí vývojářských nástrojů.

2. Přístup k vývojářským nástrojům

Jakmile jsou vývojářské nástroje aktivovány, můžeš je otevřít prostřednictvím nabídky „Vývoj“ v horní liště nebo určitými klávesovými zkratkami. Přímý přístup pomocí kláves F12 nebo Alt-Cmd-I nefunguje, ale můžeš např. pravým tlačítkem myši kliknout na prvek a zvolit „Zkontrolovat prvek“.

Můžeš také použít klávesovou zkratku Cmd+Alt+C k otevření konzole a přepínání mezi různými pohledy.

3. Navigace vývojářskými nástroji

Uživatelské rozhraní vývojářských nástrojů vypadá sice podobně, jako jsi zvyklý z jiných prohlížečů, ale má některá specifická odchýlení. V levém panelu můžeš přepínat mezi záložkami „Prvky“, „Konzole“, „Zdroje“, „Síť“ a dalšími.

Zde se dozvíš více o prvcích webové stránky, abys mohl(a) zobrazit a upravit styly a rozložení. Můžeš upravovat libovolný styl jen kliknutím na příslušná CSS pravidla.

4. Práce s konzolí

Konzole v Safari ti umožní provádět JavaScriptový kód a zobrazovat požadované výstupy. Zajímavým prvkem je formátování výstupů zde. První argument je zobrazen jako text, zatímco všechny následující argumenty jsou zobrazeny jako objekty JavaScriptu.

Pokud vypisuješ další logovací zprávy, dbej na to, aby zobrazení nemělo mezery mezi jednotlivými argumenty, ale bylo odděleno pomocí pomlček. To může být důležité pro zabránění nedorozumění při ladění.

5. Nastavení zdrojového kódu a breakpointů

V záložce „Zdroje“ můžeš zkontrolovat originální soubory a transpilované soubory tvé webové stránky. Je zde také možné nastavit breakpointy k usnadnění ladění. Stačí kliknout na příslušný řádek kódu.

Nezapomeň také využít různé ovládací prvky pro zjednodušení procházení kódu. U Safari je zkratka pro krokování jiná; namísto toho používáš specifické symboly.

6. Provádění analýz sítě

Záložka „Síť“ poskytuje komplexní informace o všech žádostech, které tvoje stránka provádí během svého načítání. Zde vidíš žádosti, které jsou odesílány a přijímány, a také jejich záhlaví a náhledy.

Jednou z zajímavých funkcí je rozlišení mezi záhlavími a dobami, což ti poskytne hlubší pohled na výkon tvé stránky.

7. Používání měření výkonu a časových os

V panelu "Časové osy" můžeš provádět podrobné analýzy výkonu a zaznamenávat záznamy, abys lépe porozuměl rychlosti a činnostem na své stránce.

Tato funkce funguje podobně jako výkonnostní profily v ostatních prohlížečích, ale musíš si možná zvyknout na některé rozdíly v zobrazení a pojmenování.

8. Ladění na mobilních zařízeních

Zvláštním zvýrazněním nástrojů pro vývojáře Safari je možnost ladění webových stránek na tvém iPhonu nebo iPadu. Připoj své zařízení pomocí USB a v nastavení zařízení zapni příslušné ladící možnosti.

Poté jdi do nabídky "Vývoj" a vyber své připojené zařízení, abys získal přístup k otevřeným oknům a jejich nástrojům pro vývojáře.

Závěr

V tomto podrobném návodu jsi se naučil, jak aktivovat nástroje pro vývojáře Safari, jak využívat různé funkce a panely a jak provádět ladění na mobilních zařízeních. Většina funkcí je podobná nástrojům v ostatních prohlížečích, ale existují specifické rozdíly, zejména v uživatelském rozhraní a klávesových zkratech. Jakmile se s tím seznámíš, ladění v Safari ti půjde rychle od ruky.