Як використовувати Web Inspector для налагодження Mobile Safari (iPhone або iPad)

Розробка веб-сторінок для мобільних пристроїв або налагодження гібридної програми часто бувають складними. Але, на щастя для тих, хто займається проектуванням на iOS, починаючи з iOS 6, Apple пропонує функцію віддаленого веб-інспектора в iOS.

Web Inspector дозволяє розробникам веб- та мобільних додатків використовувати інструменти розробника macOS та OS X Safari для віддаленого налагодження веб-вмісту або гібридних програм у мобільному Safari на iPad або iPhone.

Це простий і практичний спосіб налагодити, оптимізувати та змінити ваші веб-сторінки або гібридні програми на iOS.

Щоб отримати доступ до цих інструментів розробки, увімкніть меню «Розробка» у розширених налаштуваннях Safari вашого Mac.

Швидкі поради

Дотримуйтесь цих коротких порад, щоб веб-інспектор запрацював, щоб ви могли налагодити свій сайт або додаток для Safari

• Скиньте налаштування місцезнаходження та конфіденційності на вашому iPhone, iPad або iPod touch. Йти до Налаштування > Загальні > Скидання > Скинути розташування та конфіденційність
• Переконайтеся, що ви ввійшли в той самий Apple ID на комп’ютері, що й ваш iPhone, iPad або iPod touch
• Увімкніть синхронізацію Safari iCloud як на комп’ютері, так і на будь-якому iPhone, iPad або iPod touch
• На iPhone або iPad перейдіть до Налаштування > Safari > Додатково і увімкніть Веб-інспектор
• На комп’ютері відкрийте Safari і перейдіть до Меню Safari > Налаштування > Додатково і галочка Показати меню Розробка в рядку меню

Схожі статті

• Перегляд вихідного коду HTML веб-сторінки на iPad або iPhone. Додаток не потрібен!
• Як переглянути вихідний код HTML у Safari
• Як побачити іконки у Safari для iPhone та Mac

Потрібен комп’ютер Mac

На жаль, Windows, але веб-інспектор Safari сумісний лише з комп’ютерами Mac!

Використовуйте той самий Apple ID та iCloud Sync!

Переконайтеся, що і ваш iDevice, і ваш Mac увійшли за допомогою одного Apple ID і що ви увімкнули Safari в iCloud.

Для вашого iDevice: Налаштування > Профіль Apple ID > iCloud > Safari > увімкнено

Для вашого Mac: Меню Apple > Системні налаштування > Apple ID або iCloud > Safari > Поставлено галочку

І переконайтеся, що Safari також є такою ж версією

Переконайтеся, що Safari на вашому Mac має ту саму версію, що і Safari на вашому iDevice. Можливо, вам знадобиться оновити версію iOS або версію Safari, яка працює на вашому Mac.

Скиньте налаштування місцезнаходження та конфіденційності

1. Йти до Налаштування > Загальні
2. Виберіть Скинути
3. Виберіть, щоб Скинути місцезнаходження та конфіденційність

Порада про комбінації клавіш Pro на Mac для веб-розробників

Якщо натиснути CTRL+Command+R у Safari, ви можете побачити, як виглядатиме веб-сайт на певному пристрої, вибравши пристрій.

Використовуйте Web Inspector для налагодження мобільного Safari

1. На iPad, iPhone або iPod touch натисніть Налаштування > Safari > Додатково і увімкніть Веб-інспектор. І увімкніть JavaScript, якщо він ще не ввімкнено

2. На своєму Mac запустіть Safari та перейдіть до Меню Safari > Налаштування > Додатково потім перевірте "Показати меню Розробка в рядку меню” якщо ви ще цього не зробили

3. Підключіть пристрій iOS до Mac за допомогою USB-кабелю. Це критично – ви повинні підключати пристрої вручну за допомогою кабелю. Через WiFi не працює!

4. Тепер на своєму iPad відкрийте веб-сайт, який потрібно налагодити, а потім на своєму Mac відкрийте Safari та перейдіть до «Розвивати” меню. Тепер ви бачите свій iDevice, який ви підключили до свого Mac. Якщо у вас немає відкритої сторінки на вашому iDevice, ви побачите повідомлення «Немає програм для перевірки».

5. Тепер налагодьте сторінку, відкриту в мобільному Safari, так само, як налагоджуєте на Mac, перевірте елементи DOM, змініть CSS, виміряйте продуктивність сторінки та запустіть команди Javascript.

Використовуйте інструмент налагодження, щоб допомогти вам знайти причину будь-яких помилок JavaScript на вашій веб-сторінці. Ви можете додавати точки зупинки, налагоджувати javascript і перевіряти значення змінних під час виконання.

Safari також має виявити будь-які помилки CSS, HTML і JavaScript. І ви побачите деталі кожної помилки в налагоджувачі.

iDevice не відображається в меню розробки в Safari?

•  Очистіть кеш і файли cookie Safari
• Оновіть Safari на Mac та iDevice, якщо доступне оновлення.
  • Якщо ви використовуєте бета-версію iOS або macOS, вам може знадобитися запустити останню бета-версію на всіх пристроях
• Спробуйте інший кабель та/або порт на своєму Mac. Переконайтеся в цьому кабель – це справжній кабель блискавки Apple або сертифікований MFI (зроблено для iPhone)
• Переконайтеся, що Web Inspector увімкнено. Оновлення iOS іноді повертають це налаштування до значення ВИМКНЕНО за замовчуванням. Тому просто перевірте Налаштування > Safari > Додатково > Веб-інспектор
  • Спробуйте вимкнути Web Inspector, зачекайте 10 секунд і знову ввімкніть його
• Натомість спробуйте браузер Safari Technology Preview
• Вийдіть із Safari на своєму Mac і перезапустіть його. Перевірте, чи Safari вашого Mac розпізнає ваш пристрій і дозволить налагодження
• Переконайтеся, що ви не використовуєте режим приватного перегляду Safari if ваш iDevice лише ненадовго з’являється в меню «Розробка» Safari, а потім зникає
• Відкрийте Монітор активності та перевірте, що відбувається з Safari

Поради читачам 

• Якщо ви використовуєте старіший iDevice з iOS 6 або старішою версією, веб-браузер Safari вашого пристрою має власну вбудовану консоль налагодження! Просто перейдіть до консолі налагодження Safari, перейшовши до Налаштування > сафарі > Розробник > Консоль налагодження