Быть веб-разработчиком в современном мире означает поддержку множества устройств и платформ, которые иногда могут оказаться сложной задачей. Даже с самым хорошо продуманным кодом, придерживающимся последних веб-стандартов, вы все равно можете обнаружить, что части вашего сайта могут не выглядеть или действовать так, как вы хотите, чтобы они отображались на определенных устройствах или разрешениях. Когда вы сталкиваетесь с проблемой поддержки такого широкого спектра сценариев, наличие правильных инструментов моделирования в вашем распоряжении может быть неоценимым.
Если вы один из многих программистов, которые используют Mac, набор инструментов разработчика Safari всегда пригодится. С выпуском Safari 9 широта этой функциональности значительно расширилась, главным образом благодаря режиму адаптивного дизайна, который позволяет вам просматривать, как ваш сайт будет отображаться при различных разрешениях экрана, а также на разных iPad, iPhone и iPod touch.
В этом руководстве подробно описывается, как активировать режим адаптивного дизайна, а также как использовать его для ваших нужд развития.
Настройки Safari
Сначала откройте браузер 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 Develop предлагает множество других полезных опций, некоторые из которых перечислены ниже.
- Открытая страница с: Позволяет открывать активную веб-страницу в любом другом браузере, установленном на вашем Mac.
- Пользовательский агент: Изменение пользовательского агента заставляет веб-серверы идентифицировать ваш браузер как нечто иное, чем Safari 9.
- Подключить веб-инспектор: Веб-инспектор Safari 9 отображает все ресурсы веб-страницы, предоставляя возможность просматривать информацию о CSS, DOM-метрики и структуру, а также собственный исходный код.
- Показать консоль ошибок: Одна из наиболее широко используемых опций в меню «Разработка», эта консоль отображает ошибки и предупреждения JavaScript, HTML и XML.
- Показать страницу Источник: Позволяет просматривать и искать исходный код активной веб-страницы.
- Показать ресурсы страницы: При выборе этой опции на текущей странице отображаются документы, скрипты, CSS и другие ресурсы.
- Показать редактор фрагмента: Предоставляет возможность редактировать и выполнять фрагменты кода, а не полную страницу. Эта функция очень полезна с точки зрения тестирования.
- Показать расширение: Позволяет создавать собственные расширения Safari, соответствующим образом упаковывая ваш код и добавляя метаданные.
- Начало записи временной шкалы: Записывает ряд элементов, включая сетевые запросы, выполнение JavaScript, рендеринг страниц и другие события за определенный пользователем период, который можно просмотреть в WebKit Inspector.
- Пустые кеши: При нажатии этой опции удаляется весь сохраненный кэш в Safari, а не только стандартные файлы кеша веб-сайта.
- Отключить кеши: При отключенном кэшировании ресурсы загружаются с веб-сайта каждый раз, когда запрос доступа выполняется в отличие от использования локального кеша.
- Разрешить JavaScript из Smart Search Field: Отключено по умолчанию по соображениям безопасности, эта функция позволяет вам вводить URL-адреса, содержащие JavaScript в адресной строке Safari.
- Относитесь к сертификатам SHA-1 как к небезопасным: Было доказано, что хеш-функция SHA-1 оказалась менее надежной, чем первоначально предполагалось, поэтому она добавлена в Safari 9.
