Как эмулировать мобильные браузеры в Chrome, Firefox, Opera и Microsoft Edge

Как эмулировать мобильное устройство в настольном браузере (Chrome, Firefox, Opera, Edge и Internet Explorer) — Производительность — 2021

Существуют веб-сайты, которые предлагают больше опций и функций при посещении на мобильных устройствах. Когда это происходит, и вы используете настольный браузер, вы расстраиваетесь из-за ограниченного пользовательского опыта, который вы получаете. В других случаях вы можете протестировать и посмотреть, как веб-сайт выглядит на конкретном мобильном устройстве, таком как iPhone, iPad или смартфон Pixel 2. Вот как можно просмотреть (и протестировать) мобильный сайт на настольном ПК:

ПРИМЕЧАНИЕ. Данное руководство охватывает Google Chrome, Mozilla Firefox, Opera, Microsoft Edge и Internet Explorer в Windows. Перейдите в раздел для интересующего вас браузера, чтобы найти шаги, которые вам нужно пройти.

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

В Google Chrome загрузите мобильный веб-сайт, который вы хотите просмотреть. Затем нажмите или коснитесь трех вертикальных точек в верхнем правом углу. Это кнопка для «Настройка и управление Google Chrome». В открывшемся меню выберите « Дополнительные инструменты», а затем «Инструменты разработчика». Инструменты разработчика открыты. Чтобы достичь того же результата, вы также можете нажать клавиши CTRL + Shift + I на клавиатуре.

Нажмите или коснитесь кнопки «Переключить панель инструментов устройства» (это небольшая кнопка, которая похожа на смартфон и планшет рядом друг с другом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов устройства, на которую загружается мобильная страница. По умолчанию панель инструментов устройства использует отзывчивый шаблон для загруженной страницы. Нажмите на него и выберите мобильное устройство, которое вы хотите эмулировать: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (от версии 5 до iPhone X), iPad и iPad Pro. Страница мобильного устройства перезагружается, как если бы вы использовали смартфон или планшет, который вы выбрали из списка. Он не знает, что вы используете настольный компьютер.

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

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

В Mozilla Firefox откройте мобильную страницу, к которой вы хотите получить доступ, как если бы вы использовали мобильное устройство. Затем нажмите или нажмите кнопку бургер в правом верхнем углу. Он называется «Открыть меню».

В открывшемся меню выберите « Веб-разработчик» .

Вы видите много вариантов, которые полезны для разработчиков. Тебя интересует «Адаптивный режим проектирования». Нажмите или нажмите на эту опцию. Этот конкретный режим просмотра веб-страницы теперь загружен в Firefox. Того же результата можно достичь, нажав клавиши CTRL + Shift + M на клавиатуре.

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

Когда вы закончите, нажмите кнопку X (Close Responsive Design Mode) , чтобы вернуться в стандартный режим просмотра рабочего стола.

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

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

Затем нажмите или нажмите кнопку «Переключить панель инструментов устройства» (это маленькая кнопка, которая похожа на смартфон и планшет рядом друг с другом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов устройства, на которую загружается ваша веб-страница. Нажмите на него и выберите мобильное устройство, которое вы хотите эмулировать: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (от версии 5 до iPhone X), iPad и iPad Pro. Страница мобильного устройства перезагружается в Opera, используя характеристики смартфона или планшета, которые вы выбрали из списка.

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

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

В Microsoft Edge загрузите сайт, который вы хотите просмотреть, как если бы вы использовали мобильное устройство. Затем нажмите или коснитесь кнопки «Настройки и другое» , которая находится в правом верхнем углу окна браузера. Его значок выглядит как три точки. Если вы используете Windows 10 October 2018 Update, перейдите в раздел «Дополнительные инструменты», а затем в «Инструменты разработчика». Если вы используете обновление для Windows 10 апреля 2018 или более раннюю версию , выберите « Инструменты разработчика F12» . Инструменты разработчика открываются в нижней части окна браузера. Вы можете добиться того же результата, нажав клавишу F12 на клавиатуре, независимо от того, сколько лет или новее ваша Windows 10.

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

Затем нажмите или коснитесь раскрывающегося списка Устройство . Вы можете эмулировать следующие устройства: Lumia 650, Lumia 950, Lumia 950 XL, Surface Book, Surface Pro 4, iPad, iPad Mini, Nexus 5, Nexus 5X и Nexus 6P.

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

Как активировать эмулятор мобильного браузера в Internet Explorer

В Internet Explorer, на мобильную страницу, которую вы хотите просмотреть, как если бы вы использовали мобильное устройство. Нажмите кнопку « Инструменты» в правом верхнем углу или нажмите ALT + X на клавиатуре. Затем выберите F12 Developer Tools . Инструменты разработчика показаны в нижней части Internet Explorer. Того же результата можно достичь, нажав F12 на клавиатуре.

Нажмите или коснитесь вкладки Эмуляция, а затем раскрывающийся список Браузер . Здесь вы должны выбрать Windows Phone в качестве мобильного устройства, и веб-страница будет перезагружена, как если бы вы использовали смартфон с Windows Phone . К сожалению, Internet Explorer не предлагает вам возможность эмулировать Android-смартфоны, iPhone и iPad.

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

На каких сайтах вам нужно эмулировать мобильное устройство?

Теперь вы знаете, как эмулировать все виды мобильных устройств в вашем любимом веб-браузере. Прежде чем закрыть это руководство, сообщите нам, какие веб-сайты вам нужны для использования этой функции эмуляции. Нам очень любопытно. Это (в) знаменитый Instagram или какой-то другой мобильный сайт?

Как отправить файл PDF на мобильное устройство

Вы можете отправить PDF в текстовом виде или в Gmail или другую учетную запись электронной почты, чтобы передать файл кому-либо на мобильном устройстве. Отправка файла в виде вложения электронной почты, как правило, проще всего, но .

Как включить не отслеживать (dnt) в Chrome, Firefox, Edge, Opera и Internet Explorer

Что такое «Не отслеживать» (DNT)? Как это работает в вашем веб-браузере? Как включить DNT во всех основных веб-браузерах: Google Chrome, Mozilla Firefox, Microsoft Edge, Opera и Internet Explorer.

Как жестко обновить страницы в вашем браузере, на Mac (Safari, Chrome, Firefox и Opera)

Что такое CTRL F5 на Mac? Как вам сложно перезагрузить или жестко свежие веб-страницы на Mac. Это руководство работает для Safari, Chrome, Firefox и Opera для macOS.

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

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

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

Как включить и использовать эмулятор мобильного браузера в 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. Прежде чем приступить к работе, расскажите нам, что вы думаете о доступных вариантах.

Как эмулировать мобильное устройство в настольном браузере (Chrome, Firefox, Opera, Edge и Internet Explorer)

Есть веб-сайты, которые предлагают больше возможностей и функций при посещении с мобильных устройств. Когда это происходит, и вы используете настольный браузер, вы расстраиваетесь из-за ограниченного пользовательского опыта, который вы получаете. В других случаях вы можете протестировать и посмотреть, как веб-сайт выглядит на конкретном мобильном устройстве, таком как iPhone, iPad или смартфон Pixel 2. Вот как просмотреть (и протестировать) мобильный сайт на настольном ПК:

НОТА: Это руководство охватывает Google Chrome, Mozilla Firefox, Opera, Microsoft Edge и Internet Explorer в Windows. Перейдите в раздел интересующего вас браузера, чтобы найти шаги, которые вам необходимо выполнить.

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

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

Щелкните или коснитесь «Переключить панель инструментов устройства» кнопку (это маленькая кнопка, которая выглядит как смартфон и планшет рядом друг с другом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов устройства, на которой загружается мобильная страница. По умолчанию на панели инструментов устройства используется Отзывчивый шаблон для страницы, которую вы загрузили. Нажмите на него и выберите мобильное устройство, которое вы хотите эмулировать: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (от версии 5 до iPhone X), iPad и iPad Pro. Страница для мобильных устройств перезагружается, как если бы вы использовали смартфон или планшет, который вы выбрали из списка. Он не знает, что вы используете настольный компьютер.

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

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

В Mozilla Firefox откройте мобильную страницу, к которой вы хотите получить доступ, как если бы вы использовали мобильное устройство. Затем нажмите или коснитесь кнопки бургера в правом верхнем углу. Он назван «Открыть меню».

В открывшемся меню выберите Веб-разработчик.

Вы видите множество вариантов, полезных для разработчиков. То, что вас интересует, это «Режим адаптивного дизайна». Щелкните или коснитесь этой опции. Этот конкретный режим просмотра веб-страницы теперь загружен в Firefox. Такого же результата можно добиться, нажав CTRL + Shift + M на клавиатуре.

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

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

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

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

Затем щелкните или коснитесь «Переключить панель инструментов устройства» кнопку (это маленькая кнопка, которая выглядит как смартфон и планшет рядом друг с другом) или нажмите CTRL + Shift + M на клавиатуре. Это активирует панель инструментов устройства, на которой загружается ваша веб-страница. Нажмите на него и выберите мобильное устройство, которое вы хотите эмулировать: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (от версии 5 до iPhone X), iPad и iPad Pro. Мобильная страница перезагружается внутри Opera с учетом характеристик смартфона или планшета, которые вы выбрали из списка.

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

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

В Microsoft Edge загрузите сайт, который вы хотите просматривать, как если бы вы использовали мобильное устройство. Затем щелкните или коснитесь «Настройки и многое другое» кнопка, которая находится в правом верхнем углу окна браузера. Его значок выглядит как три точки. Если вы используете Windows 10 October 2018 Update, перейдите по ссылке «Дополнительные инструменты» а затем в "Инструменты разработчика." Если вы используете Windows 10 April 2018 Update или более раннюю версию, выберите Инструменты разработчика F12. В Инструменты разработчика открываются в нижней части окна браузера. Вы можете добиться того же результата, нажав F12 на клавиатуре, независимо от того, насколько старая или новая у вас Windows 10.

Вы видите несколько вкладок в Инструменты разработчика. Если ты видишь Эмуляция, щелкните или коснитесь его. Если вы этого не сделаете, щелкните или коснитесь стрелки вниз и в открывшемся меню выберите Эмуляция.

Затем щелкните или коснитесь Устройство раскрывающийся список. Вы можете выбрать эмуляцию следующих устройств: Lumia 650, Lumia 950, Lumia 950 XL, Surface Book, Surface Pro 4, iPad, iPad Mini, Nexus 5, Nexus 5X и Nexus 6P.

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

Как активировать эмулятор мобильного браузера в Internet Explorer

В Internet Explorer на мобильную страницу, которую вы хотите просматривать, как если бы вы использовали мобильное устройство. Щелкните значок инструменты кнопку в правом верхнем углу или нажмите ALT + X на клавиатуре. Тогда выбирай Инструменты разработчика F12. В Инструменты разработчика отображаются в нижней части Internet Explorer. Такого же результата можно добиться, нажав F12 на клавиатуре.

Щелкните или коснитесь Эмуляция вкладка, а затем Браузер раскрывающийся список. Здесь вы должны выбрать телефон с операционной системой Виндоус в качестве мобильного устройства, и веб-страница перезагружается, как если бы вы использовали смартфон с телефон с операционной системой Виндоус. К сожалению, Internet Explorer не предлагает вам возможность эмулировать смартфоны Android или iPhone и iPad.

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

На каких сайтах нужно эмулировать мобильное устройство?

Теперь вы знаете, как имитировать все виды мобильных устройств в своем любимом веб-браузере. Прежде чем закрыть это руководство, дайте нам знать, на каких веб-сайтах вам нужно использовать эту функцию эмуляции. Нам очень любопытно. Это (не) известный Instagram или какой-нибудь другой мобильный сайт?

Эмуляция и тестирование других браузеров

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

Сводка

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

Эмуляторы браузера

Эмуляторы браузера отлично подходит для тестирования отзывчивости сайта. Но эмулятор браузера не эмулирует различия в API, поддержке CSS и некоторых поведениях, которые проявляются только в мобильном браузере на фактическом устройстве. Проверьте свой сайт в браузерах, работающих на реальных устройствах, чтобы быть уверены, что все ведет себя так, как ожидалось.

Представление дизайна с отзывчивым запросом на Firefox

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

Эмуляция EdgeHTML

Чтобы подражать Windows телефонам, используйте встроенную эмуляцию Microsoft Edge (EdgeHTML).

Используйте эмуляцию IE 11 для имитации того, как может выглядеть страница в более старых версиях Internet Explorer.

Эмуляторы и симуляторы устройств

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

Эмулятор Android

На данный момент нет способа установить Microsoft Edge на эмулятор Android. Тем не менее, вы можете использовать Браузер Android, Chromium content Shell и Firefox для Android, которые мы рассмотрели позже в этой статье. Chromium Content Shell запускает тот же Chromium, что и Microsoft Edge, но поставляется без специальных функций браузера.

Эмулятор Android поставляется с SDK Android, который необходимо скачать в составе Android Studio. Затем выполните инструкции по настройкам виртуального устройства и запуску эмулятора. После загрузки эмулятора выберите значок Браузер и проверьте свой сайт в старом браузере Stock для Android.

Chromium оболочки контента на Android

Чтобы установить Chromium для Android, держите эмулятор запущенным и запустите следующую команду:

Теперь вы можете протестировать свой сайт с помощью Chromium content Shell.

Firefox на Android

Как и Chromium content Shell, вы можете получить AK для установки Firefox на эмулятор.

Чтобы установить файл на открытый эмулятор или подключенное android-устройство, запустите следующую команду:

симулятор iOS

Симулятор iOS для Mac OS X поставляется с Xcode, который устанавливается из App Store.

После этого узнайте, как работать с симулятором с помощью документации разработчика Apple.

Чтобы не открывать Xcode каждый раз, когда нужно использовать iOS Simulator, откройте его, наведите курсор на значок симулятора iOS в доке, откройте контекстное меню (правой кнопкой мыши) и выберите Keep in Dock. Теперь просто выберите значок всякий раз, когда это нужно.

Microsoft Edge (EdgeHTML)

Современный IE VM

Microsoft Edge (EdgeHTML) виртуальные машины (VMs) позволяют получать доступ к различным версиям EdgeHTML и Internet Explorer на компьютере через VirtualBox (или VMWare). Выберите виртуальную машину на странице загрузки.

Облачные эмуляторы и симуляторы

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

Ниже приводится пример облачных эмуляторов и связанных с ними продуктов. Эти описания находятся на информационных сайтах продуктов и служат примерами функций или возможностей для рассмотрения.

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

Device Anywhere использует не эмуляторы, а реальные устройства, которые можно управлять удаленно. Это полезно, если требуется воспроизвести проблему на определенном устройстве, и проблема может не отображаться в некоторых отчетах.

LambdaTest помогает выполнять ручное меж браузерное тестирование в сочетании различных браузеров и операционных систем. Вы можете записывать видео сложных ошибок и делиться ими с помощью интеграции, например Microsoft Teams, Slack и других. Вы можете ускорить тестирование, параллельно запуская тесты.

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

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

(Этот список закрыт для дополнений.)

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь и является автором Meggin Kearney (технический писатель) и Пол Bakaus (Open Web Developer Advocate at Google | Средства, производительность, анимация, UX).

alt=»Лицензия Creative Commons.» /> Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.