MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Valence (адаптер для Firefox)

В процессе перевода.

Valence (ранее Firefox Tools Adapter) - экспериментальное дополнение, которое позволяет Firefox Developer Tools отлаживать более широкий спектр браузеров, а не только браузеры на базе Gecko для Firefox, Firefox для Android и браузеров Firefox.

Первоначальными объектами отладки являются Chrome на Android, Chrome Desktop и Safari на iOS.

Valence все еще находится на ранних стадиях и доступен только как предварительный просмотр.Мы пока не рекомендуем использовать его для повседневной работы.
Установка и настройка
Установка Valence

Если вы используете Firefox Developer Edition (любая версия) или Firefox 37 и более поздние версии (любой канал), открытие WebIDE также устанавливает надстройку Valence, поэтому вы можете пропустить этот шаг.

В противном случае установите последнюю версию предварительного просмотра для своей платформы здесь.

Примечание. Если ваша цель отладки не отображается в WebIDE, убедитесь, что надстройка Valence не отключена.Вы можете найти его в разделе «Расширения» диспетчера надстроек.
Установка Chrome на Android

Для Valence требуется Chrome 37.0 или выше (если вы установили Chrome и Chrome Beta, и оба они работают при подключении Firefox Developer Tools к вашему устройству, вы увидите только вкладки одного из браузеров).

Вам нужно будет включить режим разработчика на вашем устройстве, а также USB-отладку.Следуйте этим инструкциям, чтобы включить режим разработчика.
Safari, Firefox и другие WebViews в настройках iOS

Valence был протестирован против Safari на iOS 6, 7 и 8, а также iOS Simulator на OS X. Тот же код поддерживает отладку Firefox на iOS и других встроенных WebViews на iOS или iOS Simulator.

Вам нужно будет включить поддержку разработчика на вашем устройстве.Следуйте инструкциям на этой странице (в разделе «Включить веб-инспектор в iOS»), чтобы начать работу.

Поддержка iOS использует ios-webkit-debug-proxy от Google и его fork ios-webkit-debug-proxy-win32 в Windows. Никакая специальная настройка не должна выполняться на Mac, Linux и Windows Vista (или позже), Valence содержит и управляет прокси-сервером. В Windows XP загрузите Microsoft PowerShell перед установкой надстройки.В Windows вы также увидите запрос брандмауэра при первом запуске прокси-сервера, где вы должны нажать «Разрешить». Обратите внимание, что в Windows драйверы устройств установлены iTunes, поэтому вам нужно будет установить это или, по крайней мере, приложения Apple Mobile Device Support и приложения Apple App Support, которые поставляются вместе с ним.
Настройка Chrome Desktop

Valence требует Chrome 37.0 или выше.Вам также нужно запустить Chrome Desktop со специальным флагом, поскольку удаленная отладка по умолчанию не включена на Chrome Desktop.

Важным является флаг -remote-debugging-port = 9222. Существует страница с информацией о том, как запустить процесс Chrome с помощью этих флагов.

Существуют и другие флаги, которые могут быть полезны, если вы хотите запустить это вместе с другим профилем Chrome.Используя -no-first-run, -no-default-browser-check и -user-data-dir, вы можете запустить этот процесс вместе с другим профилем Chrome.

Например, в OSX вы можете запустить следующую команду для запуска отлаживаемой копии Chrome:

$ / Приложения / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222 --no-first-run -no-default-browser-check --user-data-dir = $ (Mktemp -d -t 'chrome-remote_data_dir')

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

Valence работает, добавляя в окно WebIDE, которое уже используется для подключения к Firefox OS.

    Подключите устройство: подключите его, запустите браузер и перейдите на страницу, над которой хотите работать.Если вы используете OS X и имеете Xcode, вы также можете использовать симулятор iOS.

    Запуск WebIDE: откройте WebIDE из меню Web Developer в Firefox.

    Выберите Runtime: Откройте список выполнения справа от панели инструментов. В разделе «Пользовательский» выберите «Safari, Firefox и другие WebViews на iOS» или «Chrome Desktop».Для устройств Android выберите «Chrome на Android» в разделе «USB-устройства».Вам может потребоваться принять отладочное соединение с вашего устройства.

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

    Начать отладки: нажмите кнопку «Отладка» (она выглядит как кнопка паузы) для подключения инструментов разработчика.

Отправьте нам отзыв: Сообщите о любых проблемах или проблемах, с которыми вы столкнулись. Вы можете использовать трекер проблем в нашем проекте GitHub.Есть тонна функциональности для добавления, и ваша обратная связь поможет нам сосредоточиться на наиболее важных частях в первую очередь!
Вопросы-Ответы
Что под капотом?

Это дополнение представляет собой новую реализацию Firefox Developer Tools Protocol. Вместо того, чтобы напрямую взаимодействовать с контентом, он ссылается на протокол удаленной отладки, обнаруженный Chrome и iOS.Эта реализация размещена внутри процесса Firefox и используется внутренне с помощью инструментов разработчика Firefox.
Когда это будет готово?

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

На странице проекта GitHub есть инструкции по взаимодействию с кодом. Ваша обратная связь также полезна: поговорите с нами в Twitter по адресу @FirefoxDevTools, GitHub или UserVoice.
Это то же самое, что remotedebug.org?

Нет.Конечной целью проекта remotedebug.org является предоставление единого протокола для сторонних инструментов для взаимодействия со всеми браузерами путем стандартизации версии протокола Chromium.Мы не знаем ни одного поставщика браузеров, которые обязались унифицировать протоколы.

С Valence мы в настоящее время не пытаемся решить проблему стандартного протокола, мы просто делаем то, что нам нужно сделать, чтобы предоставить Firefox Developer Tools для этих браузеров.Наш инструмент основан на протоколе разработчика Firefox, а не на протоколе Chromium.

Хотя ранние версии протокола моста remotedebug.org служили источником вдохновения для этого проекта, мы принимаем эту идею в другом направлении.
Не постоянно ли меняются нисходящие протоколы?

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

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

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

Перейдите в комнату #devtools в IRC, и мы постараемся помочь.

Метки документа и участники

 Внесли вклад в эту страницу: mim524
 Обновлялась последний раз: mim524,