Как использовать эмулятор мобильного браузера в Chrome, Firefox, Edge и Opera

Вам нужен доступ к эмулятору браузера смартфона на вашем компьютере, чтобы протестировать мобильную версию интересующего вас сайта? Может быть, вы веб-разработчик или хотите им стать, и вам нужно смоделировать мобильный браузер для проекта, над которым вы работаете. Независимо от причин, вот как получить доступ к эмулятору мобильного браузера в Google Chrome, Mozilla Firefox, Microsoft Edge и Opera:

Быстрые шагиКак включить и использовать эмулятор мобильного браузера в Google Chrome
  1. В Google Chrome перейдите на сайт, который вы хотите просмотреть в эмуляторе мобильного браузера.
  2. Нажмите клавиши CTRL + SHIFT + I на клавиатуре, чтобы открыть Инструменты разработчика.
  3. Нажмите CTRL + Shift + M на клавиатуре, чтобы открыть панель инструментов устройства,
  4. Нажмите на панель инструментов устройства и выберите мобильное устройство, которое вы хотите эмулировать.
Как включить и использовать эмулятор мобильного браузера в Google Chrome.

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


В Google Chrome перейдите на сайт, который вы хотите просмотреть в эмуляторе мобильного браузера. Затем нажмите клавиши CTRL + SHIFT + I на клавиатуре или щелкните мышью по трем вертикальным точкам в правом верхнем углу, чтобы открыть меню "Настройка и управление Google Chrome". Выберите "Другие инструменты", затем "Инструменты разработчика".

Доступ к инструментам разработчика в Google Chrome

Нажмите или коснитесь кнопки "Переключить панель инструментов устройства" (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов устройства, на которой загружается мобильная страница. По умолчанию панель устройств использует шаблон Responsive для сайта, который вы загрузили. Нажмите на него и выберите мобильное устройство, которое вы хотите эмулировать. В вашем распоряжении множество iPhone, iPad, Surface Duo, два устройства Samsung Galaxy и симулятор мобильного браузера Moto G4 для ПК.

Как включить эмулятор мобильного браузера в Google Chrome

Тип: К сожалению, вы можете использовать комбинацию клавиш CTRL + Shift + M только после включения инструментов разработчика.

Наведитесь на сайт, который вы хотите протестировать, переключайтесь между различными смартфонами и планшетами и посмотрите, как он выглядит. Когда закончите, нажмите кнопку X (Закрыть) в правом верхнем углу инструментов разработчика Google Chrome, чтобы вернуться в стандартный режим просмотра на рабочем столе.

Закрытие эмулятора мобильного браузера Google Chrome

TIP: Если вы являетесь активным пользователем Google Chrome, вам также может понадобиться узнать, как использовать опции управления мультимедиа в Google Chrome.


Как включить и использовать эмулятор мобильного браузера в Mozilla Firefox


В Mozilla Firefox откройте сайт, для которого вы хотите использовать эмулятор мобильного браузера. Затем нажмите CTRL + Shift + M на клавиатуре или нажмите кнопку "бургер" в правом верхнем углу, чтобы открыть меню Firefox, и выберите Web Developer.

Доступ к инструментам Web Developer в Firefox

Вы увидите меню с инструментами, полезными для веб-разработчиков. В списке выберите "Responsive Design Mode", и в Firefox загрузится именно этот режим просмотра веб-страницы.

Выбираем режим Responsive Design Mode в Firefox

Firefox включает режим Responsive Design Mode. В верхней части окна отображаются параметры, используемые этим режимом эмуляции. Если устройство не выбрано, нажмите или коснитесь Responsive, чтобы открыть выпадающий список устройств, доступных для эмуляции, а затем выберите то, которое вы хотите имитировать.

Вы можете имитировать мобильный браузер для многих iPhone, iPad, Kindle Fire (Firefox - единственный браузер, предлагающий такую возможность эмуляции) и устройств Samsung Galaxy S9.

Используйте эмулятор мобильного браузера в Firefox

После завершения тестирования в эмуляторе браузера смартфона нажмите кнопку X (Close Responsive Design Mode) в правом верхнем углу Mozilla Firefox.

Закройте эмулятор мобильного браузера в Firefox

Вы вернетесь в стандартный режим просмотра на рабочем столе.


Как включить и использовать эмулятор мобильного браузера в Microsoft Edge


Microsoft Edge использует тот же механизм рендеринга, что и Google Chrome, и предлагает те же эмуляторы браузеров для смартфонов. Чтобы получить к ним доступ, зайдите на сайт, который вы хотите протестировать, и либо нажмите клавиши CTRL + SHIFT + I на клавиатуре, либо щелкните по трем горизонтальным точкам ("Настройки и многое другое") в правом верхнем углу Microsoft Edge. В появившемся меню перейдите в раздел "Дополнительные инструменты", а затем в "Инструменты разработчика".

Доступ к инструментам разработчика в Microsoft Edge

Нажмите кнопку "Toggle device emulation" (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов эмулятора мобильного браузера. По умолчанию он использует шаблон Responsive для сайта, который вы загрузили. Нажмите на него и выберите мобильное устройство, которое вы хотите эмулировать. Вы можете выбрать те же смартфоны и планшеты, что и в Google Chrome.

Доступ к эмулятору мобильного браузера в Microsoft Edge

Найдите сайт, который вы хотите протестировать, переключитесь между различными мобильными устройствами и посмотрите, как он выглядит. Когда закончите, нажмите кнопку X (Закрыть) в правом верхнем углу Microsoft Edge.

Закройте эмулятор мобильного браузера в Microsoft Edge

Вы вернулись в стандартный режим просмотра на рабочем столе.


Как включить и использовать эмулятор мобильного браузера в Opera


В Opera откройте веб-страницу, которую вы хотите просматривать, как если бы вы использовали мобильное устройство. Затем нажмите на значок Opera в левом верхнем углу ("Настройка и управление Opera"). В открывшемся меню выберите "Разработчик", а затем "Инструменты разработчика". Если вы предпочитаете клавиатуру, нажмите клавиши CTRL+Shift+I для достижения того же результата.

Доступ к инструментам разработчика в Opera

Инструменты разработчика отображаются в правой части окна браузера. Нажмите кнопку "Переключить панель инструментов устройства" (она выглядит как смартфон рядом с планшетом) или нажмите CTRL + Shift + M на клавиатуре. Панель инструментов устройства показана слева. По умолчанию она использует шаблон Responsive для сайта, который вы загрузили. Нажмите на него и выберите из списка вариантов мобильное устройство, которое вы хотите эмулировать. Opera предлагает те же эмуляторы мобильных браузеров, что и Google Chrome и Microsoft Edge, поскольку основана на том же движке рендеринга (Chromium).

Запустите эмулятор мобильного браузера в Opera

По окончании тестирования нажмите кнопку X (Закрыть) в правом верхнем углу, чтобы вернуться в стандартный режим просмотра на рабочем столе.

Закройте эмулятор мобильного браузера в Opera

.

Довольны ли вы имеющимися возможностями эмуляции мобильного браузера?


Теперь вы знаете, как эмулировать все виды мобильных устройств в вашем любимом веб-браузере. Однако вы можете заметить, что большинство браузеров предлагают те же варианты эмуляции, что и iPhone и iPad. Если вы хотите эмулировать современный смартфон или планшет Android, ваши шансы весьма невелики, даже в Google Chrome - браузере, разработанном компанией, стоящей за Android. Если вы хотите добиться наилучших результатов, возможно, вам придется использовать два браузера для этой задачи: Chrome и Firefox, или Firefox и Edge или Opera. Прежде чем приступить к работе, расскажите нам, что вы думаете о доступных вариантах.

Ваше имя: *
Ваш e-mail: *
Код: Кликните на изображение чтобы обновить код, если он неразборчив
Введите код: