Být webovým vývojářem v dnešním světě znamená podporovat spoustu zařízení a platforem, které se někdy mohou ukázat být náročným úkolem. Dokonce i s nejvíce dobře navrženým kódem, který dodržuje nejnovější standardy webových stránek, můžete stále zjistit, že části vašeho webu nemusí vypadat nebo fungovat způsobem, jakým chcete, aby se na určitých zařízeních nebo rozlišeních. Pokud máte potíže s podporou tak široké škály scénářů, mít k dispozici správné simulační nástroje, které vám mohou být neocenitelné.
Pokud jste jedním z mnoha programátorů, kteří používají Mac, vývojářské nástroje Safari jsou vždy užitečné. S vydáním Safari 9 se rozsah této funkce značně rozšířil, a to hlavně kvůli Režimu reaktivního návrhu, který umožňuje zobrazit náhled, jak bude vaše stránky vykreslovat při různých rozlišeních na obrazovce i na různých iPadových, iPhone a iPod touch.
Tento návod popisuje, jak aktivovat režim reagujícího designu a jak ho využít pro vaše potřeby v oblasti vývoje.
Předvolby Safari
Nejprve otevřete prohlížeč Safari.
Klikněte na Safari v nabídce prohlížeče umístěném v horní části obrazovky. Když se zobrazí rozevírací nabídka, vyberte možnost Předvolby v ukázaném příkladu.
Poznámka: Můžete použít následující klávesovou zkratku namísto výše uvedené položky nabídky: COMMAND + COMMA (,)
02 z 05Zobrazit rozbalovací nabídku
Dialog Preferences Safari by měl být nyní zobrazen, překrývat okno prohlížeče. Nejprve klikněte na tlačítko Pokročilý ikonu reprezentovanou převodovkou a umístěnou v pravém horním rohu okna.
Rozšířené předvolby prohlížeče by měly být nyní viditelné. V dolní části je možnost doplněná zaškrtávací políčko označené Zobrazte nabídku Vývoj v panelu nabídek a kroužil ve výše uvedeném příkladu. Kliknutím na zaškrtávací políčko aktivujete toto menu.
03 ze dne 05Zadejte reaktivní režim návrhu
V nabídce Safari, která se nachází v horní části obrazovky, je nyní k dispozici nová volba Rozvíjet. Klikněte na tuto možnost.
Když se zobrazí rozevírací nabídka, vyberte možnost Zadejte reaktivní režim návrhuv ukázaném příkladu.
Poznámka: Můžete použít následující klávesovou zkratku namísto výše uvedené položky nabídky:OPTION + COMMAND + R
04 z 05Odpovídající návrhový režim
Aktivní webová stránka by nyní měla být zobrazena v režimu Reagovat na návrh, jak je uvedeno ve výše uvedeném příkladu. Vybráním některého z uvedených zařízení iOS, jako je iPhone 6, nebo některého z určených rozlišení obrazovky, například 800 x 600, můžete okamžitě zobrazit, jak se stránka bude zobrazovat na tomto zařízení nebo v tomto rozlišení displeje.
Kromě zobrazených zařízení a rozlišení můžete také instruovat Safari, aby simuloval jiného uživatelského agenta - například jednoho z jiného prohlížeče - kliknutím na rozbalovací nabídku zobrazenou přímo nad ikonami rozlišení.
05 z 05Rozvinout nabídku: Další možnosti
Kromě Režimu odpovědného designu nabízí nabídka Safari 9 také mnoho dalších užitečných možností, z nichž některé jsou uvedeny níže.
- Otevřít stránku s: Umožňuje otevřít aktivní webovou stránku v libovolném jiném prohlížeči aktuálně nainstalovaném v počítači Mac.
- Uživatelský agent: Změna uživatelského agenta způsobí, že webové servery identifikují váš prohlížeč jako něco jiného než Safari 9.
- Připojit webový inspektor: Webový inspektor Safari 9 zobrazuje veškeré zdroje webové stránky, poskytuje možnost prohlédnout informace o CSS, metriky DOM a strukturu, stejně jako nativní zdrojový kód.
- Zobrazit chybovou konzolu: Jedná se o jednu z nejpoužívanějších možností v nabídce Rozvinout, v této konzole se zobrazují chyby a varování jazyka JavaScript, HTML a XML.
- Zobrazit zdroj stránky: Umožňuje zobrazit a vyhledat zdrojový kód aktivní webové stránky.
- Zobrazit zdroje stránek: Výběrem této možnosti se na aktuální stránce zobrazí dokumenty, skripty, CSS a další zdroje.
- Zobrazit editor úryvků: Poskytuje možnost upravovat a provádět fragmenty kódu, na rozdíl od úplné stránky. Tato funkce je velmi užitečná z pohledu testování.
- Zobrazit rozšíření Builder: Umožňuje vytvářet vlastní rozšíření Safari tak, že odpovídajícím způsobem balíte kód a přidáte metadata.
- Začněte záznam časové osy: Zaznamenává řadu položek, včetně požadavků na síť, spuštění jazyka JavaScript, vykreslování stránek a dalších událostí pro uživatelem definované období, které jsou viditelné v inspektoru WebKit.
- Prázdné mezipaměti: Klepnutím na tuto možnost vymažete veškerou uloženou mezipaměť v programu Safari, a to nejen standardní soubory mezipaměti webových stránek.
- Zakázat mezipaměti: Při vypnutém ukládání do mezipaměti jsou zdroje staženy z webových stránek pokaždé, když je provedena žádost o přístup na rozdíl od využití místní mezipaměti.
- Povolit JavaScript z pole Smart Search: Ve výchozím nastavení je z bezpečnostních důvodů zakázáno, tato funkce umožňuje zadat adresy URL obsahujících JavaScript do adresního řádku aplikace Safari.
- Otestujte certifikáty SHA-1 jako neohrožené: Krátký algoritmus Secure Hash Algorithm se ukázal jako bezpečnější, než se původně předpokládalo, a proto přidání této možnosti do Safari 9.
