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