01 z 06
Aktivujte a používajte režim odpovedajúcich návrhov v programe Safari 9
Byť webovým vývojárom v dnešnom svete znamená podporiť množstvo zariadení a platforiem, ktoré sa niekedy môžu stať skľučujúcou úlohou. Dokonca aj s najpresnejšie navrhnutým kódom dodržiavajúcim najnovšie webové štandardy môžete stále zistiť, že časti vašich webových stránok nemusia vyzerať alebo fungovať tak, ako ich chcete na určitých zariadeniach alebo rozlíšeniach. Keď sa stretnete s výzvou podporiť takú širokú škálu scenárov, mať k dispozícii správne simulačné nástroje, ktoré vám môžu byť neoceniteľné.
Ak ste jedným z mnohých programátorov, ktorí používajú Mac, vývojárske súpravy Safari sú vždy vhodné. S vydaním Safari 9 sa táto funkčnosť výrazne rozšírila, a to hlavne vďaka režimu Reagujúci dizajn, ktorý vám umožní prezrieť si, ako bude vaša stránka vykresľovať pri rozličných rozlíšeniach obrazovky, ako aj na rôznych zariadeniach iPad, iPhone a iPod touch.
Tento návod podrobne opisuje, ako aktivovať režim zodpovedného dizajnu, ako aj ako ho využiť pre potreby vývoja.
Najskôr otvorte prehliadač Safari.
02 z 06
Predvoľby Safari
Kliknite na položku Safari v ponuke prehliadača umiestnenej v hornej časti obrazovky. Keď sa zobrazí rozbaľovacia ponuka, zvoľte v predošlom príklade možnosť Preferencie_ .
Upozorňujeme, že namiesto vyššie uvedenej položky ponuky môžete použiť nasledujúcu klávesovú skratku: COMMAND + COMMA (,)
03 z 06
Zobraziť rozbaliť menu
Treba zobraziť dialógové okno Predvoľby Safari, ktoré prekryje okno prehliadača. Najprv kliknite na ikonu Pokročilé zobrazené ozubeným kolieskom a nachádza sa v pravom hornom rohu okna.
Rozšírené predvoľby prehliadača by mali byť teraz viditeľné. V spodnej časti je možnosť doplnená o zaškrtávacie políčko s názvom Zobrazovať ponuku Vývoj v paneli s ponukami a obklopené v príklade vyššie. Kliknutím na zaškrtávacie políčko aktivujete toto menu.
04 z 06
Zadajte režim zodpovedajúceho návrhu
V ponuke Safari, ktorá sa nachádza v hornej časti obrazovky s označením Rozvinúť, by mala byť teraz k dispozícii nová možnosť. Kliknite na túto možnosť. Keď sa zobrazí rozbaľovacie menu, zvoľte vo vyššie uvedenom príklade možnosť Enter Responsive Design Mode .
Upozorňujeme, že namiesto vyššie uvedenej položky ponuky môžete použiť nasledujúcu klávesovú skratku: OPTION + COMMAND + R
05 z 06
Reagujúci režim návrhu
Aktívna webová stránka by sa teraz mala zobraziť v režime Reagujúci dizajn, ako je uvedené v príklade vyššie. Ak vyberiete jedno z uvedených zariadení iOS, napríklad iPhone 6, alebo jedno z určených rozlíšení obrazovky, napríklad 800 x 600, môžete okamžite zobraziť, ako sa stránka bude zobrazovať na tomto zariadení alebo v tomto rozlíšení displeja.
Okrem zobrazených zariadení a rozlíšení môžete inštruovať aj Safari, aby simuloval iného používateľského agenta - napríklad jedného z iného prehliadača - kliknutím na rozbaľovaciu ponuku zobrazenú priamo nad ikonami rozlíšenia.
06 z 06
Rozbaliť ponuku: Ďalšie možnosti
Okrem Režimu odpovedajúcich návrhov ponúka ponuka vývoja programu Safari 9 mnoho ďalších užitočných možností, niektoré z nich sú uvedené nižšie.
- Otvorená stránka s: Umožňuje vám otvoriť aktívnu webovú stránku v ľubovoľnom inom prehliadači aktuálne nainštalovanom na počítači Mac.
- Používateľský agent: Zmena používateľského agenta spôsobí, že webové servery identifikujú váš prehliadač ako niečo iné ako Safari 9.
- Pripojenie webového inšpektora: Webový inšpektor Safari 9 zobrazuje všetky zdroje webovej stránky, poskytuje možnosť prezerať informácie CSS, metriky a štruktúru DOM, ako aj svoj pôvodný zdrojový kód.
- Zobraziť konzolu s chybami : Jednou z najpoužívanejších možností v rozbaľovacej ponuke, táto konzola zobrazuje chyby a upozornenia v jazyku JavaScript, HTML a XML.
- Zobraziť zdroj stránky: Umožňuje zobraziť a vyhľadávať zdrojový kód aktívnej webovej stránky.
- Zobraziť zdroje stránky: Výberom tejto možnosti sa zobrazujú dokumenty, skripty, CSS a ďalšie zdroje z aktuálnej stránky.
- Zobraziť editor úryvkov: Poskytuje možnosť upravovať a vykonávať fragmenty kódu, na rozdiel od úplnej stránky. Táto funkcia je veľmi užitočná z hľadiska testovania.
- Ukázať rozšírenie Builder: Umožňuje vám vytvoriť vlastné rozšírenia Safari tak, že príslušným spôsobom balíte kód a pridáte metadáta.
- Začať nahrávanie v časovej osi: Zaznamenáva množstvo položiek, vrátane požiadaviek na sieť, vykonávania JavaScript, vykresľovania stránok a ďalších udalostí pre používateľom definované obdobie, ktoré sa dajú zobraziť v rámci inšpektora WebKit.
- Prázdne vyrovnávacie pamäte : kliknutím na túto možnosť sa vymažú všetky uložené vyrovnávacej pamäte v rámci programu Safari, a to nielen štandardné súbory cache webových stránok.
- Zakázať vyrovnávaciu pamäť: S vypnutým ukladaním do vyrovnávacej pamäte sa zdroje načítajú z webových stránok pri každom zadaní žiadosti o prístup v porovnaní s použitím lokálnej vyrovnávacej pamäte.
- Povoliť JavaScript z inteligentného vyhľadávacieho poľa: V predvolenom nastavení je z bezpečnostných dôvodov zakázané, táto funkcia umožňuje zadávať adresy URL obsahujúce javascript: v paneli s adresou Safari.
- Chráňte SHA-1 certifikáty ako neisté: Krátka pre bezpečný algoritmus Hashov, funkcia hash SHA-1 bola preukázaná ako menej bezpečná, než sa pôvodne myslelo, takže pridanie tejto možnosti do Safari 9.
Súvisiace čítanie
Ak ste našli tento tutoriál užitočný, nezabudnite sa pozrieť na naše ďalšie Safari 9 návody.