1. Інструкція для Google Chrome
2. Інструкція для Mozilla Firefox
3. Бонус: налагодження сайтів по WiFi

DevTools в сучасних браузерах дозволяє переключитися в адаптивний режим і вельми непогано справляється зі своїм завданням. Але іноді трапляється так, що десь щось на мобільному виглядає не так, як на робочому столі. У таких випадках зрозуміти в чому справа, а не тикати пальцем в небо, допоможе інспектування елементів прямо на мобільном.Рассмотрім варіанти для Chrome і Firefox. Для початку, незалежно від браузера, потрібно підготувати пристрої і встановити драйвера.

1. Завантажуємо і встановлюємо ADB-драйвера для свого телефону. Драйвера можна взяти або з сайту Android , Або на форумі 4pda.ru .
2. Включаємо на телефоні режим налагодження. Для цього в настройках переходимо в меню розробника. Якщо його немає - переходимо в розділ «Про телефоні» і натискаємо кілька разів за пунктом «Номер збірки». У мене режим розробника вже включений, тому з'являється повідомлення. Потім в самому меню, нагорі, активуємо режим, знаходимо пункт «Режим налагодження» і активуємо його теж.
   Включаємо режим розробника Переходимо в меню розробника Включаємо налагодження по USB

На цьому загальні моменти завершені. Тепер подивимося як підключати телефон і як інспектувати елементи сайту на мобільному.

Інструкція для Google Chrome

Для налагодження в Chrome, на комп'ютері повинен бути встановлений браузер версії не нижче 32, а на версія Android повинна бути мінімум 4.

1. Відкриваємо інструменти розробника в браузері. Кількома по трьом точкам в правому верхньому куті. Вибираємо «More tools», потім «Inspect devices ...»
   
2. Ставимо галочку «Discover USB devices».
   
3. Запускаємо Chrome на телефоні і підключаємо його до комп'ютера. З'явиться запит на підключення. Тиснемо «Ок».
   
4. Бачимо зліва свій пристрій і його статус. Кількома по ньому.
   
5. Відображається список відкритих вкладок. Можна відкрити нову, ввівши адресу в поле зверху. Натиснувши на три точки, можемо перезавантажити вкладку, перейти на неї або закрити її. Натиснувши «Inspect», як нескладно здогадатися, активуємо інспектор.
   
6. Бачимо екран мобільного на комп'ютері. Всі зміни стилів відображаються на екрані комп'ютера і на самому смартфоні в режимі реального часу. Якщо змінити орієнтацію телефону - зміниться і на комп'ютері.
   

Інструкція для Mozilla Firefox

На Firefox подібне спрацює тільки на версії новіше 36.

1. Запускаємо Firefox на мобільному. Переходимо в настройки, потім в «Додатково» і включаємо віддалену налагодження.
2. Переходимо в меню Firefox на робочому столі. Вибираємо «розробка», потім «WebIDE».
   
3. Підключаємо телефон, бачимо його справа зверху. Кількома по ньому.
   
4. Дозволяємо доступ на мобільному.
   
5. Справа зверху бачимо, що підключення дозволено. Зліва відображається список вкладок. Вибираємо якусь.
   
6. Відкривається інспектор. Наводимо на елементи, пишемо стилі і бачимо результат на телефоні.
   

Бонус: налагодження сайтів по WiFi

Працює поки, на жаль, тільки на Firefox і тільки на версіях від 39 і вище. Щоб все спрацювало, комп'ютер і телефон повинні бути підключені до однієї мережі. Плюс до цього, на телефоні повинен бути встановлений сканер QR-кодів. Firefox рекомендує цей . Інші, до слова, Firefox у мене не розпізнав і наполегливо повторював, що програма-сканер не встановлена.

1. Знову переходимо в WebIDE, але на цей раз обираємо WiFi пристрою.
   
2. З'явиться QR-код для сканування.
   
3. На телефоні з'явиться запит. Натискаємо «сканувати» і скануємо код.
   
4. Усе!