Как активировать инструменты разработчика в Safari. Быстрый совет: отладка Mobile Safari с помощью Web Inspector

Создание и отладка веб-сайтов и веб-приложений для мобильных устройств может быть трудной задачей. На рабочем столе у нас есть мощные инструменты для отладки; у большинства браузеров есть веб-инспектор. Но у нас нет таких инструментов для устройств, как iPhone и iPad ... то есть, до сих пор!

С недавним выпуском Safari 6 и iOS 6 теперь можно использовать веб-инспектор для создания и отладки веб-сайтов на рабочем столе и на мобильном Safari. Как? Процесс настройки простой. Следуйте этому руководству, и у вас под рукой появятся очень мощные средства отладки для мобильных устройств практически мгновенно.

Современные инструменты для разработчиков браузеров оказали огромную помощь в создании веб-сайтов и веб-приложений. Chrome имеет . Fire Fox? . Сафари? Веб-инспектор. Все чрезвычайно мощные инструменты в веб-разработке.

Как бы то ни было, до этого момента отладка веб-сайтов и веб-приложений на мобильных устройствах была трудной задачей. Поскольку Safari и Chrome работают на движке webkit, есть много общего в том, как рабочий стол и мобильный браузер отображают веб-макет. Таким образом, большинство дизайнеров/разработчиков создают и настраивают свои веб-сайты на рабочем столе, используя один из этих браузеров, предполагая, что в результате действия движка webkit страница будет одинаково выглядеть и на мобильном устройстве.

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

Новые программные версии Apple для iOS 6 и Safari 6 привнесли множество функций инструментов отладки для настольных компьютеров, которые мы все знаем и любим по мобильным устройствам. Этот урок покажет простой процесс получения настроек для отладки мобильных сайтов с помощью веб-инспектора Safari.

Вначале обратите внимание на совместимость: для пользователей Windows есть несколько плохих новостей. Вы можете отлаживать только удалённый веб-инспектор на Mac. Safari 6 для Windows недоступен . Кроме того, Safari 6 доступен только для компьютеров Mac с OSX Lion и выше.

Методы использования веб-инспекторов

Существует два метода использования веб-инспектора в мобильном Safari:

1. Метод реального устройства: используйте реальный iDevice (iPhone, iPad и т. д.), подключенный к компьютеру через USB-порт
2. Метод виртуального устройства : используйте симулятор iOS, который является частью Xcode

Мы рассмотрим оба этих метода и выберем наиболее подходящий для вашей ситуации.

Шаг 1. Убедитесь, что вы в курсе

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

Реальный метод устройства: чтобы использовать веб-инспектор в тандеме с реальным iDevice, вам понадобится следующее:

• IDevice (iPhone, iPad, iTouch), работающий под управлением iOS 6
• USB шнур
• Safari 6

Чтобы использовать веб-инспектор в тандеме с симулятором iOS, вам понадобится следующее:

• Safari 6
• Mac OSX Lion (10.7.4) или выше
• Xcode 4.5 с iOS 6 SDK (available in the app store)

Проверка версий программного обеспечения: чтобы проверить, используете ли вы iOS 6 на вашем iDevice, перейдите в "Settings > General > About" на вашем устройстве.

Чтобы проверить, используете ли вы Safari 6, откройте панель инструментов Safari и нажмите «Safari> About Safari».

Чтобы убедиться, что вы используете Lion, нажмите на логотип Apple в строке меню и выберите "About this Mac"

Чтобы убедиться, что вы используете правильную версию Xcode, откройте Xcode и выберите «Xcode> About Xcode»

Шаг 2. Включение инструментов разработчика

Вы должны включить инструменты разработчика и веб-инспектора в настольных и мобильных версиях Safari.

Метод реального устройства: если вы собираетесь использовать реальное устройство, подключите его к своему Mac через USB.

Метод виртуального устройства: если вы собираетесь использовать имитатор iOS, откройте Xcode, затем щёлкните правой кнопкой мыши значок док-станции и выберите "Open Developer Tool > iOS Simulator".

Mobile Safari: на вашем реальном iDevice или в симуляторе iOS перейдите в "Settings > Safari > Advanced" и включите "Web Inspector".

Desktop Safari: если вы этого ещё не сделали, убедитесь, что ваши инструменты разработчика в Safari включены. Вы сможете в этом убедиться, открыв "Develop" в строке меню.

Если вы не видите "Develop" в строке меню, перейдите в панель меню и нажмите "Safari > Preferences > Advanced" и установите флажок "Show develop menu in menu bar".

Шаг 3. Проверьте свой веб-сайт

Теперь, когда у вас открыт iOS Simulator или ваш iDevice подключен к Mac через USB (или оба!), вы готовы начать использовать веб-инспектор на своем сайте.

На вашем Mac откройте Safari и перейдите в раздел "Develop". Теперь вы должны увидеть любые iDevices (виртуальные или реальные), которые вы подключили и запустили с помощью своего mac. На скриншоте ниже вы увидите, что у меня в меню два устройства: одно - симулятор iOS, а другой - настоящий iPhone, подключенный к моему mac.

Чтобы начать проверку веб-сайта, у вас должно быть мобильное Safari, запущенное на устройстве и имеющее одну из вкладок, открытую для веб-сайта. Если у вас нет мобильного Safari, вы увидите сообщение "No Inspectable Applications".

Чтобы начать проверку, просто введите URL-адрес страницы, которую вы хотите проверить в мобильном Safari, а затем выберите этот сайт в меню "Develop". Вы можете начать проверку сайтов на своем реальном iDevice или с симулятора iOS. Когда вы выберете страницу, на странице появится синее наложение, указывающее ваш выбор.

Выбрав сайт, веб-инспектор Safari откроется и позволит вам начать проверку вашего веб-сайта. Вот оно!

Заключение

Теперь, когда в ваших руках есть веб-инспектор Safari, у вас гораздо больше контроля при создании и отладке веб-сайтов и веб-приложений.

Ниже примеры некоторых вещей, которые вы можете теперь делать, когда отлаживаете мобильные сайты:

• Вносить изменения в HTML и CSS.
• Видеть, как работает ваш сайт/приложение, включая просмотр подробных сведений о событиях JavaScript и сетевых запросах.
• Отлаживать JavaScript с использованием точек остановки и других инструментов.
• Просматривать предупреждения и ошибки.
• Открывать консоль.
• Искать DOM.
• Просматривать хранилища сайтов.

У вас есть инструменты, идите и стройте!

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

Вконтакте

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

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

Из этого меню можно быстро запустить текущую страницу в любом другом установленном на Mac браузере. Очень удобно в том случае, если Safari не может воспроизвести какой-либо мультимедийный контент. Например, если вы хотите посмотреть VR-ролик (для очков виртуальной реальности), то для этой цели куда лучше подойдёт Google Chrome.

Не менее интересной функцией станет режим отображения программного кода страницы. Зачем это может быть нужно? Там есть вкладка «Ресурсы », благодаря которой не составит труда скачать изображение, не реагирующее на нажатие правой клавишей мыши.

Также пригодится функция очистки или отключения кэша. А ещё иногда возникает надобность в выключении отображения изображений или скриптов.

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

Как включить меню «Разработка» в Safari на Mac?

1 . Запустите Safari. В строке меню выберите раздел Safari → Настройки или нажмите сочетание клавиш Command (⌘) + , (запятая) .

2 . Перейдите во вкладку «Дополнения ».

3 . В самом низу поставьте галочку напротив пункта «Показывать меню «Разработчика» в строке меню ».

Всё! После этих действий в строке меню появится новый раздел «Разработка ».

В браузер 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 , т.е. наоборот, а не в привычном понимании.

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