Chrome DevTools для мобильных устройств: скринкаст и эмуляция

1. Скринкаст экрана вашего устройства на рабочий стол
2. Простая удаленная отладка
3. Порт-форвард для локальных проектов
4. Мобильная эмуляция
5. Эмулируйте размер экрана, devicePixelRatio и <meta viewport> с полной имитацией события касания.
6. Соотношение пикселей устройства
7. Правильная эмуляция <meta viewport> (и @viewport)
8. Симуляция сенсорного события
9. Предустановки устройства

Разработка для мобильных устройств должна быть такой же простой, как разработка для настольных компьютеров. Мы упорно работали в Chrome DevTools, чтобы сделать вещи проще для вас, и это время, чтобы раскрыть некоторые новые функции, которые должны значительно улучшить ваше мобильное развитие веб. Сначала удаленная отладка, а затем мы представим правильную мобильную эмуляцию .

Скринкаст экрана вашего устройства на рабочий стол

До сих пор при удаленной отладке вам приходилось переводить взгляд с устройства на устройство и на его устройства. Теперь Screencast отображает экран ваших устройств рядом с вашими devtools . Видеть это хорошо, но взаимодействовать с этим еще лучше:

• Клики на экранной трансляции преобразуются в касания, и на устройстве запускаются соответствующие события касания.
• Проверьте элемент на вашем устройстве с указателем на рабочем столе
• Напечатайте на клавиатуре на рабочем столе - все нажатия клавиш отправляются на устройство . Огромная экономия времени при наборе текста большими пальцами.
• Прокрутите страницу, перемещая ее указателем или просто перемещая по трекпаду ноутбука.

полная документация по скринкастингу захватывает все это и многое другое, как отправка жеста масштабирования. Chrome на Android Beta (м32) обязательно.

Простая удаленная отладка

18 месяцев назад Chrome представил правильную удаленную отладку для браузеров WebKit, но если вы попробовали это в то время, вам пришлось бы иметь дело с загрузкой Android SDK 400 МБ, добавив двоичный файл adb в $ PATH и некоторые магические заклинания командной строки.

Теперь мы рады объявить, что вы можете забыть обо всем этом. Теперь Chrome может обнаруживать и общаться с подключенными USB-устройствами . Мы внедрили протокол adb напрямую через USB в Chrome, так что вы можете легко перейти в Меню> Инструменты> Проверить устройства и немедленно начать сеанс удаленной отладки.

Это прекрасно работает на всех платформах, включая Chrome OS, хотя учтите, что в Windows вам нужно сначала установить правильные драйверы USB поговорить с устройством. Если вы никогда не пробовали это раньше, вам также нужно включить отладку по USB на устройстве и подтвердить, что вы используете Chrome для Android Beta. Прочитайте полные документы. ;)

Дополнительный бонус: Chrome теперь будет удерживать ваш экран от перехода в спящий режим, пока вы выполняете удаленную отладку. Хорошо для отладки, но следите за своим устройством!

Порт-форвард для локальных проектов

Вы разрабатываете на localhost: 8000, но ваш телефон не может достичь этого. Итак, мы добавили переадресацию портов непосредственно в рабочий процесс отладки. Теперь над вашими полными проектами легко работать без всяких туннельных хаков. По поводу: осмотрите клик в Port Forwarding, чтобы установить, какие порты вы хотите получить доступными, и они загорятся зеленым, если все будет хорошо.

Мобильная эмуляция

У вас не всегда есть устройства, которые вам нужно проверить на совместимость, не так ли? В то время как удаленная отладка реальных устройств даст вам лучшее представление о производительности и сенсорности, вы теперь можете реально эмулировать многие характеристики устройств на настольном компьютере, экономя ваше время и делая ваш цикл итераций намного быстрее.

Эмулируйте размер экрана, devicePixelRatio и <meta viewport> с полной имитацией события касания.

Если вы видели предыдущую функцию метрик устройства, теперь доступно огромное обновление. Команда усердно работала над тем, чтобы новая мобильная эмуляция получила представление, почти реалистичное, о том, что вы увидите на реальных устройствах. Например, браузеры WebKit поддерживают сложный алгоритм автоматического изменения размера текста, и, фактически, каждое устройство имеет определенный «коэффициент выдумки» для автоматического изменения размера текста, который изменяется, чтобы помочь сделать текст разборчивым. В режиме эмуляции вы можете подтвердить, что это поведение применяется и посмотреть результаты.

Соотношение пикселей устройства

До сих пор было практически невозможно увидеть, что устройство с высоким разрешением отображает на устройстве с низким разрешением. Теперь эмуляция dPR в DevTools адаптирует ваш взгляд, чтобы вы могли увеличить масштаб сценария с глубоким разрешением. Кроме того, вы можете ожидать, что window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), набор изображений (url (pic2x.jpg) 2x,…) и т. Д. Будут отражать ваши настройки, что позволит вам чтобы посмотреть, как ваше приложение адаптируется, включая загрузку различных dpi-специфичных ресурсов.

Эмуляция устройства не распространяется на функции или ошибки браузера. Таким образом, пока эмулируется iOS, WebGL все равно будет работать, и вы не нажмете ошибка масштабирования ориентации iOS 5 , Чтобы испытать эту изменчивость, отправляйтесь к устройству.

Правильная эмуляция <meta viewport> (и @viewport)

Тестирование того, что ширина = устройство-ширина и минимальный масштаб: 1.0 делали, ранее было игрой только для устройств. Теперь вы можете быстро попробовать разные видовые окна и понаблюдайте, как они отображаются.

Симуляция сенсорного события

Настройка эмуляции сенсорного экрана обеспечит интерпретацию ваших нажатий как сенсорного запуска и т. Д. Кроме того, синтетические события, такие как масштабирование, прокрутка и панорамирование, будут работать. Чтобы укоротить масштаб, просто сдвиньте + перетащите или сдвиг + прокрутка, чтобы увеличить масштаб содержимого. Вы получите отличный обзор масштабирования контента за пределами области просмотра.

Наконец, ваши резервы подмены useragent (как на заголовке запроса, так и на уровне window.navigator), геолокации и эмуляции ориентации позволяют вам изучить полную функциональность вашего устройства.

Предустановки устройства

Предварительные настройки эмуляции позволяют выбрать телефон или планшет и получить правильный размер экрана, dPR, UA, применяемый для этого устройства, а также эмулированные события касания и область просмотра. Вы можете попробовать определенные пресеты или легко настроить эти характеристики одну за другой.

Перейдите на devtools.chrome.com для полные документы по мобильной эмуляции с DevTools

Чтобы получить полную демонстрацию всех этих функций в действии , ознакомьтесь с моим 23-минутным докладом из Chrome Dev Summit о DevTools для мобильных устройств:

Похожие

Комментарии