как подключить телефон к devtools
Представляем Chrome DevTools для мобильных устройств
Веб-гуру в штаб-квартире Google недавно сделали объявление, которое должно дать разработке мобильных веб-приложений очень ценный шанс. Выпущенное в обновлении Chrome Beta ранее в этом месяце, Chrome DevTools для мобильных устройств ставит целью сделать мобильную веб-разработку такой же простой, как и настольный аналог.
Скрытно в комплекте со встроенными инструментами разработчика, любой с обновленной версией браузера Chrome (бета-канал) может быстро перейти к Меню> Инструменты> Инструменты разработчика, чтобы включить
DevTools окно и принять новые мобильные функции для вращения.
Совместное использование экрана для упрощения отладки
Те из вас, у кого есть телефоны Android, могут воспользоваться новой технологией Chrome «Screencast», чтобы использовать ваше мобильное устройство в качестве более аутентичного испытательного стенда. Просто подключите устройство Android через USB и включите «Отладку USB» в настройках устройства. Не нужно хлопотать с помощью командной строки adb или тупых настроек. Chrome позаботится обо всем остальном, автоматически обнаружив ваш телефон и интегрировав его в опции инструментов разработчика.
Эта функция предоставляет возможность для повышения производительности, как и все остальное. При полной загрузке вы существенно сокращаете время, необходимое для переключения между настольным и мобильным дисплеями для отладки. Вы также можете быть уверены в том, что, просматривая скринкаст, вы на самом деле смотрите на производительность сайта на самом физическом оборудовании, а не на эмуляцию.
Все это, кстати, можно настроить, посетив chrome://inspect
Как примечание, кнопка «Переадресация порта…», показанная выше, дает ощущение гибкости тем, у кого их экран и компьютер для разработки могут не находиться в одной сети. В этом сценарии вы можете создать прослушивающий TCP-порт на своем мобильном устройстве и сопоставить его с данным TCP-портом на компьютере разработчика. Весь перенаправленный трафик проходит через USB, минуя конфигурацию сети мобильного устройства. Конечно, удобная функция в некоторых случаях.
Верстаем на мобильном: отладка сайтов с помощью телефона
DevTools в современных браузерах позволяет переключиться в адаптивный режим и весьма неплохо справляется со своей задачей. Но иногда случается так, что где-то что-то на мобильном выглядит не так, как на десктопе. В таких случаях понять в чём дело, а не тыкать пальцем в небо, поможет инспектирование элементов прямо на мобильном.
Рассмотрим варианты для Chrome и Firefox. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.
Скачиваем и устанавливаем ADB-драйвера для своего телефона. Драйвера можно взять либо с сайта Android, либо на форуме 4pda.ru.
Включаем на телефоне режим отладки. Для этого в настройках переходим в меню разработчика. Если его нет — переходим в раздел «О телефоне» и кликаем несколько раз по пункту «Номер сборки». У меня режим разработчика уже включён, поэтому отображается соответствующее сообщение. Затем в самом меню, наверху, активируем режим, находим пункт «Режим отладки» и активируем его тоже.
На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.
Инструкция для 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 у меня не распознал и упорно твердил, что программа-сканер не установлена.
Снова переходим в WebIDE, но на этот раз выбираем WiFi устройства.
Появится QR-код для сканирования.
На телефоне появится запрос. Нажимаем «сканировать» и сканируем код.
Обзор Chrome DevTools. Решаем основные задачи веб-разработчика
Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.
Возможности Chrome DevTools огромны. С их помощью можно изменять анимацию, проверять доступность, отлавливать ошибки, следить за производительностью сайта и выполнять многие другие задачи. Но на начальных этапах обучения веб-разработке не обязательно разбираться со всеми функциями. Достаточно знать набор базовых инструментов, который понадобится для решения повседневных задач.
Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools
Посмотреть, как выглядит страница с телефона и планшета
При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшете и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Для этого откройте Chrome Devtools, а затем кликните на иконку Toggle device toolbar в левом углу или нажмите комбинацию Ctrl+Shift+M:
Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.
Так выглядит страница в мобильной версии
На этой же панели есть еще одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.
Быстро изменить стили прямо на странице
В процессе разработки бывает удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.
Менять стили в Chrome DevTools можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.
Меняем элемент прямо на странице
После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.
Изменяем стилевые правила для псевдоэлементов
Протестировать блоки на переполнение
Во вкладке Elements можно редактировать не только стили, но и DOM-дерево: добавлять и удалять элементы или блоки, менять текст, управлять атрибутами и классами. Это очень удобно, особенно если нужно протестировать какую-то гипотезу или проверить ошибки в вёрстке.
Одна из задач, выполняемых разработчикам с помощью Chrome DevTools — тестирование вёрстки на переполнение. То есть проверка, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете проверить, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.
Популярный среди разработчиков мем и заодно пример того, как не нужно делать: вёрстка не должна ломаться при добавлении новых элементов, увеличении текста или изменении размеров страницы.
Как проверить элемент на переполнение текстом
Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:
Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.
Переполнение родительских блоков
Чтобы проверить, не выпадают ли блоки из потока и сохраняется ли сетка, найдите родителя и ему добавьте несколько дополнительных дочерних элементов. Для этого кликните на одном из таких элементов правой кнопкой мыши и нажмите на Duplicate Element.
Пример переполнения: элементы выпадают из родительского блока.
Узнать, какие файлы подключены, и посмотреть их расположение
Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:
Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.
Меняем цвет фона во вкладке Sources
Понять, почему не работают скрипты
Если вы написали код на JavaScript и что-то пошло не так, ищите ошибки с помощью вкладок Console и Sources. Во вкладке Console отображаются сообщения об ошибках с указанием файла и строки, на которых находится баг. Если нажать на этот файл, документ сразу же откроется на нужной строке.
Здесь разработчик добавил лишнюю кавычку. Ошибка на первой строке в документе diseasmap.js
Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.
Еще один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.
Как использовать точки останова
Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.
Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.
JavaScript выполняется последовательно. Когда Chrome дойдет до точек останова, он остановит выполнение скрипта, и вы сможете отследить, что происходит с кодом. Например, посмотреть значения переменных или разобраться с логикой функций. С этого момента только вы управляете кодом. Можете перейти к следующей точке, шагнуть внутрь функции или отключить точки останова. В этом вам помогут кнопки на панели справа.
Для чего они нужны, пойдем по порядку:
Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.
Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.
Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.
Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.
Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.
Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.
Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.
Проверить качество сайта
При разработке сайта важно позаботиться о том, чтобы он быстро загружался и был доступен для пользователей и поисковых систем. С помощью инструмента Lighthouse вы можете протестировать свой сайт на скорость, семантику, доступность, разметку и другие характеристики.
Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.
Как использовать Lighthouse
Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.
В конце вы получите оценки качества сайта по 100-балльной шкале: чем выше оценка, тем лучше. При этом на чистоту проверки могут влиять разные факторы, в том числе интернет-соединение и расширения Chrome. Поэтому лучше запускать тест в режиме инкогнито, закрыв остальные вкладки.
Результаты проверки.
Ниже находятся показатели, которые повлияли на оценку, скриншоты поэтапной отрисовки страницы и предложения — что можно улучшить. Например, Lighthouse может предложить оптимизировать картинки и шрифты, включить отложенную загрузку графики, уменьшить неиспользуемый CSS и JavaScript или внести другие изменения. Каждое предложение подробно описано, можно даже перейти на отдельную страницу и прочитать о нём подробнее.
Lighthouse не единственный инструмент для оценки качества сайта. Есть и другие сервисы, например, PageSpeed Insights. Но он хорошо справляется со своей задачей, и его можно можно использовать при работе с сайтами на локальном сервере.
При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».
Chrome DevTools облегчает процесс разработки. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов».
Remote debug Android devices
Published on Monday, April 13, 2015
Technically, I’m a writer
Remote debug live content on an Android device from your Windows, Mac, or Linux computer. This tutorial teaches you how to:
Figure 1. Remote Debugging lets you inspect a page running on an Android device from your development machine.
# Step 1: Discover your Android device
The workflow below works for most users. See Troubleshooting: DevTools is not detecting the Android device for more help.
Open the Developer Options screen on your Android. See Configure On-Device Developer Options.
Select Enable USB Debugging.
On your development machine, open Chrome.
Make sure that the Discover USB devices checkbox is enabled.
Figure 2. The Discover USB Devices checkbox is enabled
Connect your Android device directly to your development machine using a USB cable. The first time you do this, you usually see that DevTools has detected an offline device. If you see the model name of your Android device, then DevTools has successfully established the connection to your device. Continue to Step 2.
Figure 3. The Remote Target has successfully detected an offline device that is pending authorization
If your device is showing up as Offline, accept the Allow USB Debugging permission prompt on your Android device.
# Troubleshooting: DevTools is not detecting the Android device
Make sure that your hardware is set up correctly:
Make sure that your software is set up correctly:
If you don’t see the Allow USB Debugging prompt on your Android device try:
If you find a solution that is not mentioned in this section or in Chrome DevTools Devices does not detect device when plugged in, please add an answer to that Stack Overflow question, or open an issue in the webfundamentals repository!
# Step 2: Debug content on your Android device from your development machine
Open Chrome on your Android device.
Figure 4. A connected remote device
In the Open tab with url text box, enter a URL and then click Open. The page opens in a new tab on your Android device.
Click Inspect next to the URL that you just opened. A new DevTools instance opens. The version of Chrome running on your Android device determines the version of DevTools that opens on your development machine. So, if your Android device is running a very old version of Chrome, the DevTools instance may look very different than what you’re used to.
# More actions: pause, focus, reload, or close a tab
Below the URL you can find a menu to pause, focus, reload or close a tab.
Figure 5. The menu for pausing, reloading, focusing, or closing a tab
# Inspect elements
Go to the Elements panel of your DevTools instance, and hover over an element to highlight it in the viewport of your Android device.
You can also tap an element on your Android device screen to select it in the Elements panel. Click Select Element 
on your DevTools instance, and then tap the element on your Android device screen. Note that Select Element is disabled after the first touch, so you need to re-enable it every time you want to use this feature.
# Screencast your Android screen to your development machine
Click Toggle Screencast 
to view the content of your Android device in your DevTools instance.
You can interact with the screencast in multiple ways:
Some notes on screencasts:
Last updated: Monday, April 13, 2015 • Improve article
Как удаленно отлаживать сайты для Android с помощью Chrome DevTools
Поскольку под управлением 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.
На экране выше представлено веб-приложение, работающее на localhost: 3000. Как и на любом другом сайте, здесь можно проверять DOM, изменять стили, отлаживать код JavaScript, моделировать медленную сеть и многое другое.
Достоинства удаленной отладки Chrome
· Возможность взаимодействовать с сайтом как на компьютере, так и на устройстве Android.
· Chrome DevTools помогает основательно проверить и отладить тестируемый сайт.
· Хорошая производительность для обычных сайтов и приложений. Большинство веб-страниц и даже одностраничные приложения должны отображаться безупречно.
· Выполненные в коде изменения отображаются автоматически (если этого не произошло, перезагрузите страницу или выполните оперативную/горячую перезагрузку модуля).
· Тестирование на реальных устройствах более эффективно в сравнении с переключением на мобильное представления в браузере Chrome.
Недостатки удаленной отладки Chrome
· Производительность системы может оказаться недостаточной из-за потоковой передачи.
· Поскольку это функциональность Google Chrome, вы не сможете использовать такой же подход и с другими браузерами, например с Mozilla Firefox.
Заключение
Это краткое введение демонстрирует возможность несложной удаленной отладки отображения сайтов в браузере Chrome на устройствах Android с помощью Chrome DevTools.