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

Инструменты разработчика 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.

Готов сразу других для работы

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

Оцените статью
clickpad.ru
Добавить комментарий