01 z 06
Aktivujte a používejte režim odpovědného designu v Safari 9
Být webovým vývojářem v dnešním světě znamená podporovat spoustu zařízení a platforem, což se někdy může ukázat jako hrozivý úkol. Dokonce i s nejvíce dobře navrženým kódem, který dodržuje nejnovější webové standardy, můžete stále zjistit, že části vašich webových stránek 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ě v důsledku reaktivního designového režimu, který vám umožní 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.
Nejprve otevřete prohlížeč Safari.
02 ze dne 06
Předvolby Safari
Klikněte na Safari v nabídce prohlížeče umístěném v horní části obrazovky. Když se zobrazí rozbalovací nabídka, vyberte možnost Předvolby_krouženou ve výše uvedeném příkladu.
Vezměte prosím na vědomí, že namísto výše uvedené položky nabídky můžete použít následující klávesovou zkratku: COMMAND + COMMA (,)
03 ze dne 06
Zobrazit rozbalovací nabídku
Dialog Preferences Safari by měl být nyní zobrazen, překrývat okno prohlížeče. Nejprve klikněte na ikonu Pokročilé_, představovanou ozubeným kolem a umístěným 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ěna zaškrtávacím políčkem označeným jako Zobrazit výpis v panelu nabídek a v příkladu uvedeném výše. Kliknutím na zaškrtávací políčko aktivujete toto menu.
04 z 06
Zadejte reaktivní režim návrhu
V nabídce Safari, která se nachází v horní části obrazovky s označením Develop, je nyní k dispozici nová možnost. Klikněte na tuto možnost. Když se objeví rozbalovací nabídka, v příkladu uvedeném výše vyberte možnost Zadejte odpověď.
Vezměte prosím na vědomí, že namísto výše uvedené položky nabídky můžete použít následující klávesovou zkratku: OPTION + COMMAND + R
05 ze dne 06
Odpovídající návrhový režim
Aktivní webová stránka by nyní měla být zobrazena v režimu Odpovídající 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í.
06 z 06
Rozvinout 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, který je aktuálně nainstalován v počítači Mac.
- Agent uživatele: 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 svůj nativní zdrojový kód.
- Zobrazit konzolu s chybami: Jednou z nejpoužívanějších možností v nabídce Rozvinout, tato konzola zobrazuje chyby a varování jazyka JavaScript, HTML a XML.
- Zobrazit zdrojový kód stránky : Umožňuje zobrazit a vyhledávat zdrojový kód aktivní webové stránky.
- Zobrazit zdroje stránky: 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.
- Spusť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í. Všechny se zobrazují v inspektoru WebKit.
- Prázdné mezipaměti: Kliknutí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 ukládání do 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í vyrovnávací paměti.
- Povolit JavaScript z inteligentního vyhledávacího pole: Ve výchozím nastavení je z bezpečnostních důvodů zakázán, tato funkce umožňuje zadat adresy URL obsahující javascript: v adresním řádku aplikace Safari.
- Chraňte certifikáty SHA-1 jako neohrožené: Krátké pro algoritmus Secure Hash je SHA-1 hashová funkce prokázána jako méně spolehlivá než byla původně myšlenka, takže přidání této možnosti v Safari 9.
Související čtení
Pokud jste našli tento tutoriál užitečný, nezapomeňte se podívat na naše další návody pro Safari 9.