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

Создание

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

Простой редактор JavaScript

Текстовый редактор, встроенный в Firefox. Предназначен для написания и выполнения кода на JavaScript.

Редактор стилей

Позволяет просматривать и редактировать CSS-стили текущей страницы.

Редактор шейдеров

Позволяет просматривать и редактировать вершинные и фрагментные шейдеры, используемые WebGL.

Редактор веб-аудио

Позволяет изучать граф аудио-узлов в аудио-контексте и изменять их параметры.

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

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

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

Это окно предоставляет единый интерфейс для доступа к большинству инструментов разработчика в Firefox.

Веб-консоль

Просмотр сообщений с веб-страницы, и взаимодействие с ней при помощи JavaScript.

Инспектор

Просмотр и изменение HTML и CSS страницы.

Отладчик JavaScript

Остановка, пошаговое выполнение, просмотр и изменение JavaScript, работающего на странице.

Сетевой монитор

Просмотр сетевых запросов, выполненные при загрузке страницы.

Инспектор хранилища

Изучение кук, локального хранилища, базы IndexedDB и хранилища сессии, присутствующих на странице.

Испектор DOM

Исследование DOM-свойств страницы, функций и другого.

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

Интерфейс командной строки для инструментов разработчика.

Удалённая отладка

Подключение к Firefox удалённо с другого компьютера.

Пипетка

Выбор цвета прямо со страницы.

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 профайлер и шкала скорости кадров.

Память

Выяснение, какие объекты, содержащиеся в памяти, используются.

Запись частоты кадров

Просмотр частоты кадров (FPS) вашего сайта.

Waterfall

Выяснение, что делает браузер, когда запускает ваш сайт.

Дерево вызовов

Узнайте, на что ваш JavaScript-код тратит своё время.

Flame Chart

Просмотр функций в стеке с помощью профилирования производительности.

Инструмент подсветки

Подсветка частей страницы, перерисовываемых при каком-либо событии.

Логирование событий перерисовки

Просмотр событий перерисовки в веб-консоли.

Сетевая производительность

Выяснение, какая часть вашего сайта грузится дольше всего.

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

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

Консоль браузера

Просмотр сообщений от браузера и дополнений, и запуск JavaScript-кода в контексте браузера.

Панель инструментов браузера

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

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

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

Добавление новой панели в инструменты разработчика

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

Протокол удалённой отладки

Протокол используется для подключения Инструментов разработчика Firefox к отлаживаемой цели, например, к запущенному экземпляру Firefox или устройству Firefox OS.

Редактор исходного кода

Встроенный в Firefox редактор исходного кода, который также может быть встроен в ваше дополнение.

Интерфейс Debugger API

Этот API позволяет JavaScript-коду отслеживать выполнение другого JavaScript-кода. Инструменты разработчика Firefox используют этот API для реализации отладчика JavaScript.

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

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

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

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

Get Involved

Wiki-страница Mozilla, объясняющая, как можно принять участие.

firefox-dev.tools

Инструмент, который поможет найти ошибки, над которыми ведётся работа.

Firebug

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

Испектор DOM

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

Web Developer

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

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

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

Валидаторы W3C

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

ESLint

Инструмент-анализатор JavaScript-кода с поиском шаблонных проблем разработки и вероятных источников ошибок.