Chrome-расширение Mobile First для эмуляции экрана смартфонов и ноутбуков

Mobilefirst

Сайты, блоги, социальные площадки и прочие веб-ресурсы по-разному отображаются на экранах разных компьютерных и мобильных устройств. И часто имеют разный функционал, обычно ограниченный в мобильных версиях веб-ресурсов. Инструменты имитации экранов разных устройств крайне важны для веб-разработчиков, эти инструменты позволяют обеспечить работоспособность веб-ресурсов на каждом типе компьютерного или мобильного устройства, с учётом размеров и особенностей их экранов.

Также инструменты имитации экранов разных устройств могут пригодиться специалистам иных профилей, в частности, создателям контента. Современные десктопные браузеры в числе функционала для разработчиков предусматривают возможности отображения сайтов на эмулируемых мобильных устройствах, но это достаточно примитивные возможности. Более интересные возможности в этом плане может предложить Chrome-расширение Mobile First в десктопных Chromium-браузерах. Давайте посмотрим, что может Mobile First.

Эмуляция устройств Mobile First

Mobile First – это Chrome-расширение, которое можно внедрить в любой десктопный браузер на базе Chromium, если он поддерживает установку расширений из магазина Chrome. И это расширение предлагает нам отображение сайтов на экранах разных устройств – ноутбуков, планшетов, смартфонов и даже умных часов. Ассортимент эмулируемых устройств у расширения достаточно большой, правда, бесплатно нам будет доступна лишь часть этого ассортимента.

Mobile First

Установить расширение можно на его официальном сайте (https://www.webmobilefirst.com) по отсылке в магазин Chrome, либо непосредственно в магазине Chrome:

https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk

Магазин Chrome

После установки расширения заходим на сайт, который хотим отобразить на эмулируемом устройстве, и жмём кнопку Mobile First.

Кнопка Mobile First

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

Среда расширения

Ассортимент эмулируемых устройств представлен смартфонами Android и iPhone.

Смартфоны Android

Есть несколько планшетов - iPad от Apple, Galaxy Tab от Samsung, Surface Duo от Microsoft. И есть устройства как то: ноутбуки Macbook, телевизор Samsung Smart TV, сервисный киоск, парочка умных часов. Устройства, на которых значится отметка «Pro» - это те, что недоступны бесплатно, они доступны в рамках использования Mobile First по платной подписке.

Таблетки и специальные

Выбираем нужное устройство, и сайт преображается в формат этого устройства – с видом самого устройства и видом браузера с сайтом на этом устройстве. Так, например, сайт будет выглядеть в окне браузера Safari на iPad.

Браузер Safari на iPad

А так в браузере Chrome на Android-устройстве Surface Duo.

Surface Duo

Внутри эмулируемых устройств можем переходить по страницам сайта, но функции браузеров этих устройств нам недоступны, эти функции - просто муляж. Mobile First предусматривает поворот экрана, для этого жмём кнопку в виде круговой стрелки на боковой панели среды расширения. Есть возможность смены темы среды расширения – дневной и ночной режимы.

Дневной и ночной режимы

Настройки Mobile First

В настройках среды расширения можем и вовсе изменить цвет фона среды на любой. Также в настройках нам доступны возможности:

  • Скрытия устройства (т.е. скрытия рамки устройства, будет отображаться только экран);
  • Скрытия верхних и нижних областей браузеров устройств;
  • Использования компьютерного курсора вместо эмуляции касания;
  • Отключения сенсорной клавиатуры устройств.

Настройки Mobile First

Ну и, конечно же, всё, что отображается на экране эмулируемых устройств, мы можем зафиксировать – сделать скриншот или записать скринкаст (видео с эмулируемого экрана). Для этих целей на боковой панели среды расширения есть две кнопки - в виде фотоаппарата для скриншотов и в виде камеры для видео. Скриншот можно сделать с мобильной рамкой, т.е. с отображением эмулируемого устройства или без мобильной рамки, т.е. с отображением только самого экрана. И можно сделать скриншот экрана с захватом всей страницы сайта. Снятые скриншоты сохраняются в файл PNG.

Скриншот

Скринкаст включает мобильную рамку, видео сохраняются в формат GIF.

Видео

Для выхода из режима эмуляции можно либо нажать кнопку-крестик вверху среды расширения, либо кнопку самого расширения Mobile First на панели браузера. А можно просто закрыть вкладку сайта.

Вот такое есть годное расширение Mobile First. Можно использовать для отладки отображения сайтов, для создания презентаций, скринкастов или мануалов, для получения снимков сайтов с адаптивным видом. И это одно из лучших Chrome-расширений, предлагающих именно такой функционал.

Оцените Статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *