Как смоделировать мобильные устройства и отлаживать их в браузере Firefox?

Ответ 1

Вы можете использовать инструменты собственного браузера (Firefox, IE, Chrome...) для отладки вашего JavaScript.

Что касается изменения размера, Firefox/Chrome имеет собственные ресурсы, доступные через Ctrl + Shift + I ИЛИ F12. Перейдите на вкладку "Редактор стилей" и нажмите значок "адаптивный/отзывчивый дизайн".

Старые версии Firefox

Новый Firefox/Firebug

Хром

* Еще один способ - установить аддон, например "Веб-разработчик"

Ответ 2

Используйте инструмент адаптивного проектирования с помощью Ctrl + Shift + M.

Ответ 3

Большинство веб-приложений обнаруживают мобильные устройства на основе заголовков HTTP.

Если ваш веб-сайт также использует заголовки HTTP для идентификации мобильного устройства, вы можете сделать следующее:

• Добавить Modify Headers подключиться к вашему браузеру Firefox ( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ )
• Использование плагинов для редактирования плагинов:
  • выберите вкладку Заголовки- > выберите действие "ДОБАВИТЬ"
  • для имитации, например. iPhone добавляет заголовок с именем User-Agent и значением: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
  • нажмите кнопку "Добавить"
• После этого вы сможете увидеть мобильный версию вашего веб-приложения в Firefox и использовать плагин Firebug.

Надеюсь, что это поможет!

Ответ 4

Вы можете использовать надстройку Firefox User Agent Overrider. С помощью этого надстройки вы можете использовать любой пользовательский агент, который вы хотите, например:

Firefox 28/Android: Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/24.0 Firefox/28.0

Если ваш сайт обнаруживает мобильные устройства через пользовательский агент, вы можете протестировать свой макет таким образом.

Обновить ноябрь '17:

В связи с выпуском Firefox 57 и внедрением веб-расширения это дополнение, к сожалению, больше не доступно. В качестве альтернативы вы можете изменить предпочтение Firefox general.useragent.override в своей конфигурации:

• В адресной строке введите about:config
• Искать general.useragent.override
• Если предпочтение не существует, щелкните правой кнопкой мыши на странице about: config, нажмите "Создать", затем выберите "Строка"
• Назовите новое предпочтение general.useragent.override
• Задайте значение для требуемого агента пользователя

Ответ 5

Я бы использовал "Отзывчивый дизайн", доступный в разделе Инструменты → Веб-разработчик → Отзывчивый дизайн. Это позволит вам протестировать ваш CSS на разные размеры экрана.

Ответ 6

Вы можете использовать уже упомянутый встроенный Режим адаптивного дизайна (через инструменты разработчика) для установки настраиваемых размеров экрана вместе с Random Agent Spoofer Плагин для изменения заголовков для имитации использования мобильных устройств, планшета и т.д. Многие веб-сайты определяют свой контент в соответствии с указанными заголовками.

В качестве инструментов разработчика вы можете использовать встроенные средства разработки (Ctrl + Shift + I или Cmd + Shift + I для Mac), которые стали очень похожими на инструменты Chrome dev к настоящему времени.

Ответ 7

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