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

Как мне изменить режим просмотра веб-сайта на версию для настольного компьютера в Firefox для Android?

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

1. Откройте страницу, которую хотите просмотреть в Firefox.
2. Нажмите кнопку меню.
3. Измените состояние переключателя рядом с Версия для ПК , чтобы включить этот режим или отключить его.

Эти прекрасные люди помогли написать эту статью:

Станьте волонтёром

Растите и делитесь опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.

Проверка адаптивности сайта для мобильных устройств

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

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

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

Чтобы проверить адаптивность сайта под мобильные устройства как можно быстрее, можно открыть встроенный отладчик в браузере Mozilla Firefox или Google Chrome.

Как посмотреть сайт в разных разрешениях?

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

• В Google Chrome;
• В Mozilla Firefox;
• Ручной метод.

Видеоинструкция

Далее в нижнем-правом углу потребуется выбрать вид «Мобильный телефон».

При необходимости нажав на «Адаптивный» можно выбрать нужную модель смартфона.

Справа можно настроить разрешение экрана (настраивается вручную).

Далее идет возможность изменить ориентацию экрана.

После можно изменить DPR (Соотношение пикселей устройства к снимку экрана).

Как и в Google Chrome можно изменить способ подключения на 2G, 3G, GPS, 4G или

• Без ограничения;
• GPRS;
• Regular 2G;
• Goog 2G;
• Regular 3G;
• Good 3G;
• Regular 4G/LTE;
• DSL;
• Wi-Fi.

Также при необходимости можно включить имитацию устройства (требует перезагрузки браузера).

В Google Chrome

Для того, чтобы открыть мобильную версию сайта с компьютера потребуется открыть Google Chrome и перейти на нужный URL после чего кликнуть правой клавиши мыши в любом месте экрана и в выпавшем меню выбрать пункт «Посмотреть код».

В правом-верхнем углу кликаем на значок «Мобильный телефон».

Теперь сайт открыт с мобильного телефона, а при необходимости можно сменить вид на нужный смартфон/планшет, где справа будет указано расширение.

Также доступно изменение масштаба.

Дополнительно можно выбрать способ отображения (online/offline).

При необходимости стоит изменить ориентацию экрана на альбомную или стандартную.

Ручной метод

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

Подписывайтесь на наш канал в Яндекс.Дзен

Подписывайтесь на наш Telegram-канал

Подписывайтесь на наш Youtube-канал

Отладка мобильных сайтов в Firefox

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

Во всех основных браузерах есть инструментарий для отладки сайтов на мобильных устройствах. В этой статье я рассмотрю возможности Firefox и сравню их с аналогичными в Chrome и Internet Explorer.

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

Отзывчивый веб-дизайн это хороший способ сделать сайт mobile-friendly, позволяющий нам адаптировать макеты в соответствии с размерами экрана.

Самый простой способ протестировать его, это изменение размера окна браузера. Однако, этот метод не всегда точен и практичен. Здесь помогает отзывчивый режим 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 tools.

Теперь нам надо активировать удаленную отладку в Firefox. Это делается в настройках инструментов разработчика, просто активируйте “Enable remote debugging” (также может потребоваться перезапуск Firefox)

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

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

Для активирования надо открыть настройки мобильного устройства, необходимый пункт есть в разделе Developer options. Если у вас нет доступа к этому разделу, несколько раз нажмите на “Build number”(номер сборки) в разделе About (о телефоне).

Также как и на десктопе, вам надо активировать удаленную отладку в Firefox для Android. Если Firefox 25+, просто выберите “Remote debugging” в разделе “Developer tools” меню “Settings”.

В Firefox 15–24 наберите в адресной строке “about:config”. Найдите пункт devtools.debugger.remote-enabled и задайте ему значение true, нажав кнопку “Toggle”.

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

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

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

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

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

adb start-server 

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

adb devices 

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

List of devices attached BH90TFM516 device 

Если вы увидете, что ваш девайс распознан по другому, а не как “device”, остановите сервер, набрав 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-, то команда будет проще:

adb forward tcp:6000 tcp:6000 

Соединяем Firefox

Вы уже подключили инструменты разработчика Firefox на десктопе к Firefox для Android. Осталось только через меню Firefox выбрать “Connect…” в подменю “Web Developer”.

Это откроет новую вкладку с заполненной формой, вам остается просто нажать кнопку “Connect”:

А теперь взгялните на мобильное устройство. На экране должно появиться сообщение с запросом разрешения на соединение. Нажмите кнопку “OK” и возвращайтесь к компьютеру.

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

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

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

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

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

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

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

Chrome

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

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

Internet Explorer

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

Специальных средств для отладки в IE нет, но он совместим с weinre.