Главная

Sunday, 11 April 2021

Chrome DevTools - режим анализа кода на лету.


Всем привет.

Developer Tools - инструмент по умолчанию в браузере Google Chrome и других, который предназначен для разработчиков и тестировщиков с целью отладки кода. С его помощью можно просматривать код страницы, логи, загрузку страницы, отображение в разных разрешениях, ошибки кода и многое другое. Такая информация помогает разработчикам и тестировщикам понять причины ошибок, посмотреть как они воспроизводятся не только через пользовательский интерфейс, найти ошибки в коде, воспроизвести различные ситуации в работе с сайтом, например, отсутствие сети или смена положения мобильного устройства. Информация о багах, собранная в Developer Tools, помогает также лучше оформить баг-репорты, указав полезную дополнительную информацию, например, правильные названия элементов, стилей или ошибок так, как они отображаются в коде.

Про Chrome DevTools написано много, еcть даже мини-курсы по его изучению. Согласитесь неплохо владеть таким инструментом, который, к тому же, всегда на борту вашего web-браузера.

Но сегодня я акцентирую ваше внимание только на одну его фишку, которая на мой вгзляд очень полезна как для тестировщика так и для разработчика мобильных приложений или web-сайтов. Это режим анализа кода на лету непосредственно на вашем гаджете.

Набираем на ПК в браузере Chrome:

chrome://inspect/#devices

и отмечаем "Discover USB devices".

А на своем гаджете активируем режим "Отладка по USB" и подсоединяемся к основному ПК USB-шнурком. В вариантах предложенных на гаджете выбираем как "внешнее музыкальное устройство". У вас возможны варианты, но это точно будет не МТР. Включаем на гаджете выход в интернет и запускаем Chrome. Через некоторое время на ПК в браузере Chrome вы должны увидеть свой гаджет.


Двойной клик по нему открывает Chrome DevTools в котором вы можете инспектировать сайт открытый на вашем гаджете. Причем управление им возможно как с гаджета, так и с DevTools.


Если ваше устройтво не появляется в списке Chrome DevTools, то возможна ваше проблема описана здесь.

Успехов.


No comments:

Post a Comment

А что вы думаете по этому поводу?