Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

 

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

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

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

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

Создание

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

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

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

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

Веб-консоль
Смотрите сообщения от веб-страницы, и взаимодействуйте с ней при помощи JavaScript.
Инспектор
Просматривайте и изменяйте HTML и CSS код страницы.
Отладчик JavaScript
Останавливайте, выполняйте шаг за шагом, смотрите и изменяйте скрипты, запущенные на странице.
Сетевой монитор
Смотрите сетевые запросы, выполняющиеся при загрузке страницы.
Инспектор хранилища
Изучайте куки, локальное хранилище, IndexedDB и хранилище сессии, присутствующие на странице.
Испектор DOM
Исследуйте DOM свойства страницы, функции и т.д.
Панель инструментов разработчика
Интерфейс командной строки для инструментов разработчика.
Пипетка
Выбирайте цвет прямо со страницы.
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 профайлер и шкала скорости кадров.
Память
Узнаёт, какие объекты в памяти используются.
Запись частоты кадров
Смотрите часту кадров вашего сайта.
Waterfall
Посмотрите, что делает браузер, когда запускает ваш сайт.
Дерево вызовов
Узнавайте, как ваш JavaScript код тратит своё время.
Flame Chart
Смотрите, какие функции переполняют стек с помощью профилей.
Инструмент подсветки
Подсвечивает части страницы, перерисовываемые при каком-либо событии.
Логирование событий перерисовки
Смотрите события перерисовки в веб-консоли.
Сетевая производительность
Смотрите, какая часть вашего сайта грузится дольше всего.

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

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

Консоль браузера
Просмотривайте сообщения от самого браузера и дополнений, и запускайте 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.

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

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