Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)
Создание и отладка веб-сайтов и веб-приложений для мобильных устройств может быть трудной задачей. На рабочем столе у нас есть мощные инструменты для отладки; у большинства браузеров есть веб-инспектор. Но у нас нет таких инструментов для устройств, как iPhone и iPad ... то есть, до сих пор!
С недавним выпуском Safari 6 и iOS 6 теперь можно использовать веб-инспектор для создания и отладки веб-сайтов на рабочем столе и на мобильном Safari. Как? Процесс настройки простой. Следуйте этому руководству, и у вас под рукой появятся очень мощные средства отладки для мобильных устройств практически мгновенно.
Современные инструменты для разработчиков браузеров оказали огромную помощь в создании веб-сайтов и веб-приложений. Chrome имеет инструменты для разработчиков. Fire Fox? Firebug. Сафари? Веб-инспектор. Все чрезвычайно мощные инструменты в веб-разработке.
Как бы то ни было, до этого момента отладка веб-сайтов и веб-приложений на мобильных устройствах была трудной задачей. Поскольку Safari и Chrome работают на движке webkit, есть много общего в том, как рабочий стол и мобильный браузер отображают веб-макет. Таким образом, большинство дизайнеров/разработчиков создают и настраивают свои веб-сайты на рабочем столе, используя один из этих браузеров, предполагая, что в результате действия движка webkit страница будет одинаково выглядеть и на мобильном устройстве.
Однако мобильные и настольные платформы на самом деле совершенно разные. Они имеют различную ёмкость памяти, потенциал производительности, устройства ввода и сетевое подключение. Поэтому стало крайне важно, чтобы отладочные инструменты дизайнера для мобильных устройств стали более эффективными и соответствовали аналогам на рабочем столе.
Новые программные версии Apple для iOS 6 и Safari 6 привнесли множество функций инструментов отладки для настольных компьютеров, которые мы все знаем и любим по мобильным устройствам. Этот урок покажет простой процесс получения настроек для отладки мобильных сайтов с помощью веб-инспектора Safari.
Вначале обратите внимание на совместимость: для пользователей Windows есть несколько плохих новостей. Вы можете отлаживать только удалённый веб-инспектор на Mac. Safari 6 для Windows недоступен. Кроме того, Safari 6 доступен только для компьютеров Mac с OSX Lion и выше.
Методы использования веб-инспекторов
Существует два метода использования веб-инспектора в мобильном Safari:
- Метод реального устройства: используйте реальный iDevice (iPhone, iPad и т. д.), подключенный к компьютеру через USB-порт
- Метод виртуального устройства: используйте симулятор iOS, который является частью Xcode
Мы рассмотрим оба этих метода и выберем наиболее подходящий для вашей ситуации.
Шаг 1. Убедитесь, что вы в курсе
Поскольку отладка мобильных устройств с веб-инспектором - это новая функция, вам необходимо убедиться, что у вас есть всё самое последнее программное обеспечение.
Реальный метод устройства: чтобы использовать веб-инспектор в тандеме с реальным iDevice, вам понадобится следующее:
- IDevice (iPhone, iPad, iTouch), работающий под управлением iOS 6
- USB шнур
- Safari 6
- Mac OSX Lion (10.7.4) или выше
Метод виртуального устройства: чтобы использовать веб-инспектор в тандеме с симулятором 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.
- Просматривать хранилища сайтов.
У вас есть инструменты, идите и стройте!
