Инструменты разработчика Firefox

Исследуйте, редактируйте и отлаживайте HTML, CSS и JavaScript на компьютерах и мобильных устройствах. Для получения последних обновлений для инструментов разработки скачайте Firefox Developer Edition.

Если вы ищете информацию по использованию инструментов веб-разработчика доступных в Firefox, вы зашли в правильное место - на этой странице даётся подробная информация обо всех основных и дополнительных инструментах веб-разработчика, а также информацию о том как подсоединять и настраивать Firefox для Android, как расширить набор инструментов разработчика, как настраивать браузер.
Пожалуйста, посмотрите описания инструментов разработчика, расположенные далее на этой странице. Если у вас возникнут замечания или вопросы об указанном наборе инструментов, то пришлите нам сообщение на нашу почту или IRC канал ( соответствующие ссылки находятся внизу страницы). Если у вас возникнут замечания или вопросы, касающиеся документации, то напишите в MDN discourse.

На заметку: если вы только начинаете веб разработку и использование инструментов разработчика, наши документы по изучению веб разработки помогут вам - для начала посмотрите Getting started with the Web (Начало работы в веб) и What are browser developer tools (Инструменты разработки браузера).

Основные инструменты

Вы можете открыть Средства Разработчика Firefox (Firefox Developer Tools) с помощью меню, выбрав Открыть меню > Веб-разработка > Инструменты разработчика или используя комбинации клавиш Ctrl + Shift + I или F12 на Windows и Linux, или Cmd + Opt + I на macOS.

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

	Эта кнопка доступна только в случае, если на странице присутствует несколько фреймов (тегов `iframe`). Нажатие на эту кнопку отображает список фреймов (тегов `iframe`) на текущей странице и позволяет выбрать тот фрейм (тег `iframe`) с которым вы хотите работать.
	Щелчок по данной кнопке создаёт снимок экрана (screenshot) текущей страницы. (Внимание: По умолчанию данная функция отключена и, при необходимости, должна быть включена в настройках.)
	Переключение в/из Режима Адаптивного Дизайна (Responsive Design Mode).
	Открывает меню, которое включает настройки "прилипания" (docking) окна Средств Разработчика, возможности отобразить или скрыть консоль, а также переход к диалогу настроек Средств Разработчика. Это меню также содержит ссылки на документацию по Веб-инструментам Firefox (Firefox Web Tools) и на Mozilla Community.
	Закрывает окно Средств Разработчика

Инспектор страницы

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

Web-консоль

Позволяет просматривать отладочные сообщения страницы и взаимодействовать с ней посредством JavaScript.

Отладчик JavaScript

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

Сетевой монитор

Показывает сетевые запросы возникающие в процессе загрузки страницы.

Инструменты производительности

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

Режим адаптивного дизайна

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

Инспектор доступности

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

Больше инструментов

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

Память: Выясните, какие объекты сохраняют память в использовании.
Storage Inspector: Проверьте файлы cookie, локальное хранилище, indexedDB и хранилище сеансов на странице.
DOM Property Viewer: Проверьте свойства DOM страницы, функции и т.д.
Панель инструментов разработчика: Интерфейс командной строки для инструментов разработчика.
Пипетка: Получите код любого цвета со страницы.
Scratchpad: Текстовый редактор, встроенный в Firefox, который позволяет вам писать и выполнять JavaScript
Редактор стилей: Просмотр и редактирование стилей CSS для текущей страницы.
Редактор шейдеров: Просмотр и редактирование вершинных и фрагментных шейдеров, используемых WebGL.
Редактор веб аудио: Изучите график аудиоузлов в аудиоконтексте и измените их параметры.
Делать скриншоты: Сделайте скриншот всей страницы, или одного её элемента.

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

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

about:debugging: Отладка надстроек, вкладок контента и рабочих, работающих в браузере.
Подключение к Firefox для Android: Подключите инструменты разработчика к Firefox, работающему на устройстве Android.
Подключение к iframes: Подключите инструменты разработчика к конкретному iframe на текущей странице.
Подключение к другим браузерам: Подключите инструменты разработчика к Chrome на Android и Safari на iOS.

Отладка браузера

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

Консоль браузера: Просматривайте сообщения, зарегистрированные самим браузером и надстройками, и запускайте код JavaScript в области видимости браузера.
Панель инструментов браузера: Присоедините инструменты разработчика к самому браузеру.

Расширение инструментов разработчика

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

Example devtools add-ons: Use these examples to understand how to implement a devtools add-on.
Add a new panel to the devtools: Write an add-on that adds a new panel to the Toolbox.
Remote Debugging Protocol: The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Source Editor: A code editor built into Firefox that can be embedded in your add-on.
The Debugger Interface: An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
Web Console custom output: How to extend and customize the output of the Web Console and the Browser Console.

Сделать вклад

Если вы хотите помочь улучшить инструменты разработчика, эти ресурсы помогут вам начать работу.

Увлекитесь: Вики-страница Mozilla, объясняющая, как принять участие.
firefox-dev.tools: Инструмент, помогающий находить ошибки для работы.