Все статьи | Дневник студента

Тестирование мобильной вёрстки на реальном девайсе в отладчике Chrome

Тестирование мобильной вёрстки на реальном девайсе в отладчике Chrome главное изображение

В этой заметке хочу поделиться с вами техникой как, используя устройство на android, тестировать сайт не выходя с отладчика Хрома.

Прежде всего нам нужно включить отладку по usb на самом устройстве. Тут тонкость получения зависит от самого устройства, но в общем случае надо в пункте о девайсе найти номер сборки андройда и тапать, пока не появится сообщение о том, что вы стали разработчиком (да-да, вот так легко стать андройд разработчиком :)). Заходим во вновь появившийся раздел меню для разработчиков и там включаем отладку по usb/ .

После этого подключаемся по usb-шнуру к компьютеру, разблокировав его, немного ждём и подтверждаем на телефоне, что доверяем отпечатку, нажав да и поставив единственную галочку.

подтверждаем действие, поставив галочку

После этого переходим к отладчику на компьютере по адресу chrome://inspect/#devices где и будет наш телефон. Ну а далее всё сводится к вашему умению пользоваться DevTools.

переходим к отладчику

Тут можем и адрес менять, те же стили редактировать и даже фокусы, типа alert('hello'), работают и выводятся на устройство.

Аватар пользователя Виталий Бородулин
Виталий Бородулин 12 октября 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
30 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
30 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
30 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
30 июня 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
30 июня 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
30 июня 5 месяцев