Firefox удаленная отладка по usb

Обновлено: 05.07.2024

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

Тестирование в адаптивном режиме Firefox

Самым простым способом тестирования адаптивного дизайна обычно было изменение размера окна браузера. Однако это не всегда практично или точно. Именно здесь Responsive Mode Firefox пытается помочь.

Доступный начиная с Firefox 15, адаптивный режим, также называемый отзывчивым дизайном, является режимом, специально созданным для тестирования мобильной версии веб-сайта.

Вы можете активировать адаптивный режим из записи Responsive Design View в подменю Web Developer главного меню Firefox (или меню Tools в некоторых ОС). Вы также можете использовать кнопку на панели инструментов разработчика или сочетание клавиш Ctrl + Shift + M (или Cmd + Opt + M в Mac OS). Отключите режим с помощью того же меню, сочетаний клавиш или клавиш или закрыв адаптивный интерфейс.

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

Активировав Responsive Design View, Firefox изменит размер представления, но не окна. Как и при изменении размера окна, вы можете изменить размер представления с помощью мыши, используя элементы управления справа и снизу, а также нижний правый угол представления.

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

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

Наконец, вы можете смоделировать изменение ориентации, нажав кнопку поворота в правой части списка.

Сенсорные события

Крайне правая кнопка в представлении «Адаптивный дизайн» позволяет сделать снимок экрана текущего представления, а рядом с ним находится кнопка «Имитация сенсорных событий».

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

Отладка вашего кода с помощью удаленной отладки

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

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

Подготовка компьютера

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

Далее нам нужно включить удаленную отладку в Firefox.

Откройте панель инструментов и панель « Настройки ». На этой панели вы найдете флажок « Включить удаленную отладку ». Установите этот флажок и перезапустите Firefox, если это необходимо.

Подготовка мобильного устройства

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

Чтобы включить отладку по USB, откройте настройки вашего мобильного устройства. Вы найдете соответствующий флажок в разделе «Параметры разработчика » этих настроек. Если у вас нет доступа к этим настройкам, вы можете получить доступ, нажав несколько раз на «Номер сборки » в разделе « О телефоне » в настройках вашего мобильного устройства.

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

Если вы используете Firefox 24 или более раннюю версию и не хотите обновляться, введите «about: config» в строке URL-адреса. На этой специальной странице devtools.debugger.remote-enabled предпочтение devtools.debugger.remote-enabled и установите для него значение true , нажав кнопку « Переключить », если это необходимо.

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

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

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

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

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

Вы должны увидеть список подключенных устройств, подобный следующему.

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

Теперь мы перешлем сокетное соединение. Команда для ввода зависит от того, какую версию Firefox для Android вы используете.

Если вы используете стабильную версию 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 если вы используете Nightly.

Наконец, если вы используете Firefox для Android 34 или более ранней версии, введите:

adb forward tcp:6000 tcp:6000

Подключение Firefox

Теперь вы готовы подключить инструменты разработчика Firefox к Firefox для Android. Для этого откройте меню Firefox и выберите пункт « Подключить… » в подменю « Веб-разработчик ».

Откроется новая вкладка с предварительно заполненной формой. Значения по умолчанию должны быть хорошими, поэтому отправьте форму, нажав кнопку « Подключиться ».

Вы сможете выбрать вкладку, которую хотите отладить. Нажмите на тот, который вы хотите, и вы готовы отладить его.

Делай что хочешь!

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

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

А как насчет других браузеров?

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

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

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

Internet Explorer

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

В браузере Microsoft нет такого инструмента, как удаленная отладка, но он совместим с weinre .

Какие у вас есть опыт и советы по работе с функциями удаленной отладки в веб-браузерах?

Эта статья описывает, как присоединить Иструменты разработчика Firefox к Firefox для Android из Firefox 36 или выше. Для подключения по WiFi, смотрите соответствующую страницу.

После прошедствия долгого времени, стало возможным подключать Инструменты разработчика Firefox к Firefox для Android, теперь вы можете отлаживать мобильные сайты. До настоящего времени, это было довольно запутанный и подверженный ошибкам процесс. Начиная с Firefox 36, мы сделали процесс намного проще: в частности, вам не придётся работать напрямую с adb вообще. Теперь вы можете подключиться, используя WebIDE, которая заботся о настройке adb за кулисами.

Для того, чтобы это работало, вам понадобится Firefox 36 на компьютере и Firefox 35 на мобильном. Если вам нужно использовать более раннюю версию, смотрите старые инструкции подключения инструментов разработчика к Firefox для Android.

Управление проектом WebIDE и возможности по установке здесь недоступны, в настоящее время они работают только для Firefox OS устройств. На Android устройствах, можно отлаживать только существующие сайты уже загруженные в браузере.

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

Требования

Первое, что вам понадобится:

компьютер с установленным Firefox 36 или выше
Android-устройство, совместимое с Firefox для Android, с установленным на нём Firefox для Android 35 или выше
USB кабель, чтобы соединить эти 2 устройства

ADB Helper

В Firefox на вашем компьютере также надо установить дополнение ADB Helper, версии 0.7.1 или выше. Оно должно установиться автоматически, когда вы в первый раз откроете WebIDE. Чтобы проверить версию, наберите about:addons в адресной строке браузера и вы должны увидеть ADB в списке.

Если вы не видите ADB Helper версии 0.7.1 или выше, выберите "Управление дополненительными проектами" из меню "Проекты", теперь вы увидите окно "Дополнительные компоненты", в котором будет видно ADB Helper:

Щёлкните "удалить", а затем "установить", и у вас должно получиться установить его последнюю версию.

Подключение Android устройства

Во-первых, включите откладку по USB как описано в шагах 2 и 3 этого руководства.

Затем, включите удалённую отладку в Firefox для Android. Откройте браузер, откройте меню, выберите "Парамерты" (на некоторых Android устройствах, вам понадобится нажать "Ещё", чтобы увидить опцию "Настройки"), дальнешие шаги зависят от версии браузера:

с версии 36 до 41: выберите "Инструменты разработчика", а затем "Удалённая отладка"

с версии 42 до 44: выберите "Инструменты разработчика", а затем "Удалённая отладка через USB"

версия 45 или более поздняя: выберите "Дополнительно", а затем "Удалённая отладка через USB"

Подключение

Подключите Android устройство к компьютеру, используя USB кабель, и откройте WebIDE. Выберите "Firefox для Android", находящийся в "USB УСТРОЙСТВА":

Теперь щёлкните "Открыть приложение" в меню WebIDE. Вы увидите список всех открытых на устройстве вкладок:

Выберите вкладку, для которой вы хотите открыть инструменты разработчика:

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

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

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

Рассмотрим варианты для Chrome и Firefox. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.

На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.

Инструкция для Google Chrome

Для отладки в Chrome, на компьютере должен быть установлен браузер версии не ниже 32, а на версия Android должна быть минимум 4.

Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»

Ставим галочку «Discover USB devices».

Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».

Видим слева своё устройство и его статус. Кликаем по нему.

Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.

Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.

Инструкция для Mozilla Firefox

На Firefox подобное сработает только на версии новее 36.

Запускаем Firefox на мобильном. Переходим в настройки, затем в «Дополнительно» и включаем удалённую отладку.

Переходим в меню Firefox на десктопе. Выбираем «разработка», затем «WebIDE».

Подключаем телефон, видим его справа сверху. Кликаем по нему.

Разрешаем доступ на мобильном.

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

Открывается инспектор. Наводим на элементы, пишем стили и видим результат на телефоне.

Бонус: отладка сайтов по WiFi

Работает пока, к сожалению, только на Firefox и только на версиях от 39 и выше. Чтобы всё сработало, компьютер и телефон должны быть подключены к одной сети. Плюс к этому, на телефоне должен быть установлен сканер QR-кодов. Firefox рекомендует этот. Другие, к слову, Firefox у меня не распознал и упорно твердил, что программа-сканер не установлена.

Комментариев нет

Совсем недавно состоялась премьера бета-версии Firefox 15. Среди нововведений в браузере появились новые средства для разработчиков. Теперь возможна удаленная отладка кода на мобильном устройстве.

Новый отладчик позволяет настольной версии Firefox подключаться к мобильному Firefox на Android-устройствах. После этого разработчику доступен для отладки код, работающий на мобильном устройстве. До 95% всех устройств на данной операционной системе поддерживают последнюю бета-версию Firefox для Android. Ранее подобная функция появилась в продуктах Opera, чуть позже в Chrome. В Mozilla сделали небольшой ролик, демонстрирующий удаленную отладку:

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

Настройка настольной версии

Одной из важных частей в реализации подключения к мобильному браузеру является настольная версия Firefox. Нам необходима версия не меньше 15 (которая сейчас в бета-стадии). Мы использовали 16 Aurora.

Идем в продвинутые настройки about:config, соглашаемся с предупреждением о последствиях своих действий. Вверху расположена строка, фильтрующая результаты поиска. В ней необходимо написать «remote-en». Фильтр выдаст единственный вариант — «devtools.debugger.remote-enabled». Он нам и нужен. Кликнем по нему два раза мышью, чтобы изменить значение на True:

После этого необходимо перезапустить браузер. После повторного запуска в пунктах меню для разработчиков появится новый пункт. Идем в Меню -> Веб-разработка -> Удаленный отладчик. Откроется окошко, в котором необходимо ввести ip-адрес и порт для подключения к мобильному устройству. отойдем пока от настольного компьютера, а займемся мобильным Firefox.

Настройка Firefox 15 beta на устройстве

Для работы нам необходима последняя бета-версия обозревателя от Mozilla. Загрузить его можно в магазине приложений Google Play. После инсталляции запускаем Firefox на Android. Как и на настольной версии, нам необходимо попасть в продвинутые настройки. Для этого вводим в адресном поле about:config. В строке поиска необходимо ввести «debugger». Откроются два возможных параметра и здесь необходимо быть внимательным:
Параметр devtools.debugger.force-local переводим значение в False;
Параметр devtools.debugger.remote-enabled переводим значение в True.

Этими действиями мы выключили локальную отладку и активировали удаленную. После тих действий необходимо перезапустить программу. Далее нам необходимо узнать ip-адрес нашего устройства.

Узнаем IP-адрес устройства

Нам необходимо узнать сетевой адрес нашего мобильного устройства. Для этого идем в Настройки приложения -> Wi-Fi. Здесь выбираем сеть, к которой вы подключены в данный момент. На экране будет отображаться ваш адрес:

Установка соединения

Все готово для установления удаленного соединения. Открываем на мобильном Firefox страницу, которую хотели бы отладить. Запускаем отладчик на настольной версии. Появится окно, указанное выше, в котором необходимо ввести адрес для подключения. По умолчанию порт, на котором работает отладка — 6000. Добавьте его к ip.

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

Читайте также: