Разработка для мобильных устройств должна быть такой же простой, как и разработка для настольных компьютеров. Мы усердно работали над Chrome DevTools, чтобы облегчить вам задачу, и пришло время представить некоторые новые функции, которые должны значительно улучшить вашу мобильную веб-разработку. Сначала удаленная отладка, а затем мы представим правильную мобильную эмуляцию .
Скриншот экрана вашего устройства на рабочий стол
До сих пор во время удаленной отладки вам приходилось переключать взгляд между устройством и инструментами разработчика. Теперь Screencast отображает экран вашего устройства рядом с вашими инструментами разработчика . Видеть это хорошо, но взаимодействовать с ним еще лучше:
- Щелчки по скринкасту преобразуются в касания , и на устройстве запускаются соответствующие события касания.
- Проверьте элемент на своем устройстве с помощью указателя на рабочем столе.
- Введите текст на клавиатуре настольного компьютера — все нажатия клавиш передаются на устройство . Огромная экономия времени по сравнению с набором текста большими пальцами.
- Прокрутите страницу, наведя на нее указатель или просто проведя пальцем по трекпаду ноутбука.
Полная документация по скринкастингу описывает все это и многое другое, например отправку жеста масштабирования. Требуется Chrome на Android Beta (m32).
Простая удаленная отладка
18 месяцев назад Chrome представил правильную удаленную отладку для браузеров WebKit, но если вы попробовали ее тогда, вам пришлось иметь дело с загрузкой Android SDK объемом 400 МБ, добавлением двоичного файла adb в ваш $PATH и некоторыми магическими заклинаниями командной строки.
Теперь мы рады сообщить, что вы можете обо всем этом забыть. Теперь Chrome может самостоятельно обнаруживать устройства, подключенные по USB, и взаимодействовать с ними . Мы реализовали протокол adb непосредственно через USB в Chrome, поэтому вы можете легко перейти в Menu > Tools > Inspect Devices и сразу же начать сеанс удаленной отладки.
Это отлично работает на всех платформах, включая Chrome OS, однако учтите, что в Windows вам необходимо сначала установить соответствующие драйверы USB для связи с устройством. Если вы никогда раньше не пробовали эту функцию, вам также необходимо включить на устройстве отладку по USB и подтвердить, что вы используете бета-версию Chrome для Android. Прочтите полную документацию. .
Порт-форвард для локальных проектов
Вы разрабатываете на localhost:8000, но ваш телефон не может достичь этого. Итак, мы добавили переадресацию портов непосредственно в рабочий процесс удаленной отладки. Теперь работать над полноценными проектами стало легко, без каких-либо хаков с туннелированием. В about:inspect нажмите «Переадресация портов», чтобы указать, какие порты вы хотите использовать, и они загорятся зеленым, если с ними все в порядке.
Мобильная эмуляция
У вас не всегда есть устройства, которые нужно проверить на совместимость, не так ли? Хотя удаленная отладка реальных устройств даст вам наилучшее представление о производительности и сенсорном управлении, теперь вы можете реалистично эмулировать многие характеристики устройства на рабочем столе, экономя время и значительно ускоряя цикл итерации.
Эмулируйте размер экрана, devicePixelRatio и <meta viewport> с помощью полной симуляции сенсорных событий.
Если вы видели предыдущую функцию «Метрики устройства», то то, что теперь доступно, — это огромное обновление. Команда усердно работала над тем, чтобы новая мобильная эмуляция максимально приближена к реальности того, что вы видите на реальных устройствах. Например, браузеры WebKit поддерживают сложный алгоритм автоматического изменения размера текста, и фактически каждое устройство имеет определенный «коэффициент подстройки» для автоматического изменения размера текста, который изменяется, чтобы текст оставался разборчивым. В режиме эмуляции вы можете подтвердить, что это поведение применяется, и увидеть результаты.
Соотношение пикселей устройства
До сих пор было практически невозможно увидеть, что отображает устройство с высоким разрешением на устройстве с низким разрешением. Теперь эмуляция dPR в DevTools адаптирует ваше представление, позволяя вам увеличить масштаб сценария с глубоким разрешением. Кроме того, вы можете ожидать, что window.devicePixelRatio , @media (-webkit-min-device-pixel-ratio: 2) , image-set( url(pic2x.jpg) 2x, …) и т. д. будут отражать ваши настройки, что позволит вам чтобы увидеть, как ваше приложение адаптируется, включая загрузку различных ресурсов, зависящих от разрешения.
Эмуляция устройства не распространяется только на функции браузера или ошибки. Таким образом, при эмуляции iOS WebGL по-прежнему будет работать, и вы не столкнетесь с ошибкой масштабирования ориентации iOS 5 . Чтобы ощутить эту изменчивость, подойдите к устройству.
Правильная эмуляция <meta viewport> (и @viewport )
Тестирование поведения функций width=device-width и minimum-scale:1.0 раньше было игрой только для устройств. Теперь вы можете быстро опробовать различные области просмотра и посмотреть, как они отображаются.
Симуляция сенсорного события
Настройка эмуляции сенсорного экрана гарантирует, что ваши щелчки будут интерпретироваться как touchstart и т. д. Кроме того, будут работать синтетические события, такие как масштабирование, прокрутка и панорамирование. Чтобы увеличить масштаб, просто shift + перетащите или shift + прокрутите, чтобы увеличить масштаб содержимого. Вы получите великолепное представление о масштабировании контента за пределами области просмотра.
Наконец, ваши резервные средства подмены пользовательского агента (как на уровне заголовка запроса, так и на уровне window.navigator ), геолокации и эмуляции ориентации позволяют вам изучить полную функциональность вашего устройства.
Предварительные настройки устройства
Предварительные настройки эмуляции позволяют выбрать телефон или планшет и получить правильный размер экрана, dPR и UA, применяемые для этого устройства, а также эмулировать события полного касания и область просмотра. Вы можете попробовать определенные пресеты или легко настроить эти характеристики одну за другой.
Посетите сайт devtools.chrome.com, чтобы получить полную документацию по эмуляции мобильных устройств с помощью DevTools.
Демо
Чтобы получить полную демонстрацию всех этих функций в действии , ознакомьтесь с моим 23-минутным докладом на Chrome Dev Summit о DevTools для мобильных устройств: