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

 

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

Создание

Инструменты для создания веб-сайтов и веб-приложений.

Простой редактор JavaScript
Текстовый редактор, встроенный в Firefox. Предназначен для написания и выполнения кода на JavaScript.
Редактор стилей
Позволяет просматривать и редактировать CSS-стили текущей страницы.
Редактор шейдеров
Позволяет просматривать и редактировать вершинные и фрагментные шейдеры, используемые WebGL.
Редактор веб-аудио
Позволяет изучать граф аудио-узлов в аудио-контексте и изменять их параметры.

Изучение и отладка

Просматривайте, изучайте и отлаживайте веб-сайты и веб-приложения.

Окно "Инструменты разработчика"
Это окно предоставляет единый интерфейс для доступа к большинству инструментов разработчика в Firefox.
Веб-консоль
Просмотр сообщений с веб-страницы, и взаимодействие с ней при помощи JavaScript.
Инспектор
Просмотр и изменение HTML и CSS страницы.
Отладчик JavaScript
Остановка, пошаговое выполнение, просмотр и изменение JavaScript, работающего на странице.
Сетевой монитор
Просмотр сетевых запросов, выполненные при загрузке страницы.
Инспектор хранилища
Изучение кук, локального хранилища, базы IndexedDB и хранилища сессии, присутствующих на странице.
Испектор DOM
Исследование DOM-свойств страницы, функций и другого.
Панель инструментов разработчика
Интерфейс командной строки для инструментов разработчика.
Удалённая отладка
Подключение к Firefox удалённо с другого компьютера.
Пипетка
Выбор цвета прямо со страницы.
about:debugging
Панель для отладки дополнений и workers
Работа с iframes
Как выбрать конкретный iframe.

Мобильная разработка

Инструменты для мобильной разработки.

Адаптивный дизайн
Просмотр, как выглядит ваш сайт или приложение на экранах различных размеров, без изменения размера окна браузера.
Менеджер приложений
Менеджер приложений заменён на WebIDE.
WebIDE
Создание, редактирование, запуск и отладка веб-приложения, используя Симулятор Firefox OS или реальное Firefox OS устройство. WebIDE - это замена Менеджеру приложений, которая доступна, начиная с Firefox 33 или выше.
Симулятор Firefox OS
Запуск и отладка ваши приложений для Firefox OS на эмуляторе для компьютера. Вам не обязательно обладать реальным устройством, работающим на Firefox OS.
Отладка Firefox для Android
Подключение инструментов разработчика к "Firefox для Android".
Отлаживайте Firefox для Android с помощью WebIDE
Отладка Firefox 36+ для настольных компьютеров и Firefox 35+ для Android стала проще.
Valence
Подключайте инструменты разработчика для Chrome на Android и Safari на iOS

Производительность

Диагностика и исправление проблем с производительностью.

Инструменты производительности
Обновленный JS профайлер и шкала скорости кадров.
Память
Выяснение, какие объекты, содержащиеся в памяти, используются.
Запись частоты кадров
Просмотр частоты кадров (FPS) вашего сайта.
Waterfall
Выяснение, что делает браузер, когда запускает ваш сайт.
Дерево вызовов
Узнайте, на что ваш JavaScript-код тратит своё время.
Flame Chart
Просмотр функций в стеке с помощью профилирования производительности.
Инструмент подсветки
Подсветка частей страницы, перерисовываемых при каком-либо событии.
Логирование событий перерисовки
Просмотр событий перерисовки в веб-консоли.
Сетевая производительность
Выяснение, какая часть вашего сайта грузится дольше всего.

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

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

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

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

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

Добавление новой панели в инструменты разработчика
Пишем дополнение, добавляющее в Инструменты разработчика новый инструмент.
Протокол удалённой отладки
Протокол используется для подключения Инструментов разработчика Firefox к отлаживаемой цели, например, к запущенному экземпляру Firefox или устройству Firefox OS.
Редактор исходного кода
Встроенный в Firefox редактор исходного кода, который также может быть встроен в ваше дополнение.
Интерфейс Debugger API
Этот API позволяет JavaScript-коду отслеживать выполнение другого JavaScript-кода. Инструменты разработчика Firefox используют этот API для реализации отладчика JavaScript.
Пользовательский вывод в Веб-консоль
Узнайте, как можно расширить и настроить вывод в Веб-консоль и Консоль браузера.
Примеры дополнения инструментов разработчика
Используйте эти примеры, для понимания, как работают дополнения инструментов разработчика.

Ваш вклад

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

Get Involved
Wiki-страница Mozilla, объясняющая, как можно принять участие.
firefox-dev.tools
Инструмент, который поможет найти ошибки, над которыми ведётся работа.

Дополнительные источники информации

Этот раздел содержит список дополнительных источников, которые не поддерживаются командой разработки Mozilla, но широко используются разработчиками. Мы включили в этот список несколько расширений Firefox, полный список которых можно найти в разделе «Веб-разработка» на addons.mozilla.org.

Firebug
Очень популярный и мощный инструмент веб-разработчика. Он включает в себя отладчик JavaScript, просмотрщик и редактор HTML и CSS, а также сетевой монитор.
Испектор DOM
Просмотр, проверка и редактор DOM веб-страниц или XUL-окон.
Web Developer
Добавляет меню и панель инструментов к браузеру. Содержит множество различных инструментов для веб-разработки.
Инструменты Вебмейкера
Набор инструментов, разработанных Mozilla, нацеленных на испольщование начинающими веб-разработками.
Валидаторы W3C
На веб-сайте W3C имеются инструменты для проверки корректности кода HTML и стилей CSS.
ESLint
Инструмент-анализатор JavaScript-кода с поиском шаблонных проблем разработки и вероятных источников ошибок.

Присоединяйтесь к сообществу Инструментов разработчика

Выберите удобный способ для общения: