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

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

Что нового в Авроре?

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

WebIDE: новое окружение для разработки и отладки веб-приложений
Вы можете редактировать ключевые кадры @keyframes и временные функции анимации
Теперь в Инспекторе видны слушатели событий
В Редакторе стилей появилась боковая панель с перечислением медиа-правил @media
Теперь в Инспекторе вы можете добавлять новые правила CSS и редактировать селекторы
Появилось три новых команды панели разработки: folder (папка), highlight (подсветить) и inject (внедрить)

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

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

Создание

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

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

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

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

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

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

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

Менеджер приложений: Проектируйте и разрабатывайте приложения для Firefox OS.
Симулятор Firefox OS: Запускайте и отлаживайте ваши приложения для Firefox OS на эмуляторе для десктопа. Вам не обязательно обладать реальным устройством, работающим под Firefox OS.
Просмотр адаптивного дизайна: Смотрите, как ваш веб-сайт или приложение будут выглядеть на устройствах с различными размерами экранов без изменения размера окна браузера.
Отладка Firefox под Андроид: Подключите инструменты разработчика к Firefox для Андроида.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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