mozilla

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

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

This translation is incomplete. Please help translate this article from English.

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

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

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

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

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

Просите добавить в инструменты разработчика новые функции или голосуйте за идеи других разработчиков.

Создание

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

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

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

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

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

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

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

Менеджер приложений
Менеджер приложений заменён на WebIDE.
WebIDE
Замена Менеджера приложений, доступная начиная с Firefox 33.
Симулятор Firefox OS
Запускайте и отлаживайте ваши приложения для Firefox OS на эмуляторе для десктопа. Вам не обязательно обладать реальным устройством, работающим под Firefox OS.
Просмотр адаптивного дизайна
Смотрите, как ваш веб-сайт или приложение будут выглядеть на устройствах с различными размерами экранов без изменения размера окна браузера.
Отладка Firefox под Андроид
Подключите инструменты разработчика к Firefox для Андроида.
Отлаживайте Firefox для Android с помощью WebIDE
Для Firefox 36+ для настольных компьютеров и Firefox 35+ для Android, есть способ проще.
Valence
Подключайте инструменты разработчика для Chrome на Android и Safari на iOS

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

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

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

 

 

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

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

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

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

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

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

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

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