Исследуйте, редактируйте и отлаживайте HTML, CSS и JavaScript на компьютерах и мобильных устройствах. Для получения последних обновлений для инструментов разработки скачайте Firefox Developer Edition.
Если вы ищете информацию по использованию инструментов веб-разработчика доступных в Firefox, вы зашли в правильное место - на этой странице даётся подробная информация обо всех основных и дополнительных инструментах веб-разработчика, а также информацию о том как подсоединять и настраивать Firefox для Android, как расширить набор инструментов разработчика, как настраивать браузер.
Пожалуйста, посмотрите описания инструментов разработчика, расположенные далее на этой странице. Если у вас возникнут замечания или вопросы об указанном наборе инструментов, то пришлите нам собщение на нашу почту или IRC канал ( соответствующие ссылки находятся внизу страницы). Если у вас возникнут замечания или вопросы, касающиеся документации, то напишите в MDN discourse.
На заметку: если вы только начинаете веб разработку и использование инструментов разработчика, наши документы по изучению веб разработки помогут вам - для начала посмотрите Getting started with the Web (Начало работы в веб) и What are browser developer tools (Инструменты разработки браузера).
Основные инструменты
Инспектор страницы
Инструмент для просмотра и редактирования содержимого и макета страницы. Позволяет рассмотреть страницу с разных точек зрения, включая блочную модель, анимацию и grid компоновку.
Web консоль
Позволяет просматривать отладочные сообщения страницы и взаимодействовать с ней посредством JavaScript.
Отладчик JavaScript
Позволяет остановить, выполнять по шагам, исследовать и изменять JavaScript код выполняемый на странице.
Монитор сетевой активности
Показывает сетевые запросы возникающие в процессе загрузки страницы.
Performance Tools
Позволяет провести общий анализ отзывчивости вашего сайта, а также производительности 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
DebuggerInterface - 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
- Инструмент, помогающий находить ошибки для работы.
Присоединяйтесь к сообществу Developer tools
- IRC: #devtools (Узнать больше)
- Team info: Dev tools wiki
- Blog: Hacks blog