Safari для iOS містить додаткову консоль налагодження, яка допомагає веб-розробникам відстежувати та вирішувати проблеми з веб-сторінками на iPhone та iPad.

Що краще, в останніх версіях iOS він фактично використовує той самий Web Inspector, що й Safari на настільному комп’ютері, тобто якщо ви підключите iPhone або iPad до комп’ютера, ви зможете безпосередньо використовувати інструменти налагодження Safari з пристроєм iOS або iPadOS

Старіші версії iOS також мають цю можливість, і хоча вона не настільки інклюзивна, як налагодження та інструменти розробника Safari для настільних комп’ютерів, вона все одно корисна, і її легко ввімкнути або вимкнути на iPhone та iPad.

Давайте дізнаємося, як увімкнути цю функцію як у новій, так і в старій версіях iOS, а також дізнаємося, чим відрізняються версії.

Як увімкнути та використовувати Web Inspector у Safari для iPhone та iPad

У сучасних версіях iOS і iPadOS ось як працює веб-інспектор Safari:

1. Відкрийте «Параметри» > Safari > «Додатково», потім натисніть, щоб увімкнути «Веб-інспектор»
2. Підключіть iPhone або iPad до Mac, потім перейдіть до Safari та увімкніть меню розробника, якщо ви ще цього не зробили, перейшовши до Safari > Налаштування > Додатково > Показати рядок меню розробки
3. Потягніть рядок меню «Розробка» вниз і знайдіть iPhone або iPad, а потім відкрийте веб-сторінку, яку потрібно налагодити
4. Відкриється Safari Web Inspector, де ви зможете налагодити та перевірити веб-елементи з пристрою iOS або IPadOS безпосередньо в Safari на Mac

Тепер під час навігації на iPhone або iPad ви побачите оновлення веб-інспектора в Safari на Mac.

Ви можете отримати доступ до консолі налагодження через вкладку «Консоль» у веб-інспекторі, а ви можете отримати доступ до налагоджувача через вкладку «Налагоджувач». І, звичайно, також доступні звичайні інструменти веб-інспектора для елементів, ресурсів, мережі тощо.

Ви також можете скористатися трюком «Перегляд вихідного коду» для iOS і iPadOS, якщо ви в дорозі.

Як увімкнути консоль налагодження на старих версіях iOS

Якщо у вас старіша версія iOS на старішому iPhone або iPad, весь процес налагодження знаходиться на пристрої, і ви не зможете підключити його до Safari на Mac. Незважаючи на це, він все ще дуже корисний, ось як це працює:

1. Запустіть «Налаштування» та натисніть «Safari»
2. Натисніть «Додатково»
3. Пересуньте «Debug Console» у положення ON

Після ввімкнення торкніться консолі налагодження у верхній частині будь-якого екрана Safari, щоб побачити помилки веб-сторінки.

Список за замовчуванням показує всі помилки, але ви можете перейти до більш конкретних помилок HTML, JavaScript і CSS, натиснувши їх окремо.

Іншим корисним інструментом для мобільних веб-розробників є Firebug Lite для iOS, який використовує букмарклет javascript для завантаження простішої версії популярного інструменту розробки Firebug. Ця функція, мабуть, також є найбільш корисною для старих версій iOS, оскільки нові випуски мають нові можливості.

Чи використовуєте ви якісь інструменти веб-розробника для iPhone або iPad? Поділіться з нами будь-якими порадами, прийомами, програмами чи методами в коментарях нижче.