10 советов для разработчиков, использующих Safari на Mac

Apple утверждает, что Safari является самым быстрым браузером и помогает продлить время автономной работы по сравнению с Chrome и Firefox. Хотя производительность Safari со временем снижается, это определенно лучший браузер на Mac. Специально для разработчиков есть множество скрытых функций, позволяющих более эффективно использовать Safari. В этой статье мы рассмотрим 10 советов для разработчиков, использующих Safari на Mac.

1. Включить меню разработки

По умолчанию меню разработчика в Safari отключено, поэтому вы не сможете просматривать исходный CSS или HTML веб-страницы. Перейдите к “Safari> Настройки…»И включите опцию на вкладке« Дополнительно », чтобы добавить«Разработать»В строке меню по умолчанию.

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

2. Просмотр полного URL-адреса в адресной строке и строке состояния

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

Точно так же, если вы привыкли смотреть на левую нижнюю часть строки состояния при наведении курсора на ссылки, вы можете включить отображение ссылок в меню «Просмотр> Показать строку состояния».

3. Просмотр исходного кода страницы.

Однажды “Разработать», Щелкнув правой кнопкой мыши на странице, вы увидите дополнительные параметры для просмотра источника страницы и«Проверить элемент” параметры. Выбор любого из вариантов откроет консоль веб-инспектора Safari, показывающую ресурсы, используемые на странице.

Параметры правой кнопки мыши в Safari

Параметры правой кнопки мыши в Safari

Подробнее о просмотре исходного кода страницы с помощью Safari.

4. Очистить и отключить кеши

Хотя кеши помогают быстрее загружать страницу обычным пользователям, это одна из самых больших проблем для разработчика. Особенно, когда вы вошли на какой-либо сайт, невозможно очистить кеши с помощью опции очистки истории, так как это приведет к выходу с сайта. Самый простой способ – использовать пустые или отключить кеши, доступные в разделе «Разработать»Меню.

Меню разработки Safari

Меню разработки Safari

5. Включите адаптивный режим.

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

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

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

Ниже приведены параметры, которые можно использовать в адаптивном режиме:

  • Войдите или выйдите из адаптивного режима с помощью сочетаний клавиш «Option + Command + R” когда “Разработать”Меню включено.
  • Выберите устройство и коэффициент масштабирования для изображений сетчатки, чтобы увидеть, как страница выглядит на разных устройствах.
  • Вы можете перетащить размер страницы, чтобы просмотреть его по мере необходимости.
  • По умолчанию для всех устройств Apple доступны портретные и альбомные режимы просмотра, чтобы посмотреть, как страница будет выглядеть на iPhone, iPad и Mac.
  • Вы также можете выбрать пользовательские агенты для браузеров Chrome, Firefox, IE и Edge, чтобы увидеть, как страница выглядит на платформах Windows, OS X и iOS. Пользовательские агенты также можно изменить с помощью «Разработка> Пользовательский агент»Пункт меню.

6. Редактор фрагментов

Редактор фрагментов – это средство предварительного просмотра кода, доступное в разделе «Разработать»Меню. Это помогает проверить коды CSS, JavaScript и HTML на странице как песочнице, не открывая другую страницу.

Редактор фрагментов Safari

Редактор фрагментов Safari

7. Отключите изображения, стили и JavaScript.

Легко отключить или включить изображения на веб-странице, CSS и JavaScript, используя один щелчок в разделе «Разработать»Меню. Это помогает разработчику просматривать страницу без изображений, CSS и скриптов, чтобы проверить время загрузки и устранить другие проблемы.

8. Запись на временной шкале

Поскольку скорость загрузки страницы более важна, легко записывать действия на странице с помощью «Начать запись на шкале времениВариант под «Разработать»Меню. Вы можете использовать запись для анализа входящих сетевых запросов HTTP, рендеринга макета и событий JavaScript.

Запись на временной шкале Safari

Запись на временной шкале Safari

9. Отключите ограничение для разных источников и локальных файлов.

Ограничение перекрестного происхождения (CORE) – это основа веб-проектирования, которая не позволяет загружать файлы определенных типов, например шрифты, размещенные в другом домене. Отключив CORE, вы можете легко тестировать ресурсы, расположенные на любых других доменах.

Точно так же отключение параметра ограничения локальных файлов помогает отключить проверки безопасности, мешающие вашей локальной разработке.

10. Разрешить использование JavaScript в поле интеллектуального поиска

Включение этой опции в разделе «Разработать»Меню позволит вам запускать выражения JavaScript прямо из адресной строки Safari с синтаксисом«javascript: выражение».

Получите 10 советов по повышению производительности Safari для обычных пользователей.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *