Объясняем на примерах из вашей (и нашей) жизни.
Режим Разработчика – специальное меню в стандартном браузере Safari, которое открывает доступ к дополнительным функциям приложения. Часть возможностей пригодится разработчикам ПО и сайтов, но каждый из вас найдет в нем нечто полезное.
Для активации меню, которое скрыто по умолчанию, достаточно перейти в настройки (Safari – Настройки
), открыть раздел Дополнения
и активировать последний флаг на странице.
После этого в строке меню появится новый раздел Разработка .
Теперь давайте посмотрим, что интересного можно найти в открывшемся разделе.
Очень часто бывает необходимо открыть тот или иной сайт в Сhrome или другом приложении. Делать это следует, например, для просмотра 360-градусного видео на YouTube или корректного отображения Flash на странице.
Чтобы не копировать путь из адресной строки и не вставлять его в другом приложении, используем пункт Открыть страницу с помощью из меню Разработка .
Когда нужно сохранить данные с сайта или загрузить картинку, которая защищена от выделения, пригодится данный режим просмотра. Открыть его можно из меню Разработка – Показать ресурсы страницы
или воспользоваться сочетанием клавиш Command + Alt (Option) + A
.
Слева в браузере можно просмотреть используемые на странице шрифты и картинки. Продвинутым пользователям пригодятся скрипты, фреймы и таблицы стилей.
Когда нужно удалить все служебные данные, сохраненные в памяти части страниц и прочий мусор, можно быстро очистить системный кэш.
Такая опция расположена в меню Разработка – Очистить кэши (Command + Alt (Option) + E ), а ниже есть возможность вовсе отключить кэширование данных при работе с браузером.
Во время работы через медленный Wi-Fi в кафе или отеле может пригодиться функция отключения загрузки скриптов и картинок. Находится она в нижнем блоке меню Разработка.
Каждый пункт отвечает за отключение определенных данных на странице. Для экономии трафика или повышения скорости загрузки страниц используем отключение картинок, остальные пункты применяем в экспериментальных целях при некорректной работе того или иного сайта.
Когда понадобится узнать, как выглядит страница на экране iPhone или iPad, обязательно пригодится адаптивный режим просмотра, который разработчики OS X назвали Пользовательский агент
.
Находится он в уже знакомом меню Разработка . После активации данного режима над открытой страницей появятся кнопки для переключения вариантов отображения. Всего в пару нажатий можно увидеть верстку сайта на экране iPhone и iPad любой модели.
Есть режимы отображения страницы в других браузерах и при низком разрешении экрана.
Как видите, меню Разработка включает в себя несколько полезных опций, которые могут пригодиться большинству пользователей компьютеров Mac.
Начиная с Safari на iOS 6 и более поздних версиях можно отлаживать мобильный веб-контент с вашего Mac. Вы можете просмотреть ошибки JavaScript, редактировать атрибуты HTML, изменить свойства CSS, так же, как при разработке для Safari на OS X. В этом разделе описывается, как использовать веб-инспектор для отладки веб-контента на iOS.
Вы должны проверить ваш веб-контент как на десктоп системах, так и на различных устройствах iOS. Если у вас нет iOS устройств для тестирования, вы можете использовать iOS Simulator из iOS SDK. Поскольку есть разница между веб-страницами на iOS и OS X, вы должны специально проверить свой контент на iPhone и iPad или эмулировать аппаратное устройство в симуляторе. При тестировании в Safari на любой платформе, вы можете использовать Веб-инспектор для отладки веб-контента.
Веб-инспектор содержит ценную информацию о том, что могло бы идти не так в вашем веб-контенте. Даже при том, что веб-инспектор доступен через Safari на OS X, вы можете использовать его, чтобы проверить контент, который загружается в Safari или в любой UIWebView на iOS.
Когда Веб-инспектор на IOS включен, подключите устройство к Mac с помощью кабеля USB. Появляется пункт меню в меню Разработка Safari на OS X, как показано на рисунке ниже. Если имя устройства не сразу появляется в меню Разработка, попробуйте перезагрузить Safari и/или повторно подключить кабель.
Название пункта меню будет либо именем каждого устройства, подключенного и/или название симулятора. Подменю со страницами доступными в iOS Safari. Приложение должно быть запущено на переднем плане для того, чтобы появиться в меню Разработка. Выберите страницу, которая вас интересует, и Веб-инспектор откроется в новом окне.
Все функции Веб-инспектора на OS X, такие как время HTTP запросов, профилирование JavaScript, или манипулирование DOM-деревом доступны также на iOS. Единственное отличие в том, что, выбрав вашу веб-страницу через меню Разработка, вы активно проверяете веб-контент на вашем устройстве, а не на вашем Mac. Если вы переходите на другой адрес на вашем устройстве с все еще открытым Инспектором окна, вы заметите, что инспектируемые данные перезагрузятся для отражения страницы на которую вы перешли.
В браузер 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 , т.е. наоборот, а не в привычном понимании.
Данный пункт можно применять не только для определения нужных значений, но и для их установки. Достаточно дважды щёлкнуть по нужному значению и ввести число. Указывать единицы измерения не нужно, по умолчанию принимаются пикселы.
Знает, что в штатном браузере Safari присутствует скрытое меню «Разработка ». В этом материале мы расскажем о возможностях этого раздела.
Вконтакте
В первую очередь, это меню будет полезно веб-разработчикам, которым необходим доступ к коду, разнообразным вариантам отображения страниц, отключения контента и так далее. Также найдётся несколько полезных фич и для рядовых пользователей.
Из этого меню можно быстро запустить текущую страницу в любом другом установленном на Mac браузере. Очень удобно в том случае, если Safari не может воспроизвести какой-либо мультимедийный контент. Например, если вы хотите посмотреть VR-ролик (для очков виртуальной реальности), то для этой цели куда лучше подойдёт Google Chrome.
Не менее интересной функцией станет режим отображения программного кода страницы. Зачем это может быть нужно? Там есть вкладка «Ресурсы », благодаря которой не составит труда скачать изображение, не реагирующее на нажатие правой клавишей мыши.
Также пригодится функция очистки или отключения кэша. А ещё иногда возникает надобность в выключении отображения изображений или скриптов.
Веб-дизайнеры сами разберутся в инструментах меню «Разработка », но отдельно хочется отметить возможность запуска режима отзывчивого дизайна. В нём отображается качество оптимизации странички веб-сайта в зависимости от того, на каком устройстве она будет запущена и с каким разрешением.
1 . Запустите Safari. В строке меню выберите раздел Safari → Настройки или нажмите сочетание клавиш Command (⌘) + , (запятая) .
2 . Перейдите во вкладку «Дополнения ».
3 . В самом низу поставьте галочку напротив пункта «Показывать меню «Разработчика» в строке меню ».
Всё! После этих действий в строке меню появится новый раздел «Разработка ».
