Інспектування коду на мобільних пристроях

Найчастіше, при верстці адаптивного сайту доводиться використовувати "Адаптивний режим" в браузерах. Це спрощує і прискорює саму розробку. Але не завжди на мобільних пристроях все виглядає, як в симуляторі на робочому столі. Для таких випадків буде корисним виконати налагодження веб-додатків на мобільному пристрої.

Для початку необхідно налаштувати пристрій, в якому ви зможете запускати і / або виконувати налагодження програми. Це може бути як смартфон, так і планшет, підключений до персонального комп'ютера через USB або по Wi-Fi. Розглянемо приклад налаштування за допомогою браузері Firefox (версія не нижче 39).

Включаємо режим налагодження на мобільному пристрої (Android)

(Приклад підключення проводився на Meizu M 3 note. На інших пристроях можливі інші шляхи.)

Налаштуйте пристрій переходимо в меню "Спеціальні Можливості". Потім в "Для розробників", і в ньому активуємо режим "налагодження по USB". Налагодження також можна провести і через WiFi.

Налаштування браузера Mozilla Firefox

Запускаємо Firefox на смартфоні або планшеті, в параметрах браузера переходимо в «Додатково», де включаємо віддалену налагодження.

Заходимо в Firefox на робочому столі. У пункті меню «Розробка» переходимо в «WebIDE». У вікні «Firefox WebIDE» в правій частині вибираємо підключений пристрій. Залежно від типу підключення воно буде висвітлюватися або в блоці USB, або WiFi.

Якщо пристрій підключено через USB - при кліці по ньому на самому пристрої спливе діалогове вікно із запитом на доступ. Дозволяємо доступ.

Якщо з'єднання налаштовано через WiFi - на пристрої з'явиться QR-код і запит для сканування. Натискаємо «сканувати» і скануємо код.

Після підключення в правому верхньому куті вікна «Firefox WebIDE» з'явиться повідомлення «підключення дозволено», а зліва відобразиться список вкладок, відкритих в браузері на вашому пристрої. Вибираємо потрібну вкладку, після чого відкриється інспектор коду вашого веб-додатки на мобільному пристрої.

Код сайту буде відображатися на робочому столі, а на пристрої буде видно який саме об'єкт інспектується.

Якщо у вас не вийшло підключити пристрій, спробуйте наступне:

• Встановіть ADB-драйвера для свого телефону. Драйвера можна взяти з сайту Android
• Оновити браузери на робочому столі і на мобільному пристрої
• Якщо не вдається просканувати QR код при підключенні через WiFi - спробуйте встановити Barcode Scanner
• Інші рішення ви можете знайти на офіційному сайті Mozilla

Пишіть в коментарі свої щодо вашого досвіду.