Швидка порада налагодження Mobile Safari за допомогою Web Inspector

Російська (Українська) translation by Yuri Yuriev

Створення та налагодження веб-сайтів та веб-додатків для мобільних пристроїв може бути важким завданням. На робочому столі ми маємо потужні інструменти для налагодження; більшість браузерів є веб-інспектор. Але у нас немає таких інструментів для пристроїв, як 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:

1. Метод реального пристрою: використовуйте реальний iDevice (iPhone, iPad тощо), підключений до комп'ютера через USB-порт
2. Метод віртуального пристрою : використовуйте симулятор 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" на вашому пристрої.

Щоб перевірити, чи використовуєте 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".

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

Висновок

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

Нижче наведено приклади деяких речей, які ви можете тепер робити, коли налагоджуєте мобільні сайти:

---