Инструменты разработчика Firefox — это набор инструментов веб-разработчика, встроенных в Firefox. Вы можете использовать их для проверки, редактирования и отладки HTML, CSS и JavaScript.
В этом разделе содержатся подробные руководства по всем инструментам, а также информация о том, как отлаживать Firefox для Android, как для расширения DevTools и для отладки браузера в целом.
Если у вас есть какие-либо отзывы о DevTools или вы хотите внести свой вклад в проект, вы можете присоединиться к сообществу DevTools.
Примечание . Если вы только начинаете заниматься веб-разработкой и используете инструменты разработчика, наша учебная документация поможет вам — см. Начало работы в Интернете и Что такое инструменты разработчика браузера? для хорошей отправной точки.
Основные инструменты
Вы можете открыть Инструменты разработчика Firefox из меню, выбор Инструменты > Веб-разработчик > Переключить инструменты или использовать сочетание клавиш Ctrl + Shift + I или F12 в Windows и Linux или Cmd + Opt + I в macOS.
Меню с многоточием в правой части инструментов разработчика содержит несколько команд, позволяющих вы выполняете действия или изменяете настройки инструмента.
|
Эта кнопка появляется только при наличии нескольких iframe на странице. Щелкните его, чтобы отобразить список окон iframe на текущей странице, и выберите тот, с которым вы хотите работать. |
|
Нажмите эту кнопку, чтобы сделать снимок экрана текущей страницы. ( Примечание: эта функция не включена по умолчанию и должна быть включена в настройках, прежде чем появится значок.) |
|
Включает режим адаптивного дизайна. |
|
Открывает меню, которое включает параметры закрепления, возможность показать или скрыть разделение Консоль и настройки инструментов разработчика. В меню также есть ссылки на документацию для Firefox Web Tools и сообщества Mozilla. |
|
Закрывает Инструменты разработчика |
Инспектор страниц
Просмотр и редактирование содержимого и макета страницы. Визуализируйте многие аспекты страницы, включая блочную модель, анимацию и макеты сетки.
Веб-консоль
Просматривайте сообщения, регистрируемые веб-страницей, и взаимодействуйте со страницей с помощью JavaScript.
Отладчик JavaScript
Остановка, пошаговое выполнение, изучение и изменение JavaScript, выполняющегося на странице.
Сетевой монитор
Просматривайте сетевые запросы, сделанные при страница загружена.
Инструменты производительности
Проанализируйте общую отзывчивость вашего сайта, производительность JavaScript и макета.
Режим адаптивного дизайна
Посмотрите, как работает ваш веб-сайт или приложение будет выглядеть и вести себя на разных устройствах и типах сетей.
Инспектор специальных возможностей
Предоставляет средства для доступа к дереву доступности страницы, позволяя вам проверить, что отсутствует или требуется внимание.
Панель приложения
Предоставляет инструменты для проверки и отладки современных веб-приложений (также известных как прогрессивные веб-приложения). Это включает проверку сервис-воркеров и манифестов веб-приложений.
Примечание : собирательный термин для пользовательского интерфейса внутри которого все DevTools живут, находится Панель инструментов.
Дополнительные инструменты
Эти инструменты разработчика также встроены в Fire Fox. В отличие от «Базовых инструментов», описанных выше, вы можете не использовать их каждый день.
- Память
- Выясните, какие объекты сохранение используемой памяти.
- Storage Inspector
- Проверка файлов cookie, локального хранилища, indexedDB и хранилища сеансов, присутствующих на странице.
- Средство просмотра свойств DOM
- Проверьте свойства, функции и т. Д. DOM страницы.
- Пипетка
- Выберите цвет на странице.
- Редактор стилей
- Просмотр и редактирование стилей CSS для текущей страницы.
- Создание снимков экрана
- Сделайте снимок экрана всей страницы или отдельного элемента.
- Измерьте часть страницы
- Измерьте определенную область веб-страницы.
- Линейки
- Наложение горизонтальных и вертикальных линеек на веб-страницу
Чтобы получить новейшие инструменты и функции для разработчиков, попробуйте Firefox Developer Edition.
Загрузить Firefox Developer Edi ция
Подключение инструментов разработчика
Если вы открываете инструменты разработчика с помощью сочетаний клавиш или эквивалентных пунктов меню, они будут нацелены на документ, размещенный на текущей активной вкладке. Но вы также можете прикрепить инструменты к множеству других целей, как в текущем браузере, так и в разных браузерах или даже на разных устройствах..
- about: debugging
- Отладка надстроек, вкладок содержимого и рабочих процессов, работающих в браузере.
- Подключение к Firefox для Android
- Подключите инструменты разработчика к экземпляру Firefox, работающему на устройстве Android.
- Подключение к iframe
- Подключите инструменты разработчика к определенному iframe на текущей странице.
- Подключение к другим браузерам
- Подключите инструменты разработчика к Chrome на Android и Safari на iOS.
Отладка браузера
По умолчанию инструменты разработчика прикреплены к веб-страницу или веб-приложение. Но вы также можете подключить их к браузеру в целом. Это полезно для разработки браузеров и надстроек.
- Консоль браузера
- Просматривайте сообщения, регистрируемые самим браузером и надстройки и запустите код JavaScript в области браузера.
- Панель инструментов браузера
- Прикрепите Инструменты разработчика к самому браузеру.
Расширение DevTools
Для получения информации о расширении Firefox DevTools см. Расширение инструментов разработчика в разделе «Расширения браузера» MDN .
Переход с Firebug
Срок службы Firebug подошел к концу (подробнее см. Firebug в Firefox DevTools. почему), и мы понимаем, что некоторым людям будет сложно перейти на другой, менее знакомый набор инструментов DevTools. Чтобы упростить переход от Firebug к инструментам разработчика Firefox, мы написали удобное руководство — Переход с Firebug.
Contribute
Если вы хотите помочь улучшить инструменты разработчика, эти ресурсы помогут вам начать работу.
- Примите участие
- Наше сообщество на веб-сайте объясняется, как принять участие.
- bugs.firefox-dev.tools
- Инструмент, помогающий находить ошибки и работать над ними.
Developer Edition
Версия Firefox специально для веб-разработчиков.
Загрузить Firefox Developer Edition
Последние функции в Firefox
Firefox Developer Edition заменяет канал Aurora в процессе разработки Firefox. Как и в Aurora, новые функции появляются в выпуске Developer Edition каждые шесть недель, после того, как они будут стабилизированы в ночных сборках.
При использовании версии Developer Edition вы получаете доступ к инструментам и функциям платформы. , опережающих релизов Firefox на 12 недель.
Откройте, что нового в Firefox Developer Edition.
Другая тема
Сюда входит более быстрый доступ к инструментам разработчика.
Экспериментальные инструменты разработчика
Мы включили экспериментальные инструменты, которые еще не готовы для основного выпуска.
Например, Developer Edition включает дополнение Valence, которое позволяет подключать инструменты разработчика Firefox к другим браузерам, таким как Chrome на Android и Safari на iOS.
Отдельный профиль
Firefox Developer Edition использует профиль, отдельный от других версий Firefox, установленных на вашем компьютере . Это означает, что вы можете легко запустить версию Developer Edition вместе с вашим выпуском или бета-версией Firefox.
Внимание: Это означает, что при первом запуске Developer Edition вы увидите совсем не настроенный браузер, без дополнений, закладок, истории. Если хотите иметь одни и те же настройки в Developer Edition и версии Firefox, можете использовать Firefox Sync.
Готов сразу других для работы
Мы установили опции по умолчанию специально для веб-разработчиков. Например, по умолчанию включена отладка хрома и удалённая отладка.
