Categories

Новые шаблоны

Как использовать функцию эмуляции устрйств браузера Google Chrome

Daniel Morales Октябрь 28, 2015
Rating: 3.3. From 6 votes.
Please wait...

Из этого туториала Вы узнаете, как использовать функцию эмуляции устройств браузера Google Chrome (Google Chrome Device Emulation). Эта функция поможет вам протестировать адаптивный дизайн вашего сайта путём имитации разных размеров и разрешений экрана.

Как использовать функцию эмуляции устройств браузера Google Chrome

Для того чтобы активировать Режим устройства

  1. Откройте ваш сайт, используя браузер Google Chrome.

  2. Нажмите на кнопку F12, для того чтобы получить доступ к Инструментам разработчика Chrome (Chrome DevTools).

  3. Включите режим устройства, нажав на значок Переключение в режим устройства (Toggle device mode). Когда режим устройства включен, значок становится синим (blue) и режим отображения переключается на эмуляцию устройства:

    How to use Google Chrome Device Emulation feature_1
  4. Вы можете также включить/отключить (on/off) этот режим, используя сочетание клавиш:

    Ctrl+Shift+M (или Cmd+Shift+M на Mac).

Использование Эмуляции экрана:

Эмуляция экрана поможет Вам проверить адаптивность (test the responsiveness) вашего сайта. Вы найдёте множество заранее установленных режимов эмуляции.

  1. Выберите модель (Select a model) из выпадающего списка заранее установленных режимов, для того чтобы эмулировать определённое устройство:

    How to use Google Chrome Device Emulation feature_2

    Каждый заранее установленный режим автоматически настраивает параметры эмуляции (такие как разрешение экрана устройства (device resolution) и Пиксельное соотношение (pixel ratio), а также включает эмуляцию сэнсорного экрана (touch emulation) и т. д.).

  2. Переключайтесь между книжным (portrait) и альбомным (landscape) видом, нажав значок «Изменить размеры». Выберите кнопку «Соответствовать размеру экрана», для того чтобы убедиться, что экран устройства, которое эмулируется, остается полностью видимым внутри окна браузера:

    How to use Google Chrome Device Emulation feature_3
  3. Для того чтобы эмулировать пользовательский размер экрана (custom screen size), задайте разрешение экрана устройства в пикселях в полях ширина (width) и высота (height):

    How to use Google Chrome Device Emulation feature_4

Для того чтобы работать с медиа-запросами:

Благодаря Режиму устройства легко исследовать действие медиа-запросов.

  1. Для того чтобы включить инструмент работы с медиа-запросами, нажмите на значок ‘Медиа-запросы’ (Media queries) в верхнем левом углу окна. Инструменты разработчика (DevTools) найдут медиа-запросы в вашем файле стилей и отобразят их как цветные полосы в верхней части окна:

    How to use Google Chrome Device Emulation feature_5
  2. Медиа-запросам соответствуют такие цвета:

    How to use Google Chrome Device Emulation feature_6

    Синий: Запросы для максимальной ширины экрана;

    Зелёный: Запросы для определённого диапазона значений ширины экрана;

    Оранжевый: Запросы для минимальной ширины экрана.

  3. Для того чтобы предварительно просмотреть стили для определённого разрешения экрана (preview screen styles), нажмите на панель медиа-запросов (media query bar), для того чтобы настроить разрешение окна эмулятора и предварительно просмотреть стили (preview styles) для нужного диапазона размеров экрана:

    How to use Google Chrome Device Emulation feature_7
  4. Нажмите правой кнопкой мышки на панель, для того чтобы найти, в каком месте дается определение медиа-запроса (view where the media query is defined) в CSS и перейти к этому определению (jump to the definition) в исходном коде:

    How to use Google Chrome Device Emulation feature_8
  5. Для того чтобы отключить (turn off) эмуляцию мобильных устройств, не покидая Режим устройства, нажмите на значок ‘Сбросить все переопределения’ (Reset all overrides) и обновите страницу:

    How to use Google Chrome Device Emulation feature_9
  6. Вы можете даже изменить Операционную систему (Operation System) мобильного устройства.

    Откройте панель Инструментов разработчика, нажав на значок ‘Больше переопределений’ (More overrides) в правом верхнем углу окна браузера. Затем, выберите ‘Сеть’ (Network) в окне, которое откроется:

    How to use Google Chrome Device Emulation feature_10

Мы надеемся что этот туториал был Вам полезен. Вы можете также ознакомиться с детальным видео-туториалом ниже.

Как использовать функцию эмуляции устройств браузера Google Chrome
Эта запись была размещена в Инструмены разработчика и помечена как Chrome, device, emulation, feature, google. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов