Когда в инструментах разработчика браузеров появилась эмуляция устройств и инструменты репонсивного дизайна, все изменилось.
Как разработчику, вам больше не нужно было изменять размер окна браузера, чтобы увидеть, как изменился ваш дизайн. У вас также появился способ протестировать, как ваш продукт может работать на мобильном устройстве.
Тестирование на телефонах — не самое приятное занятие. Приходится либо подключаться к телефону и получать задержки производительности, либо публиковать свой продукт на доступном сервере, либо создавать туннель к локальному серверу на компьютере, к которому может получить доступ телефон.
Именно поэтому в инструментах разработчика есть эмуляция устройств. Вы можете моделировать различные устройства, поворачивать их, и вы даже получаете эмуляцию прикосновений, что очень здорово, когда вы обнаруживаете, что эффект наведения, который вы так любите, практически недоступен большинству ваших пользователей.
Теперь, спустя несколько лет и с учетом прогресса в области устройств, имеющийся у нас инструментарий начинает не соответствовать нашим потребностям. Похоже, нам нужно переосмыслить имеющиеся инструменты, чтобы охватить более широкий мир устройств и более широкую аудиторию.
Я работаю менеджером по продуктам в инструментах разработчика браузера Microsoft Edge и получаю примерно 400 отзывов в день от людей, использующих этот браузер.
Не каждый пользователь эмуляции является разработчиком
Как разработчик, я хорошо знаком с инструментами разработчика. Мне нравится, что я могу эмулировать различные устройства и состояния и использовать инструменты для устранения возникающих проблем. Однако меня расстраивает то, что части эмуляции разбросаны по всем инструментам. Одни находятся в эмуляции устройств, другие — в инструменте рендеринга, третьи — в редакторе Elements/Styles.
Как PM я получаю десятки сообщений в день о том, что люди сходят с ума от сложности этих вещей и почему кто-то «взламывает мой компьютер» или «показывает множество ошибок, которые я не мог вызвать и не знаю, что с этим делать».
Это заставляет меня задуматься о том, что мы можем сделать, чтобы отделить эмуляционную часть инструментов разработчика от самих инструментов. Далее я расскажу о некоторых вещах, с которыми я столкнулся, и укажу на проблемы, с которыми сталкивается текущая реализация инструментов, когда дело доходит до удовлетворения потребностей различных пользователей.
Потребности в эмуляции для неразработчиков
Я получаю запросы от людей, которым нравится использовать функции эмуляции для тестирования продуктов, над которыми они сами не работают. Это тестировщики, менеджеры проектов, дизайнеры и другие люди, которые хотят убедиться в работоспособности своих продуктов, но не хотят сами работать над кодом или исправлять его.
Эти люди сталкиваются с проблемой, что инструменты разработчика занимают огромную часть экрана, не предоставляя им нужной функциональности. Это становится все более проблематичным, когда вы моделируете устройства с высоким разрешением и сами работаете на ноутбуке. Поскольку инструменты разработчика занимают довольно много места в браузере, имитируемые устройства приходится увеличивать до такого уровня, что они становятся не такими удобными для использования, как хотелось бы.
Если у вас есть второй монитор, вы можете развернуть инструменты разработчика на нем, но удивительно узнать, как много людей так и не поняли, что это вообще возможно.
Такие пользователи хотели бы иметь:
- Эмуляция устройства в браузере без инструментов разработчика, занимающих много места.
- простой способ эмуляции различных состояний устройства (темный/светлый режим, медленное соединение, низкая производительность устройства)
- Простой способ увидеть устройство вокруг контента и сделать скриншоты этого
- Простой способ аннотировать найденные проблемы и, возможно, сообщить об ошибках команде разработчиков.
Это все инструменты выборочной проверки, и им не нужна идеальная эмуляция. Но было бы здорово использовать их без каких-либо дополнительных усилий.
Пользователи эмуляции, которые хотят играть в интернете
Еще одна интересная группа, которую я обнаружил в отзывах, — это пользователи, которые эмулируют мобильные устройства, чтобы получить лучший опыт работы в Интернете или доступ к функциональности, которую они не могут получить в браузере. Основным примером использования являются такие сервисы, как Instagram, которые позволяют загружать фотографии только с мобильного устройства, но не с компьютера. Поскольку многие люди пользуются дозированным соединением на своих мобильных устройствах, они используют эмуляцию для загрузки изображений с компьютера. Кроме того, мобильные версии веб-сайтов, как правило, более тонкие, удобные в использовании и не полны всплывающих окон и требований подписаться на услуги и тому подобное. Многие видеосайты также используют нативный HTML5-плеер в мобильном интерфейсе вместо плеера с большим количеством взаимодействий и всплывающих окон. Это позволяет легко сохранять видео.
Такие пользователи обычно не нуждаются в Developer Tools, поэтому им также будет полезен более простой способ войти в режим эмуляции.
Возможные изменения в режиме эмуляции
Основное отличие, которое я предлагаю, заключается в том, что опыт эмуляции должен быть независим от Developer Tools.
Расширение Microsoft Edge Extension for Visual Studio Code в настоящее время имеет экран с собственной панелью инструментов, которая предлагает такую функциональность. Помимо облегчения доступа к эмуляции, она также позволяет увидеть продукт в различных темах и эмулировать проблемы доступности.
В Firefox также есть панель эмуляции, которая доступна независимо от того, открыты ли инструменты Developer.
Теперь возникает вопрос, как пользователь может включить эту эмуляцию, не открывая Developer Tools? В Firefox есть комбинации клавиш, но их трудно заставить людей адаптироваться.
Проблемы эмуляции
Одна большая проблема, которую нам также необходимо решить, — это управление ожиданиями. Любая эмуляция, которую мы имеем сейчас, показывает только веб-просмотры с размерами различных устройств и имитацию сенсорного режима. Вы также можете имитировать нестабильные соединения и вращать устройства. Однако вы не видите, как устройство будет показывать продукт, поскольку любая эмуляция по-прежнему использует для отображения браузер, в который он встроен.
Это особенно проблематично с устройствами iOS, которые используют другой механизм рендеринга, и эмулированные устройства, скорее всего, создадут у вас ложное впечатление, что все работает. Чем тщательнее мы эмулируем опыт (имитируя зазубрины, проблемы с прокладками, ошибки переполнения и т.д.), тем больше вероятность того, что мы переборщим и недодадим.
Мы играли с использованием чего-то вроде Playwright для показа контента на эмулируемых устройствах с помощью других движков рендеринга, но на данный момент накладные расходы довольно высоки.
Требуется ваша помощь
Я опубликовал на GitHub объяснение возможных сценариев, скоро мы получим больше идей по дизайну, и у нас есть выпуск на GitHub, отслеживающий прогресс. Я был бы рад услышать, что, по вашему мнению, было бы лучше, чем то, что мы имеем сейчас.