Как удаленно отлаживать сайты для Android с помощью Chrome DevTools
Поскольку под управлением Android работает более 2,5 млрд устройств, разработчики не могут игнорировать оптимизацию веб-страниц для этой операционной системы (ОС). Обычно на устройствах с Android предустановлен браузер Google Chrome, поэтому большинство пользователей, скорее всего, отдадут предпочтение ему. К тому же многие используют его и на компьютере. С появлением технологии прогрессивных веб-приложений (Progressive Web Apps — PWA) пользователи ожидают их высококачественные версии и в браузере, а не только в форме нативных приложений.
Несмотря на возможность изменять размер окна браузера и использовать инструменты разработчика, полностью смоделировать особенности работы приложения на мобильных устройствах не получится. Например, функция выбора элемента работает на экране монитора компьютера, но имеет проблемы на мобильном девайсе. Версии браузеров для настольных компьютеров и мобильных устройств различаются, поскольку некоторые функции зависят от используемой платформы.
30 Minutes DevTools Review for HTML / CSS / JavaScript Beginners
Рассмотрим процесс тестирования веб-сайтов на устройствах Android с помощью инструментов удаленной отладки Chrome.
Как с помощью Chrome DevTools удаленно отлаживать сайты для Android
1. Включите в настройках разработчика устройства Android отладку через USB.
2. Подключите смартфон кабелем к порту USB компьютера. Устройство Android может запросить подтверждение на подключение к этому компьютеру.
3. Откройте в компьютере chrome://inspect/#devices .
4. Убедитесь, что у вас установлен флажок “Discover USB devices” (Обнаруживать USB-устройства).
5. Если приложение работает локально, тогда необходимо добавить переадресацию портов. В противном случае Android-устройство не сможет подключиться к приложению! В этом примере я добавил переадресацию для локального внешнего порта 3000 и локального внутреннего порта 5000.
6. Откройте свой сайт, указав в поле ввода URL-адрес.
7. Обязательно включите в меню Screencast, чтобы на экране компьютера сайт отображался так же, как и на вашем устройстве. Теперь можно проверять и отлаживать его с помощью инструментов Chrome DevTools.
На экране выше представлено веб-приложение, работающее на localhost: 3000. Как и на любом другом сайте, здесь можно проверять DOM, изменять стили, отлаживать код JavaScript, моделировать медленную сеть и многое другое.
Достоинства удаленной отладки Chrome
· Возможность взаимодействовать с сайтом как на компьютере, так и на устройстве Android.
· Chrome DevTools помогает основательно проверить и отладить тестируемый сайт.
· Хорошая производительность для обычных сайтов и приложений. Большинство веб-страниц и даже одностраничные приложения должны отображаться безупречно.
· Выполненные в коде изменения отображаются автоматически (если этого не произошло, перезагрузите страницу или выполните оперативную/горячую перезагрузку модуля).
DevTools за 30 минут! (новичкам в HTML/CSS)
· Тестирование на реальных устройствах более эффективно в сравнении с переключением на мобильное представления в браузере Chrome.
Недостатки удаленной отладки Chrome
· Производительность системы может оказаться недостаточной из-за потоковой передачи.
· Поскольку это функциональность Google Chrome, вы не сможете использовать такой же подход и с другими браузерами, например с Mozilla Firefox.
Заключение
Это краткое введение демонстрирует возможность несложной удаленной отладки отображения сайтов в браузере Chrome на устройствах Android с помощью Chrome DevTools.
- Советы по модуляризации приложений Android
- 8 частых ошибок в Android-разработке
- Clean Architecture в Android для начинающих
Источник: medium.com
Инструменты разработчика DevTools в Google Chrome
Как известно, веб-разработка делится на 2 части: frontend (фронтенд) и backend (бэкенд).
Вольно выражаясь, фронтенд это то, что работает в браузере, т.е. верстка (html + css) и браузерные скрипты (javascript).
Бэкенд — это скрипты, работающие на сервере.
В этой статье разберем инструменты разработчика (DevTools), которые встроены во все современные браузеры. Эти инструменты — незаменимая вещь для фронтенд-разработчика.
Разбирать будем на примере инструментов разработчики, которые встроены в браузер Google Chrome.
Открыть инструменты разработчика можно 3-мя способами:
- Нажать клавишу F12
- Нажать сочетание клавиш ctrl+shift+i
Через меню браузера: в правом верхнем углу три точки -> Дополнительные инструменты -> Инструменты разработчика См. картинку:
Внимание: Инструменты разработчика предоставляют огромное множество возможностей, и в этой статье мы разберем лишь некоторые из них.
Сначала про расположение: открыв блок инструментов в правом верхнем углу мы снова видим три точки, нажав на них можно расположить инструменты разработчика справа, слева, внизу и в отдельном окне. См. скриншот:
Инструменты разработчика для верстальщика
Инструменты распределены по панелям. Их достаточно много, но как часто бывают, чаще используют лишь некоторые из них.
Панель «Elements»
Эта панель отображает элементы и их свойства, и мы можем редактировать эти элементы и свойства прямо тут же в браузере.
Панель «Elements» разделена на две области: дерево элементов страницы и свойства выбранного элемента.
Выбрать элемент, для просмотра его свойств, можно разными способами:
Щелкнуть по нему правой кнопкой мыши и выбрать пункт меню «Посмотреть код»
При помощи визуального поиска: щелкаем мышью по стрелочке, которая находится в левом верхнем углу блока инструментов разработчика и мышью выбираем нужный элемент:
Выбрать элемент в инспекторе кода
При активных инструментах разработчика нажать ctrl+f и в появившейся строке поиска ввести: тег, класс, атрибут, текст элемента…
На панели «Elements» можно увидеть все css-правила, применяемые к элементу.
В реальной разработке к одному элементу может применяться множество правил, находящихся в разных местах css-файла, и, даже в разных css-файлах.
И в этом случае вкладка «Elements» просто незаменима. На скриншоте ниже показан элемент, на который действует множество правил, находящихся в разных местах и разных файлах, сразу видно, в каком файле и на какой строке находится то или иное правило:
Это очень удобно при изучении чужого кода.
Например, мы изучаем популярнейший css-фреймворк bootstrap. Среди его классов, относящихся к сетке (т.е. к позиционированию элементов) имеется класс .row. Любой, кто верстает с использованием этого фреймворка использует этот класс, практически, на каждой странице. Для чего же он нужен?
Открывает инструменты разработчика, находим элемент с этим классом, выделяем его и смотрим:
Глядя на эти правила, мы понимаем, что:
- Этот класс является flex-контейнером для вложенных элементов display: flex;
- Элементы, находящиеся внутри этого контейнера, будут выстраиваться в несколько строк flex-wrap: wrap;
- Ну и видим, справа и слева минусовые отступы.
Но и это далеко не всё. Мы можем просмотреть правила, которые применяются при срабатывании псевдоклассов. Таких как :hover, :active и т.д. См. скриншот:
Можно увидеть, как будет выглядеть элемент, если к нему применить какой-то из существующих классов или отключить уже примененный класс:
Переключившись на вкладку «computed» можно посмотреть окончательную версию всех стилей, примененных к элементу:
Проверка разметки на адаптивность
Поскольку современная верстка адаптивна, т.е. делается под множество устройств с различными размерами экрана, перед разработчиком встает задача, проверить, как будет выглядеть его верстка при различной ширине экрана.
Для этого мы можем использовать «Переключение в режим устройства» (Toggle device mode). Повторное нажатие на эту иконку, вернет обычный режим:
И после этого, можно выбирать какое-то устройство из списка или выбрать произвольную ширину:
Вы можете выбрать устройство и повернуть его:
В режиме устройства, можно перезагрузить страницу с эмуляцией медленного интернета, вы увидите, насколько долго грузится ваша страница, быть может стоит оптимизировать изображения? См. скриншот ниже:
Инструменты разработчика для javascript-программиста
Программирование состоит не только из написания кода. Редко случается, что мало-мальски сложный код начинает сразу работать так, как было задумано. В большинстве случаев “что-то идет не так”. Чтобы заставить программу (скрипт) выполняться так, как задумал разработчик, ее «отлаживают».
Отладка — этап разработки, на котором обнаруживают и устраняют ошибки. Часто она занимает больше времени, чем собственно написание кода.
Для фронтенд javascript-программиста средой выполнения скриптов, которые он пишет, является браузер. Дальше посмотрим какие возможности для отладки предоставляют нам «инструменты разработчика» в Google Chrome.
Панель «Console»
В консоль выводятся различные сообщения об ошибках, предупреждения, другая информация.
В принципе, при написании js-скриптов консоль, обычно, открыта всегда, поскольку любые необработанные ошибки, сразу видны. Видны файл и строка, где произошла ошибка:
Источник: dzen.ru