mozilla

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

This translation is in progress.

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

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

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

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

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

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

Создание

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

Простой редактор 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.

Add a new panel to the devtools
Пишем дополнение, добавляющее в Инструменты разработчика новый инструмент.
Протокол удалённой отладки
Протокол используется для подключения Инструментов разработчика Firefox к отлаживаемой цели, например, к запущенному экземпляру Firefox или устройству Firefox OS.
Редактор исходного кода
Встроенный в Firefox редактор исходного кода также может быть встроен в ваше дополнение.
Интерфейс Debugger
Этот API позволяет JavaScript-коду отслеживать выполнение другого JavaScript-кода. Инструменты разработчика Firefox используют этот API для реализации отладчика JavaScript.
Пользовательский вывод из Веб-консоли
Узнайте, как можно расширить и настроить вывод из Веб-консоли и Консоли браузера.
Example devtools add-ons
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.

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

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