Как включить инспектор в сафари

Как использовать веб-инспектор в Safari на iOS и macOS

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

Разработчики часто проверяют отображение контента на мобильных устройствах с помощью эмуляторов. Это софт, который позволяет приблизительно посмотреть, как отображается сайт на iPhone. При этом пользователь сидит за компьютером и управляет виртуальным айфоном в режиме реального времени.

В статье расскажем, как пользоваться консолью разработчика на смартфоне, чтобы не тратить время на эмуляторы.

Веб-инспектор в Safari

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

iCloud профиль

Чтобы использовать веб-инспектор в Safari на iOS, необходимо привязать к телефону и Mac одинаковый профиль iCloud и настроить синхронизацию.

macOS

1. Откройте настройки.
2. Найдите Apple ID и запишите идентификатор учётной записи.
3. Выберите iCloud и включите Safari на панели справа.
4. Зайдите в настройки Safari и выберите вкладку «Дополнительно».
5. Включите опцию «Показать меню разработки в строке меню».

iOS

1. Зайдите в настройки смартфона.
2. Выберите аккаунт в верхней части меню.
3. Убедитесь, что на телефоне привязан тот же Apple ID, что и на Mac.
4. Найдите iCloud и включите его для Safari.
5. Вернитесь на главный экран настроек и выберите пункт «Общие».
6. Сбросьте местоположение и настройки конфиденциальности.

Включение веб-инспектора

Все готово к подключению iOS к Mac для синхронизации Safari.

1. Подключите iPhone или iPad к Mac по кабелю.
2. Согласитесь с запросом о доверии и введите код доступа.
3. Откройте браузер на iPhone и зайдите на сайт, который нужно отладить
4. Запустите Safari на Mac, выберите пункт «Разработка».
5. В подменю должен появиться iPhone. Выберите его и зайдите на сайт.
6. Откроется новое окно с веб-инспектором.

Решение проблем

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

1. Отключите iPhone от компьютера
2. Зайдите в настройки смартфона.
3. Сбросьте данные местоположения и конфиденциальности.
4. Отключите Wi-Fi на iPhone, включите Bluetooth и мобильную точку доступа.
5. Подключите смартфон к компьютеру.
6. Создайте доверенную связь.
7. Откройте Safari на iPhone и посетите сайт, который хотите отладить.
8. На Mac тоже запустите браузер. В разделе «Разработка» выберите iPhone и пункт «Подключиться через сеть».
9. Вернитесь в «Разработку», затем выберите пункт iPhone и сайт, который открыт на iPhone.

Отладка сайта на iOS может пригодиться разработчикам и тестировщикам. Каждый раз подключаться через Mac неудобно, но других стандартных решений нет. Старайтесь всегда устанавливать последнюю версию Safari для iPhone и Mac, чтобы защититься от различий в отображении контента.

Еще по теме:

• Как открыть веб-страницу из Safari в другом браузере на Mac
• Как навсегда отключить режим приватного просмотра в Safari на iOS 13
• Как удалить кэш в Safari на iPhone и iPad

Веб-инспектор Safari

В браузер Safari включено несколько средств для разработчика, позволяющих упростить создание и отладку сайта. К примеру, через Safari можно просматривать, как сайт будет выглядеть на iPhone и iPad. Для этого всего лишь требуется указать соответствующий пользовательский агент через меню Разработка (рис. 7.51).

Рис. 7.51. Выбор пользовательского агента

Также в Safari имеется прекрасный инструмент для отладки HTML и CSS кода под названием веб-инспектор. Для его вызова выберите меню Разработка > Показать веб-инспектор или воспользуйтесь комбинацией клавиш Ctrl + Alt + I . Если у вас нет этого пункта меню, зайдите в настройки браузера, выберите панель Дополнения и поставьте галочку в пункте «Показать меню Разработка в строке меню».

Веб-инспектор выводит список ресурсов, найденных на веб-странице — документы, таблицы стилей, изображения и скрипты. Позволяет увидеть и найти код веб-страницы и стилевые свойства элементов. Интерфейс веб-инспектора продемонстрирован на рис. 7.52. Из всего богатства возможностей программы для вёрстки нас интересует только меню Элементы.

Рис. 7.52. Веб-инспектор

По своему интерфейсу веб-инспектор напоминает Firebug — в левой панели показан HTML-код текущего документа, в правой панели — стиль выбранного элемента. Любой элемент на странице можно выбирать не только через код, но и с помощью инструмента он позволяет выбирать элемент простым щелчком по нему.

Набор стилей в инспекторе представлен в виде раскрывающегося списка, это позволяет компактно включить большой объём информации. Первый пункт «Вычисленный стиль» (рис. 7.53) содержит стиль элемента, который устанавливает браузер на основе собственного стиля, учёта наследования и добавленных свойств.

Рис. 7.53. Вычисленный стиль

Эти стили приведены для информации, менять что-либо в этом пункте нельзя. По цвету, если он представлен, можно щёлкнуть и изменить его формат представления на шестнадцатеричный, RGB или HSL.

Следующий пункт «Атрибут стиля» показывает встроенный стиль, т. е. тот, который задан через атрибут style . Пункт будет пустовать, если такого стиля нет.

Нижележащая группа пунктов показывает стиль текущего элемента и взаимосвязанных с ним элементов (рис. 7.54).

Рис. 7.54. Стиль элемента

Любое свойство в этом списке можно отредактировать, щёлкнув по нему. Универсальные свойства вроде padding или margin выводятся в виде раскрывающегося списка, в котором перечислены отдельные свойства, такие как padding-left , padding-top и др. Напротив каждого свойства стоит галочка, позволяющая быстро отключать свойство. Добавить новое правило можно с помощью меню скрытым за шестерёнкой в правом верхнем углу панели (рис. 7.55).

Рис. 7.55. Меню для добавления новых правил

Пункт «Размеры» демонстрирует блочную модель элемента — ширину и высоту элементов, а также значения отступов, границ, полей и позиционирования (рис. 7.56).

Рис. 7.56. Размеры элемента

Только надо учитывать, что отступами здесь называются свойства padding , а полями margin , т.е. наоборот, а не в привычном понимании.

Данный пункт можно применять не только для определения нужных значений, но и для их установки. Достаточно дважды щёлкнуть по нужному значению и ввести число. Указывать единицы измерения не нужно, по умолчанию принимаются пикселы.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как в Safari включить инструменты разработчика

Если необходимо отладить сайт на маке в сафаре, а инструментов для разработчика нет — их необходимо включить в настройках.

В браузере выберите меню и нажимаем «Настройки». В появившемся окне кликните «Дополнения» и в самом низу ставим галочку «Показать меню «Разработка» в строке меню».

После всего этого в меню браузера появится пункт «Разработка». Он дает браузеру много дополнительных функций, включая веб-инспектор, консоль ошибок, инструмент отладки JavaScript, возможность включать/выключать разные элементы страницы и много другое. Конечно же нельзя забывать, что все необходимо стараться писать без ошибок, что бы отладчик не понадобился.

Как активировать консоль отладки iPhone или веб-инспектор

До iOS 6 в веб-браузере iPhone Safari была встроенная консоль отладки, которую разработчики использовали для поиска дефектов веб-страниц. В последних версиях iOS вместо этого используется Web Inspector. Веб-инспектор используется веб-разработчиками для изменения, отладки и оптимизации веб-сайтов на устройствах Mac и iOS.

Для использования веб — инспектор, подключить iPhone к вашему Mac компьютеру с помощью кабеля, откройте Safari на Mac, а затем включить меню Развивайте в Safari Дополнительные настройки.

Информация в этой статье относится к iPhone и другим устройствам iOS с iOS 6 по iOS 12 и Mac на Mac OS X Leopard (10.5) и более поздних версиях, если не указано иное.

Активировать веб-инспектор на iPhone iOS 6 и более поздних версиях

По умолчанию веб-инспектор отключен, поскольку большинство пользователей iPhone не используют его. Тем не менее, разработчики могут активировать его в несколько коротких шагов. Вот как:

Нажмите значок « Настройки» на главном экране iPhone.

На iPhone с более ранней версией iOS откройте консоль отладки через « Настройки» > « Safari» > « Разработчик» > « Консоль отладки» . Всякий раз, когда Safari на iPhone обнаруживает ошибки CSS, HTML и JavaScript, детали каждого из них отображаются в отладчике.

Прокрутите вниз и коснитесь Safari, чтобы открыть экран со всем, что связано с веб-браузером Safari на вашем iPhone, iPad или iPod touch.

Прокрутите страницу вниз и коснитесь Дополнительно .
Переместите тумблер веб-инспектора в положение « Вкл .».

Подключите iPhone к Safari на Mac

Чтобы использовать веб-инспектор, подключите iPhone или другое устройство iOS к Mac, на котором запущен веб-браузер Safari. Подключите ваше устройство к компьютеру с помощью кабеля.