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

Немного истории

Firefox в мобильной упаковке был запущен в начале 2011 года. Это была версия для Android. В то время поддерживались не все плагины. Например, элементы с Adobe Flash не распознавались. Это сильно ограничивало возможности пользователя при посещении страниц с таким типом контента. Проблема решена в 14 версии браузера.

На какой еще ОС он работает? Firefox Mobile теперь доступен для мобильных устройств Android и iOS. Для iPhone версия появилась только в 2015 году.

К сожалению, разработка приложения для Windows Phone остановлена. Mozilla не делает версий для Symbian. Однако это неофициальный порт для Palm webOS.

На веб-сайте программы Firefox вы можете скачать настольные версии браузеров для таких операционных систем, как Windows и Mac OS X.

Тестируем в отзывчивом режиме Firefox

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

Самый простой способ проверить это — изменить размер окна браузера. Однако этот метод не всегда точен и практичен. Здесь помогает адаптивный режим Firefox.

Доступный начиная с Firefox 15, этот режим (также называемый «Предварительный просмотр адаптивного дизайна») предназначен для тестирования мобильной версии веб-сайта.

Этот режим активируется установкой Tools->Web Developer->Responsive Design View. Либо нажатием кнопки на панели разработчика, либо нажатием «горячих клавиш» Ctrl+Shift+M (или Cmd+Opt+M в Mac OS). Деактивация производится через то же меню, горячие клавиши или закрытием интерфейса.

Изменяем размер области видимости

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

Список содержит наиболее распространенные разрешения, такие как 320×480 пикселей или 768×1024 пикселей. Если вы не нашли нужный вариант, вы можете добавить свой пресет и сохранить его.

И, наконец, вы можете имитировать изменение ориентации экрана, нажав кнопку поворота.

Обработка касаний (Touch Events)

Кнопка справа позволяет сделать снимок экрана, а кнопка впереди включает «симуляцию касания”.

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

Отлаживайте ваш код с удаленным отлаживанием

Адаптивный режим полезен, но он не заменяет проверку на смартфоне (или планшете). Если ваш смартфон работает под управлением Android, в Firefox есть для него подходящий инструмент — удаленная отладка.

Удаленная отладка дает вам доступ к инструментам разработчика, но только для мобильных веб-сайтов.

Чтобы использовать его, вам нужно установить Firefox на свой телефон и подключить его к компьютеру через USB. Помимо адаптивного режима, начиная с Firefox 15, доступна удаленная отладка.

Готовим компьютер

Firefox использует ADB для установления соединения между компьютером и мобильным устройством, поэтому давайте сначала установим ADB. В зависимости от операционной системы способы установки могут отличаться, например в Ubuntu нужно установить пакет android-tools-adb.

Лучший способ установить ADB — загрузить Android SDK. Это можно сделать на сайте разработчиков Android, есть версии для трех основных операционных систем. Если вам не нужна Android Studio, вы можете просто загрузить инструменты SDK.

Теперь нам нужно включить удаленную отладку в Firefox. Делается это в настройках инструментов разработчика, просто включите «Включить удаленную отладку» (также может потребоваться перезапуск Firefox)

Готовим мобильное устройство

На устройстве Android нам также необходимо включить отладку по USB. Без этого компьютер и мобильное устройство не смогут общаться.

Для активации нужно открыть настройки мобильного устройства, нужный пункт находится в разделе Опции для разработчиков. Если у вас нет доступа к этому разделу, нажмите несколько раз на «Номер сборки» (номер сборки) в разделе О программе).

Как и на рабочем столе, вам необходимо включить удаленную отладку в Firefox для Android. Если Firefox 25+, просто выберите «Удаленная отладка» в разделе «Инструменты разработчика» в меню «Настройки”.

В Firefox 15-24 введите «about:config» в адресной строке. Найдите запись devtools.debugger.remote-enabled и установите для нее значение true, нажав кнопку «Переключить”.

Напоминаю, что статья устарела и следующие абзацы имеют только историческую ценность. Обновлена ​​информация об удаленной отладке в новой статье.

Устанавливаем соединение

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

Запуск сервера

Сначала подключите устройство через USB к компьютеру. Откройте командную строку и запустите сервер adb, если он еще не запущен.

Теперь вам нужно убедиться, что ваше устройство распознается правильно:

adb устройства

Появится список подключенных устройств, примерно так:

Список устройств, подключенных к устройству BH90TFM516

Если вы видите, что ваше устройство распознается не как «устройство», остановите сервер, набрав adb kill server, и перезапустите его от имени администратора (например, sudo adb start server).

Создание соединения

Теперь давайте создадим сокет. Тип команды зависит от версии Firefox на вашем устройстве.

Для стабильной версии Firefox для Android 35+ введите:

adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket`

org.mozilla.firefox заменяется на org.mozilla.firefox_beta, если вы используете бета-версию; на org.mozilla.fennec_aurora при использовании Aurora; и org.mozilla.fennec при использовании ночных сборок.

Если у вас Firefox для Android 34-, команда будет проще:

аБР вперед TCP: 6000 TCP: 6000

Соединяем Firefox

Вы уже подключили инструменты разработчика Firefox для настольных ПК к Firefox для Android. Остается только через меню Firefox выбрать «Подключиться к…» в подменю «Веб-разработчик”.

Откроется новая вкладка с заполненной формой, все, что вам нужно сделать, это нажать кнопку «Подключиться”:

Посмотрите на своем мобильном устройстве. На экране должно появиться сообщение с запросом разрешения на подключение. Нажмите кнопку «ОК» и вернитесь к своему компьютеру.

Вы можете выбрать вкладку для отладки, выберите и вы готовы к отладке.

Делайте, что угодно

При выборе вкладки открывается новое окно инструментов разработчика, прикрепленное к открытому окну в Firefox для Android. По сути, единственное отличие — целевое окно, в остальном инструменты идентичны.

Это означает, что с помощью этих инструментов вы можете делать что угодно, от просмотра и редактирования DOM до отладки скриптов и редактирования стилей. Вы можете начать с традиционной проверки, набрав alert(‘Hello World!’); в консоли. Ответ отобразится на экране мобильного устройства.

Что с остальными браузерами

Я разрабатываю в Firefox, поэтому выбрал мобильные инструменты. Но такие инструменты есть и в других браузерах.

Как и на компьютере, разные браузеры выдают разные результаты и разные ошибки на мобильных устройствах. Инструменты Firefox великолепны, но они совместимы только с мобильным Firefox.

Chrome

Google Chrome имеет собственный адаптивный режим, доступный в инструментах разработчика. Как и в Firefox, вы можете выбрать правильное разрешение экрана или выбрать конкретное устройство из списка (например, Google Nexus 5 или Apple iPhone 6). Вы также можете смоделировать пользовательский агент и качество соединения, проверив скорость загрузки в реальных условиях.

Chrome позволяет удаленно отлаживать Chrome для Android. Удаленная отладка очень похожа на таковую в Firefox и подключается аналогичным образом, вся методика описана на официальном сайте Chrome.

Internet Explorer

Internet Explorer также имеет собственный набор средств разработки, в том числе предназначенных для разработки мобильных устройств. Эти инструменты помогут выявить ошибки и проблемы со скоростью. Как и в Firefox, вы можете выбрать разрешение; а также в Chrome для имитации работы сети. Вы также можете имитировать географическое положение в Internet Explorer.

Читайте также: Браузер Mozilla Firefox

Какие у него возможности?

Адаптированный к функциям смартфонов браузер Mozilla Firefox предоставляет пользователям все основные функции, которые может иметь только мобильный браузер.

Высокий уровень безопасности и умный экран.

Дополнительная поддержка. Браузер поддерживает установку дополнений и расширений из магазина приложений. Там же вы найдете множество тем оформления интерфейса. Это означает, что уровень персонализации также высок.

Синхронизация с браузером Firefox, установленным на вашем ПК. Получите доступ ко всему, что у вас есть, в браузере на рабочем столе — и наоборот. Это закладки, пароли, история просмотров, файлы cookie и многое другое.

Быстрые закладки. Главный экран позволяет быстро добавлять закладки на наиболее посещаемые страницы.

Приватный просмотр с защитой от отслеживания. В этом режиме посещаемые вами веб-сайты не будут сохраняться в истории. Поисковые запросы, файлы cookie и другие данные также будут немедленно удалены из браузера. Это означает, что никто не сможет отследить вашу активность в Интернете.

Строка поиска. Он работает как поиск подсказок, он будет угадывать ваш поиск прямо по мере того, как вы вводите.

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

Домашние панели. В них можно поместить все сайты и сервисы, например тот же Инстаграм. Переключение между панелями происходит за счет простых свайпов. Вы сами определяете их порядок в настройках.

Сохраняйте статьи. Вы можете сохранить любую понравившуюся статью и прочитать ее снова, даже если на вашем телефоне нет интернета

 

Есть ли недостатки?

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

В версии 14.0 после добавления поддержки Flash и изменения интерфейса скорость и отзывчивость значительно улучшились.

Как посмотреть мобильную версию сайта через компьютер?

Сразу возникает вопрос, в чем сложность? В отличие от адаптивного дизайна, мобильный шаблон представляет собой отдельный набор файлов и стилей, доступных только пользователям мобильных устройств. Эта избирательность реализуется путем сопоставления параметра «user-agent».

То есть перед загрузкой веб-страницы сайт сверяется с параметрами браузера пользователя и на основании этого выдает тот или иной вариант. Например, сайт получает пользовательский агент — «firefox», а это значит, что загружается десктопная (полная) версия сайта. Если пользовательский агент «Андроид», сайт понимает, что необходимо открыть мобильную версию сайта.

Через браузер Firefox

Чтобы просмотреть сайт в качестве мобильного пользователя из браузера Mozilla Firefox, воспользуйтесь встроенными инструментами веб-разработки. Для этого откройте сайт и в строке меню (сверху/можно вызвать клавишей «Alt») пройдите по пути:
Инструменты? Веб-разработка? Адаптивный дизайн

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

Через браузер Chrome

Если вы являетесь активным пользователем браузера Google Chrome, вам необходимо предварительно установить расширение с говорящим названием «». И далее переходим к новому элементу в панели вверху (слева от «меню опций») — смайлик в очках.

Раскройте список доступных агентов щелчком мыши. Выбираем одну из популярных мобильных операционных систем Android или iOS и страница преображается на глазах. Когда вы закончите с мобильной версией сайта, не забудьте вернуться к агенту «Chrome/по умолчанию».