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

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

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

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

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

Веб-инспектор 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 на iOS и macOS

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

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

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

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

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

iCloud профиль

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

macOS

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

Safari macOS

iOS

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

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

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

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

Safari

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

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

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

Safari

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

Еще по теме:

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

Как открыть меню Разработка (консоль разработчика) в Safari на Mac и для чего оно нужно

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

Safari больше не поддерживает небезопасные расширения на macOS

Для чего меню «Разработка» в Safari на Mac?

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