Удаленная USB-отладка Firefox

Обновлено: 24.11.2024

Месяц назад мы представили отладчик и другие новые инструменты разработчика, представленные в Firefox 15. Наш новый отладчик позволяет вам подключать Firefox Desktop к Firefox на Android, чтобы вы могли использовать свой красивый, вместительный настольный монитор для устранения неполадок JavaScript, запущенного на ваше мобильное устройство. 95% Android-устройств работают под управлением Firefox-совместимой версии операционной системы (Android 2.2 и выше). Firefox не будет работать на всех этих устройствах, но, безусловно, есть много миллионов устройств, которые вы можете выбрать и начать удаленную отладку.

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

Настройте рабочий стол

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

Затем введите about:config в адресную строку Firefox, чтобы изменить настройку в браузере. Браузер отобразит предупреждение, но не волнуйтесь… мы будем осторожны.

В поле поиска в верхней части страницы about:config введите «remote-en». Единственная настройка, которая должна совпадать, — «devtools.debugger.remote-enabled». Установите значение true, дважды щелкнув по нему.

Наконец, перезапустите браузер. После этого вы увидите «Удаленный отладчик» в меню «Веб-разработчик» (либо в главном меню Firefox, либо в меню «Инструменты» на Mac).

Настройте Firefox для Android

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

Теперь запустите бета-версию Firefox на своем телефоне. Как и на рабочем столе, вам нужно перейти на страницу about:config, чтобы изменить настройки. Найдите «отладчик» и

  1. переключите devtools.debugger.force-local в false
  2. переключите devtools.debugger.remote-enabled в true

Чтобы запустить сервер удаленной отладки, вам потребуется перезапустить Firefox. Нажмите кнопку «Домой», чтобы выйти из Firefox.

На Galaxy Nexus с запущенным Jelly Bean вы можете принудительно перезапустить Firefox, открыв переключатель задач и сдвинув Бета-задачу Firefox вправо.

Дополнительное примечание: если вас не устраивает мысль о том, что ваш Firefox прослушивает соединения в сети, вы можете оставить для force-local значение true и следовать инструкциям Марка Финкла, чтобы запустить удаленную отладку через USB.

Найти свой IP-адрес

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

  1. откройте приложение "Настройки".
  2. нажмите "Wi-Fi".
  3. нажмите на сеть, к которой вы сейчас подключены

Отображаемый экран будет содержать ваш IP-адрес.

Установите связь

Теперь все готово для удаленной отладки!

На мобильном устройстве перейдите на страницу, которую нужно отладить. Запустите удаленный отладчик на настольном Firefox. Удаленный отладчик появится в виде нового окна и запросит у вас адрес для подключения. Замените «localhost» на IP-адрес вашего телефона. По умолчанию сервер удаленной отладки на вашем мобильном устройстве будет работать на порту 6000, поэтому оставьте «:6000» в адресе подключения.

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

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

Дайте нам знать, что вы думаете!

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

Спасибо! Пожалуйста, проверьте свой почтовый ящик, чтобы подтвердить подписку.

Если вы ранее не подтверждали подписку на информационный бюллетень, связанный с Mozilla, возможно, вам придется это сделать. Пожалуйста, проверьте папку "Входящие" или спам-фильтр на наличие писем от нас.

7 комментариев

Мне это так нравится! Как я первый, кто комментирует это!

Надеюсь, вы планируете также добавить удаленную версию Инспектора, чтобы я мог напрямую взаимодействовать со свойствами CSS, а не изменять их через javascript. В любом случае, это фантастическое дополнение, и я так рад, что вы его добавили. Другие станут такими же, как только осознают. :)

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

У меня Firefox Nightly на рабочем столе, а на Galaxy Nexus — ICS на Verizon. Я продолжаю получать всплывающее окно на своем телефоне, на котором я нажимаю «Принять», но удаленное соединение, похоже, никогда не подключается. Если бы это была проблема с брандмауэром, он бы никогда не отображал входящее сообщение на первом месте.

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

Спасибо!

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

Очень рад видеть это здесь. Буквально месяц назад я писал об удаленной отладке в мобильных браузерах и смог найти только настройки about:config. Выглядит отлично. :)

Есть ли способ сделать что-то похожее на HTML или CSS?

Комментарии к этой статье закрыты.

Если не указано иное, контент на этом сайте находится под лицензией Creative Commons Attribution Share-Alike License v3.0 или любой более поздней версии.

Для Firefox версий от 37 до 67 используйте руководство WebIDE.

В этом руководстве объясняется, как использовать удаленную отладку для проверки или отладки кода, работающего в Firefox для Android, через USB.

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

Предпосылки¶

Во-первых, вам понадобится:

настольный компьютер или ноутбук с запущенным Firefox

устройство Android, способное работать под управлением Firefox для Android с работающим на нем Firefox для Android

кабель USB для подключения двух устройств

Настройка ADB¶

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

На устройстве Android¶

Подключите устройство к рабочему столу через USB.

На рабочем столе¶

Установите правильную версию Android SDK для вашего устройства.

С помощью Android SDK установите инструменты платформы Android.

Android Platform Tools устанавливает adb в каталог «platform-tools» в каталоге, в котором вы установили Android SDK. Убедитесь, что в пути указан каталог «platform-tools».

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

Вы должны увидеть что-то вроде:

(Длинная шестнадцатеричная строка будет другой.)

Если вы это сделаете, adb найдет ваше устройство, и вы успешно настроите ADB.

Включить удаленную отладку¶

Затем вам нужно включить удаленную отладку как на устройстве Android, так и на рабочем столе.

Firefox для Android 24 и более ранних версий¶

Чтобы включить удаленную отладку на устройстве, необходимо установить для параметра devtools.debugger.remote-enabled значение true .

Перейдите на страницу about:config в Firefox для Android, введите «devtools» в поле поиска и нажмите клавишу поиска. Вы увидите все настройки devtools. Найдите параметр devtools.debugger.remote-enabled и нажмите «Переключить».

Firefox для Android 25 и более поздних версий¶

В Firefox для Android 25 и более поздних версий есть пункт меню для включения удаленной отладки. Откройте меню, выберите «Настройки», затем «Инструменты разработчика» (на некоторых устройствах Android вам может потребоваться выбрать «Дополнительно», чтобы увидеть параметр «Настройки»). Установите флажок «Удаленная отладка»:

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

На рабочем столе¶

На рабочем столе удаленная отладка включается с помощью параметра на панели инструментов. Откройте панель инструментов , нажмите кнопку «Настройки» на панели инструментов и установите флажок «Включить удаленную отладку» на вкладке «Настройки»:

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

После этого вы увидите новую опцию в меню веб-разработчика с надписью «Подключить…»:

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

Теперь вы можете подключить инструменты удаленной отладки к устройству. Сначала подключите устройство к рабочему столу с помощью USB-кабеля, если вы еще этого не сделали.

На рабочем столе¶

Для Firefox 34 или более ранней версии перейдите в командную строку и введите:

Для более поздних версий Firefox перейдите в командную строку и введите:

(Если вы изменили значение, которое устройство Android использует для порта отладки, вам потребуется изменить его соответствующим образом.)

Для Firefox OS введите:

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

Затем перейдите в меню веб-разработчика в Firefox и выберите «Подключить…». Вы увидите страницу, которая выглядит следующим образом:

Если вы не меняли номера портов, выберите 6000 и нажмите кнопку "Подключиться".

На устройстве Android¶

Затем вы увидите диалоговое окно в Firefox для Android с просьбой подтвердить подключение:

Нажмите «ОК». Рабочий стол ждет несколько секунд, чтобы дать вам время подтвердить это диалоговое окно: если время истекло, просто снова нажмите «Подключиться» в диалоговом окне рабочего стола.

На рабочем столе¶

Далее на рабочем столе отображается диалоговое окно, которое выглядит примерно так:

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

Вы увидите одну запись в разделе "Доступные удаленные вкладки" для каждой открытой вкладки, и щелкнув ее, вы прикрепите инструменты отладки к веб-контенту, размещенному на этой вкладке. Если вы хотите отладить свой веб-контент, выберите соответствующую вкладку контента.

В разделе «Доступные удаленные процессы» вы увидите одну запись: это сам процесс браузера. Вы выберете этот вариант, если хотите отлаживать собственный код браузера.

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

Ранее я рассказывал об удаленной отладке Chrome, а попутно мы рассмотрели последнюю версию браузера Microsoft Edge.

А как насчет Firefox?

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

Эта статья была написана несколько месяцев назад, но ее так и не удалось опубликовать. Итак, приступим.

Интерфейс удаленной отладки и управления

Хорошо то, что Firefox поставляется со встроенным пользовательским интерфейсом для отладки нескольких удаленных подключений браузера. Можно выбирать и переключаться между ними:

Видите кнопку "Подключиться"? Это позволяет подключать и отлаживать эти удаленные экземпляры Firefox!

Как добраться?

Начнем с основ.

Включение удаленной отладки в Firefox

В отличие от Chrome, Firefox по умолчанию отключает эту функцию!

Поэтому сначала вредоносное ПО должно включить его, обновив файлы конфигурации user.js (или prefs.js ) в профиле пользователя Firefox.

В Windows файлы расположены по адресу:

Примечание. В папке может быть несколько профилей.

Эти обновления необходимы для включения удаленной отладки:

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

Вы можете найти соответствующие конфигурации в настройках разработки:

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

Пользователь видит это приглашение, когда клиент подключается к конечной точке отладки. Параметр devtools.debugger.prompt-connection в файле конфигурации управляет этим поведением.

Обнаружение синей команды

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

Использование удаленной отладки Firefox

После обновления конфигурации можно запустить новый экземпляр Firefox, используя:

& 'C:\Program Files\Mozilla Firefox\firefox.exe' -start-debugger-server 9222

Есть также параметры --headless и т. д., с которыми вы можете поэкспериментировать.

Вот как это выглядит:

Как видите, прослушивается только локальный интерфейс.

Тоннелирование трафика на удаленные машины

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

В Windows это может сделать администратор, используя:

Теперь удаленные подключения к этому порту будут запрещены, так как их блокирует брандмауэр (мы переадресовали на порт 48333). Нам нужно добавить новое правило брандмауэра, чтобы разрешить порт 48333. Итак, давайте разрешим этот порт через брандмауэр.

Есть несколько способов сделать это в Windows, но поскольку мы уже использовали сети, давайте остановимся на этом:

брандмауэр netsh advfirewall добавить правило name="Открыть порт 48333" dir=in action=allow protocol=TCP localport=48333

Теперь все настроено для подключения с другого компьютера.

Важно! Этот трафик отправляется в виде открытого текста, поэтому имейте в виду и рассмотрите возможность использования переадресации портов ssh для шифрования трафика

Отладка удаленных экземпляров Firefox

Теперь, когда порт отладки доступен удаленно, мы можем подключить к нему Firefox на другом компьютере. Давайте рассмотрим, как это работает:

Перейдите к about:debugging в URL-адресе браузера (или нажмите Инструменты веб-разработчика — Удаленный отладчик). Здесь вы можете подключаться к удаленным устройствам, на которых запущен Firefox. Нажмите «Добавить», чтобы добавить новый сервер для подключения.

Также можно добавить несколько серверов отладки, как показано на этом снимке экрана. Это в основном позволяет иметь мини-C2 для удаленного управления несколькими браузерами.

Вот и все, я думаю, все довольно круто. :)

Автоматизация

Я еще не потратил много времени на изучение протокола для автоматизации этого. Протокол задокументирован здесь, и, копаясь в нем более подробно, я наткнулся на этот дефект Bugzilla:

Да, это означает, что Firefox также будет реализовывать API Network.getAllCookies() — аналогично тому, как это работает сегодня с Chrome через Cookie Crimes.

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

Протокол по умолчанию — простой, он состоит из длины отправки: JSONREQUEST .

Подключитесь через telnet или netcat и отправьте следующие строки:

Несколько других команд, которые я придумал для получения содержимого сайта:

Идентификаторы подключений и субъектов (например, conn21 или child 21) меняются каждый раз, поэтому для автоматизации требуется небольшой сценарий, над которым я еще не работал.

Я буду ждать удобный API getAllCookies.

ОБНОВЛЕНИЕ: я только что снова проверил ошибку Bugzilla, и API getAllCookies() теперь существует!

Очистка и откат изменений

Имейте в виду, что переадресация портов была настроена ранее, чтобы разрешить удаленное раскрытие API отладки Firefox через порт 48333. Чтобы удалить переадресацию портов и вернуться к значениям по умолчанию, мы можем запустить следующую команду:

сброс прокси порта интерфейса netsh

В качестве альтернативы есть аргумент удаления.

То же самое относится и к открытию порта 48333 в брандмауэре:

netsh advfirewall firewall del rule name="Открыть порт 48333"

Все, теперь какие обнаружения?

Обнаружение и устранение

  • Синие команды должны искать всех, кто использует -start-debugger-server и связанные с ним функции, чтобы выявить возможное неправомерное использование. Имейте в виду, что в Linux/macOS используется аргумент --start-debugger-server
    • .
  • Аналогично отслеживайте и отслеживайте переадресацию портов на хостах.
  • Отслеживайте изменения в user.js и настройках.js, которые изменяют параметры удаленной отладки для каждого пользователя и профиля в $AppData\Roaming\Mozilla\Firefox\Profiles\ . Вредоносное ПО, которое хочет использовать встроенные функции, может обновить файлы.
  • Использование интерфейса netsh portproxy или открытых правил брандмауэра artibrary также может выявить аномалии.

Заключение

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

Подпишитесь на меня или напишите мне в Твиттере @wunderwuzzi23.

Ссылки

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

Большинство популярных браузеров предлагают решения для отладки веб-проблем, будь то незначительные настройки CSS, проверка журналов производительности, ошибки консоли или проблемы в сценариях. Но проблема возникает, когда веб-сайт отлично работает на рабочем столе, но вызывает серьезные ошибки на устройстве Android. Ответ – удаленная отладка, которая позволит вам подключить устройство Android к рабочей станции с помощью USB-кабеля и выполнить отладку мобильной веб-страницы на рабочем столе.

Давайте посмотрим, как тестирование в браузере Firefox упрощает удаленную отладку для разработчиков.

Что вам понадобится?

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

  • Chrome версии 15 или выше установлен и правильно работает на вашей рабочей станции.
  • Если вы используете Windows, требуются USB-драйверы.
  • Кабель USB для подключения устройства Android к настольному компьютеру или ноутбуку.

Для устройства Android требуются следующие вещи.

  • Последняя версия Firefox, предпочтительно версия 35 или выше.
  • Android версии 4 или выше.
  • Отладка по USB включена в параметрах разработчика для Android.

Как подключить рабочую станцию ​​к устройству Android?

Ваша рабочая станция может взаимодействовать с мобильным устройством с помощью Android Debug Bridge (ADB). Это клиент-серверная программа, позволяющая выполнять команды на устройстве. Давайте углубимся в процесс

  • Включите отладку по USB на своем мобильном телефоне и подключите его к настольному компьютеру через USB.
  • Убедитесь, что установлена ​​правильная версия Android SDK.
  • ADB будет установлен в каталог «platform-tools».
  • Проверьте, работает ли он, выполнив команду adb devices в командной оболочке. Если выходные данные содержат имя устройства, подключенного к вашей рабочей станции, это означает, что ADB работает нормально.
  • В настольном браузере также необходимо установить надстройку adb helper. Если вы обнаружите, что он отсутствует, перейдите в меню «Проекты» и перейдите к «Управление дополнительными компонентами». Появится окно «Дополнительные компоненты», содержащее запись для помощника adb. Нажмите кнопку "Установить", и он будет добавлен в ваш настольный браузер.

Начало работы с удаленной отладкой

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

  • Откройте Firefox и перейдите в меню
  • В настройках вы найдете параметр Инструменты разработчика. Перейдите туда и установите флажок «Удаленная отладка».


  • Откройте Firefox
  • Откройте панель инструментов и перейдите в раздел "Настройки".
  • Как и в случае с мобильными устройствами, флажок Включить удаленную отладку можно найти на вкладке настроек. Проверьте это и закройте панель инструментов.

Если у вас установлена ​​последняя версия Firefox, подключение будет проще. Перейдите в командную строку и выполните следующую команду.

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

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

Для каждой вкладки, открытой на устройстве Android, название сайта будет добавлено в разделе «Доступные удаленные вкладки». Открытие вкладки откроет вкладку вместе с консолью разработчика на рабочем столе. Позволяет отладить нужную страницу.

Ограничения отладчика и способы их преодоления

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

Точки останова событий DOM не поддерживаются новым отладчиком. Когда вы пытаетесь отладить свой JavaScript, точки останова важны, поскольку они могут дать команду отладчику остановить выполнение события. Это ограничение нового отладчика затруднит разработчикам отладку связанных со скриптами проблем в Android.

Новый отладчик также не поддерживает проверку узлов DOM. Когда вы наводите указатель мыши на узел DOM в консоли разработчика, он выделяется на отображаемой веб-странице

Поскольку эти функции не поддерживаются, разработчикам придется вернуться к предыдущей версии отладчика, чтобы использовать их. Это можно сделать, перейдя в about:config, где вы найдете параметр с именем «devtools.debugger.new-debugger-frontend». Отметьте его как false, и вы сможете снова проверять узлы DOM и устанавливать точки останова.

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

Арнаб Рой Чоудхури

Арнаб Рой Чоудхури — разработчик пользовательского интерфейса по профессии и энтузиаст блогов. Он пишет контент уже около 5 лет и имеет большой опыт в технических блогах, рассказах о путешествиях и контенте на новейших языках программирования.

Автор сценария Арнаб Рой Чоудхури

Арнаб Рой Чоудхури — разработчик пользовательского интерфейса по профессии и энтузиаст блогов. Он пишет контент уже около 5 лет и имеет большой опыт в технических блогах, рассказах о путешествиях и контенте на новейших языках программирования.

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