Налагодження сайту на мобільних пристроях

Тема не нова, але я хочу поділитись своїм досвідом налагодження сайтів на Бітрікс: Управління сайтом.

Як вже було сказано, сайт повинен добре виглядати як на десктопі, так і на мобільних пристроях. Для верстки з налагодженням відмінним інструментом є емулятор мобільного пристрою, вбудований в браузер. Однак бувають випадки, що в емуляторі і сторінка виглядає нормально, і скрипти працюють коректно, а безпосередньо на мобільному пристрої — ну ніяк. У такому випадку потрібно налагоджувати сторінку безпосередньо на проблемному гаджеті. Мій кейс заснований на скрипті, який виконував різні функції залежно від пристрою. Для цих випадків браузери надають можливість налагодження сторінки безпосередньо з віддаленого пристрою, підключеного до комп'ютера. Власне? нижче буде описано підключення смартфона на Android до Google Chrome і iPad до Safari.

Налагодження мобільної версії сайту на Google Chrome

Для початку потрібно включити на смартфоні функції для розробників: зайти в налаштування, вибрати пункт інформації про телефон і багаторазово натискати на пункт «Номер збірки», поки не з'явиться повідомлення «Ви стали розробником!». Якщо хтось не знав про таку операцію, будь ласка, зробіть репост статті або, хоча б, поставте лайк.

В налаштуваннях розділу «Функції для розробника» увімкнути пункт «Налагодження по USB».

Далі слід під’єднати пристрій до комп'ютера через USB-кабель і відкрити потрібний сайт в Chrome на смартфоні. На цьому налаштування смартфону завершене.

Далі відкриваємо на комп'ютері Google Chrome і в ньому — інспектор. В меню DevTools вибираємо пункт More tools, а в ньому Remote devices.

У інспекторі ми побачимо наш підключений телефон, адресу відкритої вкладки в мобільному браузері, а також кнопку «Inspect», натискання якої дозволяє проінспектувати сторінку:

Ось так виглядає вікно налагодження сторінки.

Всі маніпуляції зі сторінкою синхронізовані. Скрол і торкання на смартфоні також видно на сторінці налагодження, і навпаки.

Налагодження версії сайту для iPad в Safari

Підготовка цього гаджета займе набагато менше часу. В налаштуваннях iPad виберіть Safari і в його додаткових налаштуваннях увімкніть Веб-інспектор. На цьому налаштування пристрою завершене.

На комп'ютері відкриваємо Safari. У меню вибираємо «Розробка», знаходимо наш пристрій і сайт.

Відкриється інспектор, в якому вже можна налагоджувати сторінку, але саму сторінку на комп'ютері видно не буде. Я вважаю, що це не дуже зручно. Проте на самому IPad обраний в розмітці елемент буде підсвічуватися.

Просто і ефективно

Такий нехитрий підхід до налагодження сайту корисний тим, що можна відразу подивитися, як працює сайт на цьому пристрої. Це спосіб врахувати моменти, які неможливо перевірити чи змоделювати на емуляторах, або у випадках, коли потрібно використовувати сторонній функціонал від Apple і Android. Сподіваюся, вам це стане в пригоді.