Отладка веб страниц через usb яндекс браузер
Поскольку под управлением Android работает более 2,5 млрд устройств, разработчики не могут игнорировать оптимизацию веб-страниц для этой операционной системы (ОС). Обычно на устройствах с Android предустановлен браузер Google Chrome, поэтому большинство пользователей, скорее всего, отдадут предпочтение ему. К тому же многие используют его и на компьютере. С появлением технологии прогрессивных веб-приложений (Progressive Web Apps — PWA) пользователи ожидают их высококачественные версии и в браузере, а не только в форме нативных приложений.
Несмотря на возможность изменять размер окна браузера и использовать инструменты разработчика, полностью смоделировать особенности работы приложения на мобильных устройствах не получится. Например, функция выбора элемента работает на экране монитора компьютера, но имеет проблемы на мобильном девайсе. Версии браузеров для настольных компьютеров и мобильных устройств различаются, поскольку некоторые функции зависят от используемой платформы.
Рассмотрим процесс тестирования веб-сайтов на устройствах Android с помощью инструментов удаленной отладки Chrome.
Как с помощью Chrome DevTools удаленно отлаживать сайты для Android
1. Включите в настройках разработчика устройства Android отладку через USB.
2. Подключите смартфон кабелем к порту USB компьютера. Устройство Android может запросить подтверждение на подключение к этому компьютеру.
4. Убедитесь, что у вас установлен флажок “Discover USB devices” (Обнаруживать USB-устройства).
5. Если приложение работает локально, тогда необходимо добавить переадресацию портов. В противном случае Android-устройство не сможет подключиться к приложению! В этом примере я добавил переадресацию для локального внешнего порта 3000 и локального внутреннего порта 5000.
6. Откройте свой сайт, указав в поле ввода URL-адрес.
7. Обязательно включите в меню Screencast, чтобы на экране компьютера сайт отображался так же, как и на вашем устройстве. Теперь можно проверять и отлаживать его с помощью инструментов Chrome DevTools.
Разработчики хромиума постоянно пилят огромное количество классных API для разных технологий и железяк. Тут и Web Share, и работа со звуком, Bluetooth, NFC, WebOTP и много чего ещё, более-менее полный список со статусами реализации можно посмотреть здесь. Но больше всего среди них впечатляет WebUSB API, о настоящих возможностях которого я узнал совсем недавно. Оказывается, с его помощью можно не только открывать странички с подключенных устройств, но и прошивать их. Это открывает новый крутейший сценарий работы со всякой мелкой электроникой.
Пара слов про WebUSB
Главной фишкой WebUSB считается возможность использовать USB-девайсы так, чтобы они при подключении открывали какой-то заданный сайт или запускали веб-приложение — в хроме вылезает уведомление, из которого можно его открыть. Главное преимущество в том, что можно писать кроссплатформенный код, который можно запустить сразу, без каких-либо инсталляторов и траты времени на выбор нужных файлов для ОС и архитектуры. Нажал на кнопку, получил результат.
Полностью описывать механизм работы и нюансы API можно долго, и для этого есть web.dev и стандарт. Самое интересное — в firmware. Так как железку, раздающую сайт, надо ещё научить это делать, разработчики, чтобы два раза не вставать, запилили возможность прошивать её прямо из браузера — точнее, не сломали эту возможность :)
zhovner многим открыл глаза этим видео — в том числе и мне
К USB-устройству обеспечен прямой доступ, со списком интерфейсов, VID/PID и другой информацией. Данные можно считывать и записывать управляющие команды, отслеживать состояния и так далее. Что из этого следует? Что тут же найдётся сумрачный гений, который запилит удобный инструмент, утилизирующий эти возможности! Так и появился PoC webdfu, позволяющий прошивать устройства в DFU-режиме.
DFU (Device Firmware Upgrade) — это спецификация, созданная для упрощения обновления прошивки на USB-устройствах. Она поддерживается почти на всех ОС, работает в специальных программах вроде DfuSe и в оригинальной dfu-util. Как нетрудно догадаться из названия, webdfu служит драйвером USB-DFU для хрома. Он может:
- Загружать текущую прошивку с устройства (upload)
- Записывать новую прошивку на устройство (download)
- Переключать устройство в режим DFU
- Выполнять upload/download совместимо с STM'овской DfuSe
- Открыть устройство, если нет прав на доступ к нему или отсутствует базовый драйвер (Windows изрядно портит этим нервы)
- Работать с файлами форматов DfuSe
- Загружать прошивку в формате .dfu
- Обрабатывать ошибки записи
Потестить это чудо техники можно с любым DFU-совместимым устройством, есть готовый проект dapboot для STM32F103, там вообще ни строчки писать не нужно, только собрать.
Ссылки
На правах рекламы
Виртуальные серверы с мгновенной активацией на Linux или Windows. Сервер готов к работе через минуту после оплаты!
Управление
В настройках Android вы наверняка находили загадочный пункт «Отладка по USB», но все ли знают, для чего нужен этот режим и как его правильно включить на разных версиях Android OS?
Для чего нужна отладка
Изначально этот режим был предусмотрен исключительно для разработчиков приложений или сервисов для Android. C помощью отладки они получали доступ к «внутренностям» операционной системы.
Но впоследствии стало встречаться всё больше случаев, когда режим отладки нужен и «простым» пользователям. Просто разработчики создали автоматизированные инструменты для получения рута (о root-доступе читайте здесь), восстановления смартфона, модификации ОС, которые требовали режима отладки.
Несмотря на грозное название, активировать этот режим достаточно просто.
Как включить отладку
Для Android 4.1 и более ранних: когда меню разработчика видно:
В ранних версиях Android опции разработчика доступны в явном и открытом виде. Просто откройте настройки системы. В разных версиях раздел опций разработчика может находиться в разных местах: в общем списке, в разделе «Приложения», в главном меню.
[su_note]Выберите пункт «Отладка по USB» и поставьте там галочку. Вы увидите всплывающее окно с предупреждением; просто нажмите «ОК».[/su_note]
Перегружать смартфон для активации этого режима не нужно.
Что делать, если нужный раздел не виден?
В версиях Android, начиная с 4.2.2, режим отладки (как и другие опции разработчика) не показывается в меню. Однако есть способ легко открыть их:
- Откройте меню настроек и вкладку «Общие»
- Найдите раздел «Об устройстве»
- Откройте в нём пункт «Сведения о ПО»
- Найдите в нём строку «Номер сборки» и тапните на ней 7 раз
- После того, как появится уведомление о получении статуса разработчика, вернитесь в раздел «Общие»
- Найдите в нём появившийся пункт «Опции разработчика»
- Найдите в этом разделе строку «Отладка USB» и поставьте там галочку
- Выйдите из меню[/su_list]
Поздравляем, теперь вы имеете доступ к своему устройству через компьютер!
Случаи, когда отладка спасает
У любого пользователя Android случаются ситуации, когда отладка необходима позарез. Хорошо, что вы воспользовались инструкцией из прошлого раздела и активировали её. Теперь вы сможете:
- Получить на своём смартфоне/планшете рут-доступ с помощью специальных приложений для компьютера. Для этого включенная отладка необходима.
- Извлечь данные из устройства, у которого не работает дисплей. Этой проблеме мы посвящали отдельную статью.
- Восстановить устройство, если оно не загружается. Для этого надо воспользоваться специальными утилитами, которые для разных устройств и чипсетов могут отличаться. Ищите более подробную информацию конкретно о своей модели.
- Работать с командной строкой на компьютере, чтобы быстро скопировать файлы, установить приложение или сразу целый набор приложений, изменить права доступа к тому или иному файлу. Для этого на компьютере должна быть установлена программа ADB (Android Debug Bridge), позволяющая отдавать команды Android-среде на подключенном устройстве. Для неё существует как графический интерфейс, так и набор консольных команд, которые отдаются через командную строку.[/su_list]
В общем, если вы хотите извлечь максимум из функциональности своего Android-планшета или смартфона, режим отладки вам будет исключительно полезен.
DevTools в современных браузерах позволяет переключиться в адаптивный режим и весьма неплохо справляется со своей задачей. Но иногда случается так, что где-то что-то на мобильном выглядит не так, как на десктопе. В таких случаях понять в чём дело, а не тыкать пальцем в небо, поможет инспектирование элементов прямо на мобильном.
Рассмотрим варианты для Chrome и Firefox. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.
На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.
Инструкция для Google Chrome
Для отладки в Chrome, на компьютере должен быть установлен браузер версии не ниже 32, а на версия Android должна быть минимум 4.
Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»
Ставим галочку «Discover USB devices».
Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».
Видим слева своё устройство и его статус. Кликаем по нему.
Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.
Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.
Инструкция для Mozilla Firefox
На Firefox подобное сработает только на версии новее 36.
Запускаем Firefox на мобильном. Переходим в настройки, затем в «Дополнительно» и включаем удалённую отладку.
Переходим в меню Firefox на десктопе. Выбираем «разработка», затем «WebIDE».
Подключаем телефон, видим его справа сверху. Кликаем по нему.
Разрешаем доступ на мобильном.
Справа сверху видим, что подключение разрешено. Слева отображается список вкладок. Выбираем какую-нибудь.
Открывается инспектор. Наводим на элементы, пишем стили и видим результат на телефоне.
Бонус: отладка сайтов по WiFi
Работает пока, к сожалению, только на Firefox и только на версиях от 39 и выше. Чтобы всё сработало, компьютер и телефон должны быть подключены к одной сети. Плюс к этому, на телефоне должен быть установлен сканер QR-кодов. Firefox рекомендует этот. Другие, к слову, Firefox у меня не распознал и упорно твердил, что программа-сканер не установлена.
Веб-обозреватели обладают гораздо большим количеством функций, чем нужно для обычного сёрфинга по сети. Есть функции, упрощающие поиск информации, масса хранилищ, инструменты для управления данными и даже средства для тестирования и разработки веб-сайтов. Консоль браузера Яндекс вмещает различные инструменты для работы с невидимой стороной сайтов: JavaScript-кодом, подключаемыми данными и устройствами, cookie, cache, сертификатами безопасности и т.п. Консоль разработчика – это крайне полезное средство не только в руках программиста, порой и не специалисту приходится использовать эту панель.
Чем полезна консоль разработчика Яндекс браузера
Панель разработчика реализована для решения пяти основных задач:
- Отладка работы веб-сайта. Практически все сайты имеют ошибки в коде, которые визуально определить очень сложно, а ещё сложнее их найти. В данном средстве для разработки показываются все ошибки кода и строки, в которых они появились. Хоть браузер не всегда указывает правильную строку с ошибкой, но хотя бы приблизительно подсказывает область поиска неисправности;
- Улучшение понимания работы сайта. Чтобы сделать качественный сайт, устойчивый ко всем видам взломов, нужно получить исчерпывающее понимание принципа работы веб-ресурса. Данный раздел как раз и вмещает всё необходимое для углублённого понимания строения веб-страниц;
- Тестирование сайта на наличие уязвимостей. В JavaScript-консоль можем вводить различные команды, которые обрабатываются в режиме реального времени. Этим трюком часто пользуются хакеры. На этапе тестирования как раз и следует проверить устойчивость к подобным угрозам;
- Просмотр и управление подключаемыми, генерируемыми данными. Среди инструментов разработчика можем найти все cookie-файлы, данные сессии и локального хранилища. Функция полезна в основном для тестирования, но порой удаление этих данных помогает и обычному пользователю обойти блокировку, выйти из аккаунта и т.п.;
- Аудит веб-сайта – это конечная стадия тестирования перед запуском веб-ресурса. Главная задача заключается в тестировании скорости работы сайта. Ещё одна важная роль – определение, как сайт отображается на устройствах с разной диагональю экрана. Отсюда можем посмотреть внешний вид и поведение веб-ресурса на смартфонах, планшетах, мини-ноутбуках и на больших экранах.
Инструменты разработчика и консоль в браузере Яндекс – это универсальные средства, в них есть всё самое необходимое программисту и не только.
Как открыть консоль в Яндекс браузере
Существует несколько способов вызвать консоль в Яндекс браузере:
- Через «Настройки Яндекс.Браузера»;
- Из контекстного меню страницы;
- С помощью горячих клавиш.
Через меню браузера
Все нужные средства размещены в одном разделе «Дополнительные инструменты». Отсюда можем перейти сразу в консоль, инструменты разработчика или просто открыть HTML-код страницы.
Как открыть консоль разработчика в Яндекс браузере:
Таким же способом можем открыть и HTML-код после клика на «Просмотреть код страницы», а также перейти в «Инструменты разработчика», кликнув по соответствующему пункту.
Из контекстного меню
Это один из самых простых способов открыть нужный раздел, для его реализации от нас нужно сделать лишь 3 клика:
Посредством горячих клавиш
Чтобы запустить консоль в Яндекс браузере, можем воспользоваться горячими клавишами. Они позволяют открыть не только саму консоль, но и инструменты разработчика.
Как включить консоль с помощью комбинаций клавиш:
Ещё один способ перейти в нужную панель – нажать клавишу F12.
Описание элементов панели разработчика
Пришло время подробнее разобрать все вкладки в консоли разработчика и их функции. На подробное описание уйдёт очень много времени, поэтому мы расскажем вкратце о роли каждой из них.
Вкладки панели разработчика:
- «Elements» отображает структурированный HTML-код. В нём поддерживается точная структура кода и правила вложений. Помимо HTML-кода, здесь отображается стили CSS для каждого блока или элемента. Позволяет понять структуру, посмотреть классы элементов и заданные им стили;
- «Console» отображает ошибки в коде страницы и позволяет запускать собственноручно написанный JavaScript-код, который моментально обработается в браузере;
- «Sources» – это вкладка, на которой собраны все подключаемые к ресурсу файлы с JavaScript и CSS-кодом. Позволяет посмотреть, как локально подключаемый код, так и файлы, размещённые на других ресурсах (это может быть JQuery, метрика Google, Yandex и другие файлы тем, скрипты);
- «Network» является очень важной вкладкой, так как информацию с неё можем использовать для увеличения быстродействия сайта. Здесь отображается время, необходимое для загрузки медиаконтента и внешних JS-файлов. Если на сайте используются картинки в высоком разрешении или они загружаются с внешнего ресурса, сайт начнёт дольше прогружаться. На данной вкладке показывается, какой именно контент приводит к замедлению веб-ресурса;
- «Performance» – это страница для подробной проверки производительности ресурса. После процедуры тестирования веб-сайта появляется статистика по каждому элементу страницы с полной информацией по скорости загрузки;
- «Memory» является аналогом предыдущей вкладки, но в ней отображается информация по весу страницы. Данные можем развернуть и подробно изучить вес всех элементов страницы. Учитывается не только вес картинок или текста, но и всех объектов, HTML- и CSS-элементов и т.п.;
- «Application» предоставляет доступ ко всем хранилищам: cookie, cache, локальному хранилищу, сессиям, шрифтам, скриптам и прочему. Ещё здесь есть полезный инструмент «Clear Storage», он предназначен для очистки всех хранилищ;
- «Security» предлагает информацию по сертификатам безопасности и надёжности подключения;
- «Audits» – это инструмент для быстрого аудита сайта. По окончанию работы показывается результат в 5 категориях: «Производительность», «Прогрессивность веб-приложения», «Удобство использования», «Лучшая практика» (подсказки по улучшению страницы) и «SEO».
Еще пара моментов:
- До названий разделов есть ещё 2 кнопки: с изображением блока со стрелкой, а также картинка мобильного телефона, планшета. Они находятся в самом начале списка вкладок. Первая кнопка помогает моментально переходить к коду конкретного элемента, выбранного на странице (все блоки на сайте начинают подсвечиваться при наведении на них курсора). Кнопка с мобильным телефоном отвечает за отображение страницы на устройствах с разной диагональю;
- На панели могут размещаться и другие вкладки, генерируемые приложениями на компьютере или расширениями самого браузера.
Теперь мы знаем зачем нужна и как открыть консоль в Яндекс браузере, а также вкратце познакомились с функциями каждого элемента из инструментов разработчика. В полной мере используя данное средство для разработки, появляется возможность качественнее и быстрее разрабатывать веб-сайт. Обычным пользователям консоль полезна для предоставления скринов о неисправностях сайта и очистки временных данных.
Читайте также: