Да бъдеш уеб програмист в днешния свят означава да поддържаш набор от устройства и платформи, които понякога могат да се окажат трудна задача. Дори и с най-добре проектирания код, придържащ се към най-новите уеб стандарти, все още можете да откриете, че части от уебсайта Ви може да не изглеждат или да действат по начина, по който искате да се показват на определени устройства или резолюции. Когато сте изправени пред предизвикателството да поддържате такъв широк спектър от сценарии, разполагате с правилните симулационни инструменти на ваше разположение, може да бъде безценен.
Ако сте един от многото програмисти, които използват Mac, инструментът за разработчици на Safari винаги е бил полезен. С пускането на Safari 9 широчината на тази функционалност се е разраснала значително, основно благодарение на Режим на отговорно проектиране, който ви позволява да визуализирате как ще се показва сайтът Ви при различни резолюции на екрана, както и при различни iPad, iPhone и iPod touch.
Този урок подробно описва как да активирате Режим на Отзивчив Дизайн, както и как да го използвате за Вашите нужди за развитие.
Предпочитания за сафари
Първо, отворете браузъра Safari.
Кликнете върху сафари в менюто на браузъра, разположено в горната част на екрана. Когато се появи падащото меню, изберете Предпочитания опция кръг в показания пример.
Забележка: Можете да използвате следните клавишни комбинации вместо горепосочения елемент от менюто: COMMAND + COMMA (,)
02 от 05Показване на менюто за разработване
Сега диалоговият прозорец "Предпочитания" на Safari трябва да се покаже, като надхвърли прозореца на браузъра ви Първо кликнете върху напреднал икона, представлявана от зъбно колело и разположена в горния десен ъгъл на прозореца.
Разширените предпочитания на браузъра сега трябва да са видими. В долната част има опция, придружена от квадратче за отметка, означено с етикет Показва се меню Разработване в лентата с менюта и кръг в горния пример. Кликнете веднъж върху квадратчето за да активирате това меню.
03 от 05Въведете отговорния дизайн
Сега трябва да има нова опция в менюто ви Safari, разположено в горната част на екрана, обозначено с етикет Разработване, Кликнете върху тази опция.
Когато се появи падащото меню, изберете Въведете отговорния дизайнкръг в показания пример.
Забележка: Можете да използвате следните клавишни комбинации вместо горепосочения елемент от менюто:OPTION + COMMAND + R
04 от 05Режим на отговорно проектиране
Активната уеб страница трябва да се показва в Режим на отговорно проектиране, както е показано в примера по-горе. Избирайки едно от изброените в iOS устройства, като например iPhone 6, или едно от избраните разделителни способности на екрана, като например 800 x 600, можете веднага да видите как ще се показва страницата на това устройство или на тази резолюция на дисплея.
В допълнение към показаните устройства и резолюции можете също така да инструктирате Safari да симулира друг потребителски агент - например друг от браузър - като кликнете върху падащото меню, показано непосредствено над иконите за разделителна способност.
05 от 05Развитие в менюто: Други опции
В допълнение към режима на отговорно проектиране, менюто Safari 9's Development предлага много други полезни опции, някои от които са изброени по-долу.
- Отваряне на страницата с: Позволява ви да отворите активната уеб страница във всеки друг браузър, който понастоящем е инсталиран на вашия Mac.
- Потребителски агент: Промяната на потребителския агент кара уеб сървърите да идентифицират браузъра ви като нещо различно от Safari 9.
- Свържете уеб инспектора: Web Инспекторът на Safari 9 показва всички ресурси на уеб страницата, предоставяйки възможност за преглеждане на CSS информация, метрични данни и структура на DOM, както и на родния код.
- Показване на конзолата за грешки: Един от най-широко използваните опции в разработеното меню, тази конзола показва грешки и предупреждения в JavaScript, HTML и XML.
- Показване на източника на страница: Позволява ви да преглеждате и търсите в изходния код на активната уеб страница.
- Показване на ресурсите на страницата: Избирането на тази опция показва документи, скриптове, CSS и други ресурси от текущата страница.
- Показване на редактора на фрагменти: Предоставя възможност за редактиране и изпълнение на фрагменти от код, за разлика от пълната страница. Тази функция е много полезна от гледна точка на тестването.
- Показване на разширения Builder: Позволява ви да създадете собствени разширения за Safari, като опаковате съответно кода си и добавяте метаданни.
- Започване на записа в хронологията: Записва редица елементи, включително заявки за мрежата, изпълнение на JavaScript, рендиране на страници и други събития за определен от потребителя период, които могат да се видят в WebKit Inspector.
- Празни кешовете: Кликването върху тази опция изтрива всички съхранени кешове в Safari, а не само стандартните кеш файлове за уебсайтове.
- Деактивиране на кеша: При закриване на кеширането ресурсите се изтеглят от уебсайт всеки път, когато се подава заявка за достъп, вместо да се използва локалният кеш.
- Разрешаване на JavaScript от поле за интелигентно търсене: По подразбиране е деактивирано поради причини, свързани със сигурността, тази функция ви позволява да въвеждате URL адреси, съдържащи JavaScript в адресната лента на Safari.
- Отнасяйте SHA-1 сертификатите като несигурни: Накратко за сигурния хеш алгоритъм, SHA-1 хеш функцията е доказала, че е по-малко сигурна от първоначалната мисъл, откъдето идва и добавянето на тази опция в Safari 9.
