Как активировать и использовать режим адаптивного дизайна в Safari 9

Быть веб-разработчиком в современном мире означает поддерживать множество устройств и платформ, что иногда может оказаться непростой задачей. Даже с наиболее хорошо разработанным кодом, соответствующим новейшим веб-стандартам, вы все равно можете обнаружить, что части вашего веб-сайта могут выглядеть не так, как вы хотите, на определенных устройствах или разрешениях. Когда возникает проблема поддержки такого широкого спектра сценариев, наличие правильных инструментов моделирования в вашем распоряжении может оказаться неоценимым.

Если вы один из многих программистов, использующих Mac, то набор инструментов Safari для разработчиков всегда пригодился. С выпуском Safari 9 эта функциональность значительно расширилась, главным образом благодаря режиму адаптивного дизайна, который позволяет вам предварительно просмотреть, как ваш сайт будет отображаться при различных разрешениях экрана, а также на разных сборках iPad, iPhone и iPod touch.

В этом руководстве рассказывается, как активировать Responsive Design Mode, а также как использовать его для своих нужд разработки.

Настройки Safari

Сначала откройте браузер Safari.

Нажмите на Safari в меню браузера, расположенном в верхней части экрана. Когда появится раскрывающееся меню, выберите параметр Настройки , обведенный в показанном примере.

Вместо вышеупомянутого пункта меню вы можете использовать следующую комбинацию клавиш: КОМАНДА + КОММА (,)

Показать меню разработки

Диалоговое окно настроек Safari теперь должно отображаться поверх окна браузера. Сначала нажмите на значок Дополнительно , представленный шестеренкой и расположенный в верхнем правом углу окна.

Расширенные настройки браузера теперь должны быть видны. Внизу есть опция, сопровождаемая флажком, помеченная Показать меню разработки в строке меню и обведенная кружком в приведенном выше примере. Нажмите на флажок один раз, чтобы активировать это меню.

Войдите в режим адаптивного дизайна

Теперь в вашем меню Safari, расположенном в верхней части экрана, должна появиться новая опция с надписью Разработка . Нажмите на эту опцию.

Когда появится раскрывающееся меню, выберите Войти в режим адаптивного дизайна в приведенном примере.

Вы можете использовать следующую комбинацию клавиш вместо вышеупомянутого пункта меню: OPTION + COMMAND + R

Адаптивный режим дизайна

Теперь активная веб-страница должна отображаться в режиме адаптивного дизайна, как показано в примере выше. Выбрав одно из перечисленных устройств iOS, таких как iPhone 6, или одно из доступных разрешений экрана, например 800 x 600, вы можете сразу увидеть, как будет отображаться страница на этом устройстве или в этом разрешении экрана.

В дополнение к указанным устройствам и разрешениям вы также можете настроить Safari для имитации другого пользовательского агента – например, из другого браузера – щелкнув раскрывающееся меню, отображаемое непосредственно над значками разрешения.

Разработка меню: другие параметры

В дополнение к режиму адаптивного дизайна в меню «Разработка» Safari 9 есть много других полезных опций, некоторые из которых перечислены ниже.

  • Открыть страницу с помощью . Позволяет открывать активную веб-страницу в любом другом браузере, установленном на вашем Mac.
  • Пользовательский агент . Изменение пользовательского агента заставляет веб-серверы идентифицировать ваш браузер как нечто отличное от Safari 9.
  • Connect Web Inspector: веб-инспектор Safari 9 отображает все ресурсы веб-страницы, предоставляя возможность просматривать информацию CSS, метрики DOM и структуру, а также собственный исходный код.
  • Показать консоль ошибок . Одна из наиболее часто используемых опций в меню разработки, эта консоль отображает ошибки и предупреждения JavaScript, HTML и XML и предупреждения.
  • Показать исходный код страницы . Позволяет просматривать и искать исходный код активной веб-страницы.
  • Показать ресурсы страницы . При выборе этого параметра отображаются документы, сценарии, CSS и другие ресурсы с текущей страницы.
  • Показать редактор фрагментов . Предоставляет возможность редактировать и выполнять фрагменты кода в отличие от полной страницы. Эта функция очень полезна с точки зрения тестирования.
  • Показать построитель расширений . Позволяет создавать собственные расширения Safari, соответствующим образом упаковывая код и добавляя метаданные.
  • Начать запись на временной шкале . Записывает ряд элементов, включая сетевые запросы, выполнение JavaScript, рендеринг страниц и другие события в течение определенного пользователем периода, которые можно просмотреть в Инспекторе WebKit.
  • Пустые кеши . При выборе этого параметра удаляется весь сохраненный кеш в Safari, а не только стандартные файлы кеша веб-сайтов.
  • Отключить кэши . Если кэширование отключено, ресурсы загружаются с веб-сайта каждый раз, когда делается запрос на доступ, а не с использованием локального кэша.
  • Разрешить JavaScript из поля интеллектуального поиска . По умолчанию эта функция отключена по умолчанию. Она позволяет вводить URL-адреса, содержащие JavaScript, в адресной строке Safari.
  • Относитесь к сертификатам SHA-1 как к небезопасным: Сокращенно от алгоритма безопасного хэширования, было доказано, что хэш-функция SHA-1 менее безопасна, чем первоначально предполагалось, поэтому в Safari 9 была добавлена ​​эта опция.
Оцените статью
Solutics.ru
Добавить комментарий