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

Создание

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

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

Пользовательский вывод из Веб-консоли

Узнайте, как можно расширить и настроить вывод из Веб-консоли и Консоли браузера.

Пример дополнения инструментов разработчика

Используйте эти примеры, чтобы понять, как работают дополнения инструментов разработчика.

Firebug

Очень популярный и мощный инструмент веб-разработчика. Он включает в себя отладчик JavaScript, просмотрщик и редактор HTML и CSS, а также сетевой монитор.

Испектор DOM

Просматривайте, проверяйте и редактируйте DOM веб-страниц или XUL-окон.

Web Developer

Добавляет меню и панель инструментов к браузеру и содержит множество различных инструментов для веб-разработки.

Инструменты Вебмейкера

Набор инструментов, разработанных Mozilla, нацеленных на начинающих веб-разработков.

Валидаторы W3C

На веб-сайте W3C имеются инструменты для проверки корректности кода HTML и стилей CSS.

JSHint

Инструмент для анализа кода JavaScript.