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

Рассматривайте, редактируйте, и отлаживайте HTML, CSS, и JavaScript на дестопном и мобильном устройствах

Что нового в Firefox Developer Edition?

Firefox Developer Edition — это версия Firefox для разработчиков, где можно попробовать ту или иную функциональность или проверить поддержку веб стандартов ещё до того, как они войдут в официальный выпуск. Текущий выпуск Firefox Developer Edition включает в себя следующие обновления в инструментах разработчика:

>Делитесь своими идеями

Делитесь своими идеями

Просите добавить в инструменты разработчика новые функции или голосуйте за идеи других разработчиков.

Создание

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

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

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

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

Веб-консоль: Смотрите сообщения от веб-страницы, и взаимодействуйте с ней при помощи JavaScript.
Инспектор: Просматривайте и изменяйте HTML и CSS код страницы.
Отладчик JavaScript: Останавливайте, выполняйте шаг за шагом, смотрите и изменяйте скрипты, запущенные на странице.
Сетевой монитор: Смотрите сетевые запросы, выполняющиеся при загрузке страницы.
Инспектор хранения: Инспектируйте cookies, локальное хранилище, IndexedDB и хранения сессии, присутствующие на странице.
Панель инструментов разработчика: Интерфейс командной строки для инструментов разработчика.
3D-вид: 3-х мерная визуализация страницы.
Пипетка: Выбирайте цвет прямо со страницы.
Работа с iframes: Настраивайте таргетинг на конкретном iframe.

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

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

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

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

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

Инструменты производительности: Обновленный JS профайлер и шкала скорости кадров.

Профайлер JavaScript: Находит, где ваш JavaScript-код тратит больше всего времени на выполнение.
Инструмент подсветки: Подсветка частей страницы, перерисованных при каком-либо событии.
Логирование событий перерисовки: Смотрите события перерисовки в веб-консоли.
Сетевая производительность: Смотрите, какая часть вашего сайта грузится дольше всего.

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

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

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

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

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

Добавление новой панели с Devtools: Пишем дополнение, добавляющее в Инструменты разработчика новый инструмент.
Протокол удалённой отладки: Протокол используется для подключения Инструментов разработчика Firefox к отлаживаемой цели, например, к запущенному экземпляру Firefox или устройству Firefox OS.
Редактор исходного кода: Встроенный в Firefox редактор исходного кода также может быть встроен в ваше дополнение.
Интерфейс Debugger: Этот API позволяет JavaScript-коду отслеживать выполнение другого JavaScript-кода. Инструменты разработчика Firefox используют этот API для реализации отладчика JavaScript.
Пользовательский вывод из Веб-консоли: Узнайте, как можно расширить и настроить вывод из Веб-консоли и Консоли браузера.
Пример Devtools дополнения: Use these examples to understand how to implement a devtools add-on.

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

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

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

Инструменты Вебмейкера: Набор инструментов, разработанных Mozilla, нацеленных на начинающих веб-разработков.
Валидаторы W3C: На веб-сайте W3C имеются инструменты для проверки корректности кода HTML и стилей CSS.
JSHint: Инструмент для анализа кода JavaScript.

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

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

Почтовая рассылка

IRC: #devtools (Узнай больше)
Информация о команде: Вики инструментов разработчика
Блог: Блог Hacks