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

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

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

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

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

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

Инструменты для создания

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

Скратчпад: Текстовый редактор встроенный в Firefox. Предназначен для написания и выполнения кода на JavaScript.
Редактор стилей: Редактор для просмотра и редактирования стилей CSS для открытой страницы.
Редактор шейдеров: Редактор для просмотра и редактирования вертексов и фрагментов шейдеров с помощью WebGL.
Редактор Веб Аудио: Изменяйте и пробуйте граф аудио нод в аудио контексте.

Заглянуть внутрь и отладить

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

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

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

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

Менеджер Приложений: Проектируйте и разрабатывайте приложения для Firefox OS.
Симулятор Firefox OS: Запускайте и отлаживайте Ваши приложения для Firefox OS на эмуляторе для десктопа. Вам не обязательно обладать реальным устройством работающим под Firefox OS.
Предпросмотр Адаптивного Дизайна: Смотрите как Ваш вебсайт или приложение будет выглядеть на устройствах с различным размером экрана без ручного изменения размера окна браузера.
Отладка Firefox под Андроид: Подключите инструменты разработчика к Firefox на Андроиде.

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

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

Профайлер JavaScript: Определите место где Ваш JavaScript код тратит больше всего времени на выполнение
Инструмент Подсветки: Подсвечивает части страницы которые будут перерисованы при каком либо событии.
Reflow Event Logging: See reflow events in the web console.
Сетевая Производительность: Найдите какая часть Вашего вебсайта грузится дольше всего.

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

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

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

Extending the devtools

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

Протокол Удаленной Отладки: Протокол используется чтобы подключить Инструменты Разработчика Firefox к цели отладки например запущенному экземпляру Firefox или устройству Firefox OS.
Редактор Кода: Встроенный редактор кода Firefox может быть также встроен в Ваше расширение.
Интерфейс Debugger: Это API которое позволяет коду JavaScript отслеживать выполнение другого JavaScript кода. Инструменты Разработчика Firefox пользуются этим API при реализации отладчика JavaScript.
Кастомизированный вывод из Веб Консоли: Узнайте как можно расширить и кастомизировать вывод из Веб Консоли и Консоли Браузера.

Дополнительные источники информации

Этот раздел содержит список дополнительных источников, которые широко используются разработчиками. Мы включили в этот список несоклько расширений Firefox, полный список которых можно найти в разделе "Веб Разработка" на addons.mozilla.org.

Firebug: Очень популярный и мощный инструмент веб разработчика. Он включает в себя отладчик JavaScript, просмотрщик и редактор HTML и CSS, а также сетевой монитор.
Испектор DOM: Просматривайте, проверяйте и редактируйте DOM веб страниц или XUL окон..
Веб Разарботчик: Добавляет меню и панель инструментов к браузеру и содержит множество различных инструментов для веб разработки.

Инструменты Webmaker: Набор инструментов разработанных Mozilla, для того чтобы помочь облегчить начинающим изучать веб разработку.
W3C Валидаторы: На вебсайте W3C имеются инструменты для проверки корректности кода HTML и стилей CSS.
JSHint: Инструмент для анализа кода JavaScript.

Присоединись к сообществу Developer tools расширений

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

Почтовая рассылка

IRC: #devtools (Узнай больше)
Team info: Dev tools wiki
Blog: Hacks blog