Панель разработчика firefox: Веб-консоль — Инструменты разработчика Firefox

Содержание

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

Исследуйте, редактируйте и отлаживайте HTML, CSS и JavaScript на компьютерах и мобильных устройствах. Для получения последних обновлений для инструментов разработки скачайте Firefox Developer Edition.

Если вы ищете информацию по использованию инструментов веб-разработчика доступных в Firefox, вы зашли в правильное место — на этой странице даётся подробная информация обо всех основных и дополнительных инструментах веб-разработчика, а также информацию о том как подсоединять и настраивать Firefox для Android, как расширить набор инструментов разработчика, как настраивать браузер.
Пожалуйста, посмотрите описания инструментов разработчика, расположенные далее на этой странице. Если у вас возникнут замечания или вопросы об указанном наборе инструментов, то пришлите нам собщение на нашу почту или IRC канал ( соответствующие ссылки находятся внизу страницы). Если у вас возникнут замечания или вопросы, касающиеся документации, то напишите в MDN discourse.

На заметку: если вы только начинаете веб разработку и использование инструментов разработчика, наши документы по изучению веб разработки помогут вам — для начала посмотрите Getting started with the Web (Начало работы в веб) и What are browser developer tools (Инструменты разработки браузера).

Основные инструменты

Инспектор страницы

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

Web консоль

Позволяет просматривать отладочные сообщения страницы и взаимодействовать с ней посредством JavaScript.

Отладчик JavaScript

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

Монитор сетевой активности

Показывает сетевые запросы возникающие в процессе загрузки страницы.

Performance Tools

Позволяет провести общий анализ отзывчивости вашего сайта, а также производительности JavaScript кода и макета.

Режим адаптивного дизайна

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

Поддержка доступности

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

Больше инструментов

Эти инструменты разработчика также встроены в Firefox. В отличие от «Core Tools» описанных выше, могут не использоватся в повседневной работе.

Память: Выясните, какие объекты сохраняют память в использовании.
Storage Inspector: Проверьте файлы cookie, локальное хранилище, indexedDB и хранилище сеансов на странице.
DOM Property Viewer: Проверьте свойства DOM страницы, функции и т.д.
Панель инструментов разработчика: Интерфейс командной строки для инструментов разработчика.
Пипетка: Получите код любого цвета со страницы.
Scratchpad: Текстовый редактор, встроенный в Firefox, который позволяет вам писать и выполнять JavaScript
Редактор стилей: Просмотр и редактирование стилей CSS для текущей страницы.
Редактор шейдеров: Просмотр и редактирование вершинных и фрагментных шейдеров, используемых WebGL.
Редактор веб аудио: Изучите график аудиоузлов в аудиоконтексте и измените их параметры.
Делать скриншоты: Следайте скриншот всей страницы, или одного ее элемента.

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

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

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

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

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

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

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

Сделать вклад

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

Увлекитесь: Вики-страница Mozilla, объясняющая, как принять участие.
firefox-dev.tools: Инструмент, помогающий находить ошибки для работы.

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

В этом обзоре мы рассмотрим некоторые из замечательных инструментов разработчика, которые есть в браузере Firefox «из коробки», т.е. без установки дополнительных расширений.

Даже если Google Chrome является вашим основным браузером для разработки, в Firefox есть некоторые инструменты, которых нет в Chrome. Справедливо и обратное утверждение: в Chrome есть некоторые инструменты, которых нет у Firefox, но инструменты разработчика Firefox настолько полезны, что вы действительно выиграете, зная о них.

Примерно в 2018 году Firefox поручил специальной команде добавить инструменты для веб-разработки в этот замечательный браузер. Задача этой статьи — познакомить вас с некоторыми из наиболее примечательных инструментов Mozilla Firefox.

Для начинающих

Начну с того, что перечислю пару вещей, которые есть у инспектора. Нажмите F12, чтобы открыть его, и вы увидите стандартный макет инспектора с тремя панелями (окно браузера, источник HTML и редактор свойств). Нажав на кнопку в виде ..., вы можете изменить конфигурацию размещения этой панели.

Если вы когда-либо пользовались инспектором в любом браузере, все это будет вам знакомо. То же самое относится и к настройкам Режима адаптивного дизайна (Responsive Design Mode), которые позволяют вам просматривать веб-страницы для различных экранах благодаря имитации нужных областей просмотра.

Вы можете использовать ряд кнопок/выпадающих списков для выбора модели телефона/планшета, скорость загрузки и ориентацию экрана (портретная, альбомная).

Примечание: кстати, вы знали, что дополнить/уменьшить набор инструментов разработчика вы сможете, перейдя в настройки кликом по кнопке F1.

1. Инспекторы

Все инструменты браузера содержат несколько инспекторов: HTML-инспектор и CSS-инспектор, но в Firefox есть и другие. Один из таких примеров является довольно новым и дает нам возможность проверять переменные шрифты.

Инспектор шрифтов

Переменные шрифты имеют дополнительные параметры помимо параметров обычных шрифтов — откройте инспектор и посмотрите на вкладку «Шрифты» (она может быть ниже инспектора свойств в зависимости от ширины открытого Инспектора свойств). Вы можете посмотреть на все используемые на странице шрифты:

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

Flexbox-инспектор

Инструменты разработчика Firefox также включают в себя инспектор Flexbox, подсветку которого можно включать и выключать в нескольких местах. За счет клика на ‘flex’-кнопках, вы можете увидеть подсветку сетки flexbox-элементов.

Также можно посмотреть подробные свойства flexbox-элементов, переключившись на вкладку Разметка в Инспекторе. Можете посмотреть самостоятельно на примере разметки 2 колоночного flexbox-макета.

По каждому элементу также можно посмотреть данные, кликнув по стрелке вправо.

CSS Grid Inspector

В Firefox также есть замечательный инспектор CSS Grid — то, что вы могли бы осознать, проверив любой макет, использующий Grid:

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

Нажав на кнопку «grid», вы можете включить на вкладке Разметка маркеры, показывающие строки и столбцы, разрывы сетки и номера строк, а также имена областей, если они предусмотрены в коде.

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

Следующим инспектором, предлагаемым инструментами разработчика Firefox, является инспектор специальных возможностей. Chrome также имеет функции проверки доступности, но у Firefox они немного отличаются. Включите их, посетив вкладку «Поддержка доступности» (Shift + F12) в Инспекторе.

Для управления спецвозможностями нажмите на кнопку «Включить функции поддержки доступности»:

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

В некоторых случаях имеет смысл это сделать, т.к. при изменении каких-то настроек или css-свойств вы можете не заметить, что текст заголовков слился с фоном, например.

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

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

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

Инструмент редактирования формы

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

Этот инструмент также можно использовать со свойством shape-outside, что позволяет редактировать поле многоугольника вокруг исходной фигуры.

Редактор CSS-фильтров

В Инструментах разработчика Mozilla Firefox также есть редактор CSS-фильтров! Как и во всех доступных инструментах, нажмите значок рядом с соответствующим свойством, чтобы вызвать редактор / инспектор. В этом случае редактор фильтров позволяет вам манипулировать CSS-фильтрами, добавлять больше, удалять ненужные фильтры и сохранять предустановки, когда они могут понадобиться снова.

Просмотрщик изображений

Еще одна функция, которую вы вряд ли встретите в инструментах разработчика других браузеров, — это средство просмотра изображений. Наведите курсор на любой URL-адрес изображения в инспекторе CSS, и вы увидите удобный эскиз. Нажмите на него, и вы попадете в новое окно с изображением в нем.

Визуализатор изменений свойств группы CSS Transform

Возможность визуализации CSS-преобразований делает их создание намного проще, чем их кодирование. Например, при наведении указателя мыши на преобразование rotate() Firefox покажет вам исходную начальную позицию элемента вместе с новой позицией.

Точки позиционирования

Это прекрасный маленький бонусный инструмент. Когда элемент абсолютно позиционирован, щелкните по значку «absolute» на панели «Разметка» (Box model), чтобы отобразить маркеры, отображающие положение элемента. Нажмите и перетащите элемент за эти точки, чтобы поместить его в нужное вам положение без подгонки цифровых значений. Если же вам проще работать с числами, то клик по цифре, относящейся к какой-либо точке абсолютного позиционирования, позволит вам изменять значения, нажимая на клавиши ↓ ↑, чтобы увеличить (уменьшить) значение на 1 или, зажав клавишу Shift — на 10 единиц. То же относится и к относительно позиционированным элементам.

Удобные помощники

Здесь мы рассмотрим несколько полезных маленьких помощников, которые предлагает браузер Firefox.

Встроенная пипетка

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

Инструмент создания скриншотов

Инструмент создания скриншотов — это не то, что вы увидите по умолчанию, поэтому вам, возможно, придется включить его в настройках (сделать скриншот всей страницы). После того, как он станет доступен, вы увидите значок, который снимает скриншот всей страницы браузера и загружает его автоматически в папку загрузок (супер удобно!)

Дополнительные кнопки панели инструментов

Рядом с кнопкой снимка экрана можно добавить еще две иконки, если в настройках Инструментов разработчика (F1) вы установите еще 2 флажка:

Линейки
Инструмент измерения

Эти два полезных дополнения действительно полезны, если вы перфекционист!

Отображение обработчиков событий, записанных в JavaScript/jQuery

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

event — и можете просмотреть код функции, записанный для обработки данного события в JavaScript/jQuery.

На основе статьи 14 Firefox Developer Tools You Might Not Know About

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

Окно Инструменты включает в себя все встроенные в Firefox инструменты. Его можно открыть, выбрав «Инструменты разработки» из меню Веб разработка (в «Инструменты» на OS X и Linux, или «Firefox» в Windows), или активировав любой включённый туда инструмент (например, Отладчик JavaScript Debugger или Инспектор страниц). Ещё можно нажать Ctrl + Shift + I на Windows и Linux, или Cmd + Opt + I на OS X.

По умолчанию окно появляется прикреплённым к нижнему краю окна Firefox, но его можно и отсоединить. Вот как оно выглядит прикреплённым:

Само окно разделено на две части: панель инструментов вверху и главная панель внизу:

Режим Прикрепления

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

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

Панель содержит набор контролов (управляющих элементов интерфейса), с помощью которых можно выбрать инструмент или отсоединить/присоединить/закрыть окно.

Инструмент для выбора объекта

Крайняя левая иконка Панели инструментов служит для включения инструмента выбора различных элементов. Она позволяет кликом выбрать элемент кода, который Вам необходим для исследования. См. «Выбор элемента».

Основной набор инструментов

Далее располагается раздел кнопок, позволяющий активировать основные инструменты Панели. В этом разделе могут находится следующие инструменты:

Учтите, что в этом разделе не всегда могут быть видны все инструменты Панели: в этом разделе показываются только те инструменты, которые доступные в данном контексте (например, пока еще не все инструменты поддерживают функцию удалённой отладки. Таким образом, если элементом отладки, из-за которого открыта Панель инструментов, является объект, который не поддерживает функцию отладки Firefox, то в этом разделе будут показаны не все инструменты Основного набора).

Дополнительные инструменты

Дальше идёт ряд кнопок, которые можно добавлять и удалять через окно настроек инструментов разработки. По умолчанию этот ряд включает:

Следующие инструменты по умолчанию отсутствуют на панели, но их можно добавить в настройках:

Toolbox controls

Наконец, ряд кнопок, позволяющих:

закрыть окно
переключить место прикрепления окна между низом окна браузера и боковой стороной
переключиться между отдельным окном и прикреплённым к окну браузера

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

Кнопка «Настройки» () даёт вам доступ к настройкам самого Набора инструментов и находящихся в нём инструментов:

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

Эта группа галочек определяет, какие инструменты включаются в набор инструментов. Часто бывает, что новый инструмент добавляется в Firefox, но по умолчанию выключен.

Доступные кнопки инструментов

This group of checkboxes determines which «standalone tools» get buttons in the toolbar. This defaults to the node picker, the split console, and responsive design mode.

Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.

Темы

This enables you to switch between a light and a dark theme:

Общие настройки

Settings that apply to more than one tool. There’s just one of these:

Enable persistent logs: a setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.

Инспектор

Show browser styles: a setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector’s Rules view. This setting is new in Firefox 32. Note that this setting is independent of the «Browser styles» checkbox in the Inspector’s Computed view.
Default color unit: a setting to control how colors are represented in the inspector:

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

Профайлер JavaScript

Show Gecko platform data: a setting to control whether or not profiles should include Gecko platform symbols.

Настройки редактора

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

Определять стиль отступов: auto-indent new lines based on the current indentation
Автозакрытие скобок
Отступ с помощью пробелов
Размер отступа табуляции
Сочетания клавиш: choose the default CodeMirror keybindings, or keybindings from one of several popular editors:

Расширенные настройки

Отключить кэш: позволяет отключить кэш браузера, чтобы определить скорость загрузки всех данных из сети. Начиная с Firefox 33 и новее эта настройка сохраняемая. Это означает, что если Вы отключите кэш, закроете инструменты разработчика и откроете снова, то обнаружите, что кэш все еще отключен. Тем не менее кэширование автоматически будет включено когда инструменты разработчика закрыты.
Отключить JavaScript: позволяет выключить JavaScript (требуется перезагрузить страницу)
Enable Service Workers over HTTP: enable Service Worker registrations from insecure websites
Включить отладку chrome и дополнений: позволяет инструментам разработчика получить доступ к контексту самого браузера, а не только веб контента
Включить удаленную отладку: позволяет выполнять отладку удаленных экземпляров Firefox с помощью инструментов разработчика

Главная панель

The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.

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

Эта статья предлагает быстрый обзор основных разделов пользовательского интерфейса Инспектора страниц.

Она охватывает три основных компонента интерфейса Инспектора:

кнопка выбора элемента
панель HTML
панель CSS

Это руководство нарочно как можно более короткое. В нём ссылки на другие руководства, с подробностями об использовании Инспектора.

Кнопка выбора элемента

Инспектор даёт вам подробную информацию о выбранном сейчас элементе. Кнопка выбора элемента — один из способов выбрать элемент для рассмотрения:

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

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

Панель HTML

Инспектор разделён на две половины. Левую половину занимает панель HTML:

Чтобы узнать больше о структуре панели HTML, см. руководство по исследованию и редактированию.

Панель CSS

Правую сторону Инспектора занимает панель CSS:

Панель CSS имеет 5 режимов для просмотра различных данных:

Правила
Вычислено
Шрифты
Блоковая модель
Анимации

Переключаться между этими режимами можно с помощью вкладок наверху панели.

Просмотр правил

Вкладка «Правила» содержит список всех правил, которые применены к выбранному элементу, в порядке from most-specific to least-specific:

См. подробности в Исследование и редактирование CSS.

Просмотр вычисленного

Вкладка «Вычислено» показывает стили, вычисленные для выбранного элемента.

См. подробности в Исследование и редактирование CSS.

Просмотр шрифтов

Вкладка «Шрифты» показывает все используемые на странице шрифты вместе с небольшими образцами (которые до Firefox 36 можно было редактировать).

См. подробности в Просмотр шрифтов.

Вкладка «Блоковая модель»

Вкладка «Блоковая модель» отображает блоковую модель выбранного элемента. В данной вкладке можно выполнять редактирование свойств элемента. Для этого нужно двойным щелчком выбрать число на рисунке для редактирования.

См. подробности в Examine and edit the box model.

Вкладка «Анимации»

Вкладка «Анимации» показывает информацию об анимациях, применяемых к выбранному элементу, и кнопку, чтобы их приостановить:

См. подробности в Work with animations.

Отладка Firefox Desktop — Инструменты разработчика Firefox

Это руководство объясняет, как использовать Инструменты разработчика Firefox для отладки различных версий десктопного Firefox, запущенного на том же компьютере. В этом документе экземпляр Firefox, который будет отлаживаться, назовём отлаживаемый(debuggee), а тот, с которого производится отладка — отлаживающий (debugger, отладчик).

Включение удалённой отладки

Во-первых, убедитесь, что в обоих Firefox (отлаживаемый и отлаживающий) установлены галочки «Включить удалённую отладку» (Enable remote debugging) и «Включить инструменты отладки browser chrome и дополнений» (Enable chrome and add-on debugging), которые находятся в настройках Инструментов разработчика Firefox. Если у вас используется Firefox Developer Edition, то галочки уже установлены по умолчанию.

Это потребуется сделать только однажды. После перезагрузки настройки сохранятся.

Запуск сервера отладчика

Далее нужно стартовать сервер отладчика в отлаживаемом Firefox.

До Firefox 37

До Firefox 37: открыть Панель разработчика и введите команду:

listen 6000

Это укажет отлаживаемому прослушивать клиентов-отладчиков на порту 6000. Кроме этого нигде больше не используйте порт 6000.

После перезагрузки нужно будет ввести команду заново.

После Firefox 37

Начиная с Firefox 37 и далее описанный метод работает, но есть другой: запустите отлаживаемый из командной строки, передав ему параметр --start-debugger-server:

/path/to/firefox --start-debugger-server

Без аргументов параметр --start-debugger-server запустит прослушивание сервером 6000 порта. Для использования другого порта передайте его номер:

/path/to/firefox --start-debugger-server 1234

Отметьте: в Windows вызов start-debugger-server записывается с одним «минусом»:

firefox.exe -start-debugger-server 1234

Примечание: По умолчанию и по соображениям безопасности включена (через about:config) опция devtools.debugger.force-local. Если нужно отлаживать Firefox с другого компьютера, то измените её, но только в безопасной сети или за файерволом, чтобы предотвратить несанкционированный доступ.

Подключение

Есть два способа подключения: «Экран подключения» и «WebIDE».

Экран подключения

На отлаживающем Firefox в меню «Разработка» есть пункт «Соединиться…». Кликните его и увидите страницу:

Введите номер порта, заданный для отлаживаемого и нажмите «Connect». В отлаживаемом увидите диалог для подтверждения подключения:

Нажмите»OK» и вернитесь в отладчик. Появится такая страница:

Под «Available remote tabs» (Доступные удалённые вкладки) находится список всех вкладок отлаживаемого. Кликните в одну для соединения Инструментов разработчика Firefox c ней.
Под «Available remote add-ons» (Доступные удалёныне дополнения) находится список всех дополнений на отлаживаемом. Кликните в один для соединения Инструментов разработчика Firefox.
Под «Available remote processes» (Доступные удалённые процессы) — список процессов, запущенных в Firefox. Кликните «Main process» (Главный процесс) для соединения Инструментов разработчика с самим браузером.

WebIDE

На отлаживающем Firefox откройте WebIDE кликните «Select Runtime»/»Remote Runtime» (Удалённый Runtime):

Вас попросят предоставить имя компьютера и порт. Введите «localhost:6000» или другой номер порта, если прислушивается иной порт (смотря какой вы указали).

На отлаживаемом Firefox появится предупреждение:

Кликните OK. WebIDE подключится к главному процессу. Если вы захотите подключиться к вкладке, то в списке слева выберите нужную вкладку, которую будете отлаживать.

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

В этой статье мы рассмотрим «Инструменты для разработчиков» от браузера Firefox («DevTools»).

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

Нажмите на иконку меню справа от панели навигации, кликните по пункту «Веб-разработчика», «Инструменты разработчика».
Используйте комбинации клавиш Shift + F5 (Windows и macOS) для запуска инструмента «Производительность» и Ctrl + Shift + E (Windows) или Cmd + Option + E (macOS) для запуска инструмента «Сеть».
Кликните правой кнопкой мыши по любому месту страницы и выберите в контекстном меню пункт «Исследовать элемент».

В инструментах для разработчиков есть много параметров, которые помогают настраивать работу с системой. Например, параметры «Включить отметки времени» в веб-консоли или «Отключить HTTP-кеш», который используется для имитации производительности первой загрузки на всех страницах.

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

Сначала откройте инструменты для разработчиков, а затем:

нажмите кнопку «Настройки», представленную в панели инструментов;
нажмите клавишу F1, чтобы отобразить панель настроек поверх текущего инструмента;

Здесь можно выбрать инструменты по умолчанию, кнопки, которые необходимо отображать на панели инструментов, темы (темная, светлая, Firebug), а также другие дополнительные настройки.

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

Производительность при загрузке позволяет понять, на загрузку каких ресурсов тратится слишком много времени. Когда речь идет о производительности во время исполнения, нужно сосредоточиться на JavaScript и CSS, чтобы можно было оценить, на выполнение какого кода тратится большая часть времени и где возникают проблемы.

Инструмент «Сеть» отображает все сетевые запросы, которые выполнил Firefox (например, при загрузке страницы или отправке запросов XMLHttpRequests, запросов API Fetch и т. д.) в виде таблицы.

Этот инструмент также выводит HTTP-заголовки, связанные с запросом, HTTP-ответы и файлы cookie. Его также можно использовать для выполнения, отображения и сохранения результатов анализа производительности текущей загрузки страницы.

Инструмент можно использовать для определения того, сколько времени требуется браузеру на загрузку различных ресурсов веб-страницы. А также для мониторинга и выделения запросов, которые замедляют или блокируют загрузку веб-страницы. В панели «Сеть» вы увидите, когда запускаются основные события (DOMContentLoaded и load).

По каждому запросу в таблице отображается информация о времени, затраченном на загрузку ресурса.
Инструменты разработчика отмечают в отчете основные события жизненного цикла, такие как DOMContentLoaded и load. Синим цветом обозначается время, когда запускается событие DOMContentLoaded. Фиолетовая линия — когда происходит событие load.

Событие DOMContentLoaded возникает сразу после того, как HTML-документ был полностью загружен и проанализирован, не включая таблицы стилей CSS, изображения и фреймы.
Событие load запускается, когда загружен HTML-документ и все связанные с ним таблицы стилей, изображения и фреймы.

После того, как вы нажмете на запрос, с правой стороны отобразится панель с информацией о нем. Она состоит из нескольких вкладок: заголовки, параметры, ответ, тайминги и безопасность.

В этой панели представлено большое количество временных метрик, связанных с каждым запросом:

Заблокировано — время, проведенное в очереди ожидания подключения к сети.

Отправка — время, затраченное на отправку запроса на сервер.

Получение — это время, затраченное на получение ответа от сервера или, на чтение его из кеша (если он кэширован).

Ожидание — общее время ожидания клиента до получения первого байта. В сторонних инструментах анализа производительности оно называется TTFB или Time to First Byte.

Также есть тайминг поиск DNS — время, необходимое для обработки имени хоста сервера; соединения — время, затраченное на открытие TCP-соединения.

Сетевой монитор включает в себя инструмент для анализа производительности загрузки веб-страницы. Чтобы использовать его нужно:

кликнуть по иконке «Начать анализ быстродействия», которая расположена в нижней строке состояния;
перезагрузить страницу или выполнить сетевой запрос, когда открыт «Сетевой монитор».

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

количество кэшированных ответов;
общее количество запросов;
размер;
размер передачи;
время загрузки.

Веб-страница тестируется с пустым кэшем и с записанным кэшем.

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

Без кэширования — эмулирует первое посещение, когда ресурсы еще не кэшированы.
С кэшированием — эмулирует повторные посещения. Браузер уже кэшировал ресурсы приложения, что позволяет отбросить множество обращений к серверу.

Также можно использовать параметр «Отключить кэш», чтобы эмулировать первоначальную загрузку веб-страницы, когда инструменты для разработчиков открыты на любой вкладке.

JavaScript является однопоточным. Это означает, что браузер запускает код синхронно, но благодаря HTML5 Web Workers (стандартный API для многопоточного JavaScript) можно запускать код в разных потоках.

Этот единственный поток отвечает за выполнение всей работы, которую выполняет браузер. Например, рендеринг макета, вычисление стилей. Методы setTimeout, события click и load, извлечение ресурсов выполняются одним потоком.

Оптимальная производительность и время отклика обусловлены асинхронной моделью JavaScript. Но долго выполняемые функции могут привести к ухудшению производительности и увеличению времени отклика интерфейса.

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

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

Используя инструмент «Профайлер», можно найти длинные фрагменты кода, которые блокируют основной поток.

откройте веб-страницу, откройте панель «Профайлер», начните запись производительности;
подождите несколько секунд и остановите запись;
найдите долго выполняемые функции или события, обратите внимание на временные участки с низким FPS;
используйте другие инструменты для получения более подробной информации.

Обязательно анализируйте сценарии взаимодействия с пользователем во время процесса профилирования с различными частями интерфейса.

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

На диаграмме отображается показатель количества кадров в секунду в течение периода записи. Когда выполняется запись, эта диаграмма работает как счетчик FPS с интерактивными значениями.

График FPS показывает максимальные и минимальные значения частоты кадров, а также среднее значение частоты во время профилирования. Если вы используете анимацию, FPS должен быть 60 кадров в секунду.

Можно применять эту диаграмму для быстрого обнаружения визуальных пробелов (коллапсов) и несоответствий, которые обозначают серьезные падения частоты кадров. Что является доказательством наличия у браузера проблем с производительностью.

На приведенном ниже скриншоте демонстрируется диаграмма FPS с обрушением:

На диаграмме «Водопад» отображается разбивка действий и событий, связанных с браузером, например:

рендеринг или компоновка элементов;
применение стилей;
запросы кадров анимации;
отображение пикселей;

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

В представлении «Дерево вызовов» отображаются функции JavaScript, на которые браузер тратит большую часть времени. В нем отображаются: общее время активности, время автономной работы и их процентное отношение к общему времени профилирования.

Свое время — время, затрачиваемое только на операции, без учета функций, которые они вызывают.
Общее время — время, затраченное на операции и функции, которые они вызывают.

Дерево вызовов предоставляет статистические данные о том, на какие функции (агрегировано) браузер тратит большую часть времени.

Flame Chart отображает выполнение стеков вызовов JavaScript во время профилирования.

Накладывающиеся столбцы означают, что верхняя операция, которая существует непосредственно в CPU, вызывается нижней операцией.

Вы можете использовать частоту кадров, Flame Chart, представления «Водопад» и «Дерево вызовов», чтобы найти проблемы с производительностью выделить конкретные функции, требующие оптимизации.

Flame Chart показывает состояние стека вызовов определенных функций в определенное время записи.

В диаграммах и разделах применяются различные цвета для одних и тех же типов операций и ресурсов — JavaScript, CSS, рендеринг, отрисовка и т. д.

Вы можете использовать цвета для идентификации операций в разных представлениях.

Также можно фильтровать отдельные действия на диаграммах, и просматривать их через это меню.
Например, если вы работаете с CSS-анимацией, то нужно сосредоточиться на таких действиях, как «Пересчет стилей», «Применить изменений стилей», «Разбивка» и «Отрисовка». Вы можете выбрать только эти действия, чтобы уменьшить количество данных.

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

В этой статье мы рассказали, как начать работу с инструментами для разработчиков от Firefox. Дальнейшее знакомство с ними вы продолжите самостоятельно.

Данная публикация представляет собой перевод статьи «Performance Auditing: A Firefox Developer Tools Deep Dive» , подготовленной дружной командой проекта Интернет-технологии.ру

30 полезностей для Firefox Developer Tools / Хабр

Ниже приведены фичи и советы по использованию Firefox Developer Tools. Некоторые из них аналогичны возможностям инструментов в Chrome, для некоторых аналоги в других браузерах отсутствуют.

Осторожно, под катом много тяжёлых гифок!

Поиск по CSS селектору

Очень удобно использовать для:

элементов с `z-index`, на которые не получается кликнуть
визуально одинаковых элементов, для которых вы знаете селектор

Фильтр стилей

Вы можете отфильтровать правила CSS по любому селектору или свойству.

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

Выбор цвета и «Пипетка»

Кликните по любой точке с цветом в инспекторе, чтобы открыть удобный инструмент.

Смена представлений цвета

Shift+клик на цветной точке позволяет менять представление цвета (имя/hex/hsl/rgb).

Shift+клик на точке рядом с углом позволяет менять единицы измерения угла.

Редактирование кривых Безье функций времени

Кликните на точке с искривлённой линией рядом со свойством функции времени, чтобы открыть удобный редактор. Там будут как предопределённые функции, так и возможность настроить свой вариант вручную.

Применение CSS

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”)

Поддерживаются не все свойства, но весьма много.

Поиск по истории

Нажмите CTRL+R на Mac (и F9 на Windows и Linux). После чего используйте CTRL+R / CTRL+S (F9 / SHIFT+F9) для листания результатов вперёд / назад. В отличие от стрелочек, сочетания клавиш выше будут работать и между сессиями.

Скриншот страницы или её элемента

:screenshot — fullpage
:screenshot — selector .css-selector

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

Переключение контекста JavaScript

cd(iframe)

Вы можете переключаться на контекст iframe по селектору, используя cd().

Метки в таймере

console.time(“#devtricks”)
console.timeEnd(“#devtricks”)

Запустить таймер — console.time(“метка”),

остановить его — console.timeEnd(“метка”).

Условные точки останова

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

Поиск по имени функции или номеру строки

Поиск по имени файла — CMD + P на Mac (и CTRL + P на Windows и Linux).

Напечатайте «@» в том же инпуте, чтобы искать по объявлению функции в файле.

Напечатайте «:» в том же инпуте, чтобы быстро добраться до строки по её номеру.

Красивый вывод минифицированного кода

Нажмите на иконку {}, чтобы посмотреть красивый код вместо минифицированного.

Точки останова для URL

Точка станет активной при попытке обратиться к урлу и покажет ответственный за обращение код.

Отключить точки останова

Отключённые точки останутся доступны для включения и использования в будущем.

Редактирование и пересылка HTTP запросов

Редактируйте отправленные запросы и оправляйте их заново.

Фильтр запросов

Фильтр по домену — CMD + F на Mac (или CTRL + F на Windows и Linux).

Если вам нужно найти все запросы, без домена, добавьте чёрточку (—) перед фильтром.

Ограничение скорости

Проверьте как сайт будет загружаться при медленном интернете.

Горячее/Холодное профилирование

Кликните по иконке с таймером, чтобы посмотреть производительность запросов, который делает сайт. Страница будет загружена дважды — без кэша (эмулируя первую загрузку) и с кэшом (эмулируя повторное обращение).

Сохранение/Загрузка HAR

Сохраняем совершённые запросы в архивный формат. Удобно, чтобы обмениваться с коллегами по разработке.

Кастомное устройство

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

Ограничение скорости

Смотрим загрузку мобильной версии на мобильной скорости интернета.

Эмулирование тачей

За это отвечает маленькая иконка с «рукой». Эмулируются, в том числе долгие тапы.

Изменение User-Agent

Не забудьте включить в настройках пункт «Перезагружать страницу при смене UA» — сэкономите время.

Выравнивание вьюпорта по левому краю

Удобно, если хотите разместить панели справа (например, для дебага).

Редактирование Cookies

Сделайте двойной клик по ячейке, значение которой хотите поменять.

Удаление Cookies

Легче всего удалить куки, выделив их и нажав Backsapce.

Обратите внимание на опции контекстного меню. Очень удобной является опция «Удалить все для домена», но учтите, что домен должен быть точным (т.е. удаление кук для .medium.com не удалит их для medium.com)

Изменение Cookies в реальном времени

Оранжевым мигают куки, которые только что были изменены.

Статические снимки для IndexedDB

Увидеть изменения записей IndexedDB в реальном времени не получится, поэтому чтобы получить наиболее актуальный снимок БД, используйте кнопку «обновить».

Изменение отображаемых столбцов таблицы

Правый клик по заголовку таблицы поможет скрыть неинтересные столбцы.

На этом всё. Надеюсь, советы были вам полезны!

Настройки

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

Настройки открытия

Начиная с Firefox 62, значок для открытия настроек инструментов разработчика был перемещен в меню, доступ к которому можно получить, щелкнув / коснувшись … (эллипсис) в правой части вкладки.

Меню включает настройки для управления расположением инструментов разработчика. Вы можете выбрать между настройками по умолчанию в нижней части окон или переместить инструменты в левую или правую часть экрана. Эти настройки особенно полезны, если у вас широкоформатный монитор.Вы также можете открыть инструменты в отдельном окне.

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

Остальные настройки находятся на Панели настроек инструментов разработчика. Чтобы увидеть настройки, откройте любой из инструментов разработчика, а затем:

нажмите в меню команду «Настройки»:
или нажмите F1 для переключения между активным инструментом и панелью настроек

Панель настроек выглядит примерно так:

Категории

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

Эта группа флажков определяет, какие инструменты включены в наборе инструментов.Новые инструменты часто включены в Firefox, но не включены по умолчанию.

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

Эта группа флажков определяет, какие инструменты будут отмечены значком на панели инструментов Toolbox.

Начиная с Firefox 62, если установлен флажок «Выбрать iframe в качестве текущего целевого документа», значок будет отображаться на панели инструментов, пока отображается вкладка «Настройки», даже если текущая страница не содержит никаких iframe.

Обратите внимание, что в Firefox 52 мы сняли флажок для переключения кнопки «Выбрать элемент».Кнопка «Выбрать элемент» теперь всегда отображается.

шаблоны

Это позволяет вам выбрать одну из двух тем.

Общие настройки

Настройки, применимые к нескольким инструментам. Есть только один из них:

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

Если общие предпочтения не включены в настройки, журналы веб-консоли можно сохранить, используя URL-адрес about: config в адресной строке браузера, выполнив поиск по запросу: devtools.webconsole.persistlog ‘, затем переключите это значение на истинное

Инспектор

Показать стили браузера

Параметр, определяющий, должны ли стили, применяемые браузером (стили пользовательского агента) отображаться в представлении «Правила» инспектора. Обратите внимание, что этот параметр не зависит от флажка «Стили браузера» в вычисляемом представлении Инспектора.

Усечь атрибуты DOM

По умолчанию инспектор усекает атрибуты DOM, длина которых превышает 120 символов.Снимите этот флажок, чтобы предотвратить такое поведение. Этот параметр работает путем переключения предпочтения about: config «devtools.markup.collapseAttributes». Чтобы изменить пороговое значение, при котором атрибуты усекаются, вы можете отредактировать предпочтение about: config «devtools.markup.collapseAttributeLength».

Единица цвета по умолчанию

Параметр для управления представлением цветов в инспекторе:

шестигранник
HSL (А)
RGB (А)
название цвета
Как автор.

Включить панель макета

Включить панель экспериментального макета. Этот параметр существует только в Firefox Nightly.

Веб-консоль

Включить отметки времени: Управляет отображением отметок времени в веб-консоли. По умолчанию веб-консоль скрывает отметки времени.
Включить новый интерфейс консоли: Переключитесь на экспериментальную новую консоль. Этот параметр существует только в Firefox Nightly.

Отладчик

Включить исходные карты: Включить поддержку исходной карты в отладчике.
Включить новый интерфейс отладчика: Включите новый отладчик. Этот параметр существует только в Firefox Nightly.

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

Показать первоисточники: Когда используется препроцессор CSS, поддерживающий исходные карты, это позволяет редактору стилей отображать исходные исходные коды препроцессора, а не сгенерированный CSS.Узнайте больше о поддержке редактором стилей исходных карт CSS. Если этот параметр отмечен, в представлении «Правила инспектора страниц» также будут содержаться ссылки на исходные источники.
Автозаполнение CSS: Включите редактор стилей, чтобы предлагать варианты автозаполнения.

Поведение снимка экрана

Скриншот в буфер обмена: Когда вы щелкаете значок инструмента «Снимок экрана», скопируйте снимок экрана в буфер обмена (изображение все равно будет сохранено в папке «Загрузки»).Новое в Firefox 53.
Воспроизвести звук затвора камеры: Когда вы щелкаете значок инструмента «Снимок экрана», воспроизводится звук срабатывания затвора. Новое в Firefox 53.

Настройки редактора

Preferences для редактора исходного кода CodeMirror, который включен в Firefox и используется несколькими инструментами разработчика, включая Scratchpad и редактор стилей.

Обнаружить вмятину: Автоматический отступ новых строк на основе текущего отступа.
Кронштейны с автоматическим закрытием: Определяет, будет ли при вводе открывающего символа, такого как [ или {] редактор вставлять соответствующий закрывающий символ ] или } за вас.
Отступ с использованием пробелов: Если этот флажок установлен, отступы будут выполняться с использованием пробелов, когда отключено, редактор будет использовать табуляции.
Размер вкладки: Частота остановки табуляции в редакторе.Выберите 2, 4 или 8.
Связки клавиш: Выберите сочетания клавиш CodeMirror по умолчанию или сочетания клавиш в одном из нескольких популярных редакторов:

Расширенные настройки

Показать данные платформы Gecko: Параметр, определяющий, должны ли профили включать символы платформы Gecko.

Отключить HTTP-кеш: Отключите HTTP-кеш браузера, чтобы смоделировать производительность при первой загрузке на всех вкладках, на которых открыт Toolbox.Этот параметр сохраняется, а это означает, что если он установлен, кеширование будет отключено всякий раз, когда вы повторно открываете инструменты разработчика. Кэширование снова включается при закрытии инструментов разработчика. Обратите внимание, что эта опция не влияет на сервис-воркеров. Обратите внимание, что этот параметр назывался «Отключить кэш» в версиях Firefox до 49, но он был переименован, чтобы было понятнее, что это влияет на HTTP-кеш, а не на Service Workers / Cache API.
Отключить JavaScript: Перезагрузить текущую вкладку с отключенным JavaScript.
Включение Service Workers через HTTP: Разрешить регистрацию Service Worker с небезопасных веб-сайтов.
Включить браузер Chrome и дополнительные инструменты отладки: Позволяет использовать инструменты разработчика в контексте самого браузера, а не только веб-контент.
Включить удаленную отладку: Включите инструменты разработчика для отладки удаленных экземпляров Firefox.
Включить отладку рабочего: Включить панель в отладчике для отладки рабочих.
Примечание. Этот параметр был удален из пользовательского интерфейса в Firefox 56, поскольку эта версия поставляется с новым пользовательским интерфейсом отладчика, но его все еще можно включить для старого пользовательского интерфейса, установив для параметра devtools.debugger.workers значение true .

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

Firefox Developer Tools — это набор инструментов веб-разработчика, встроенный в Firefox. Вы можете использовать их для изучения, редактирования и отладки HTML, CSS и JavaScript.

Этот раздел содержит подробные руководства по всем инструментам, а также информацию о том, как отлаживать Firefox для Android, как расширить DevTools и как отлаживать браузер в целом.

Если у вас есть отзывы о DevTools или вы хотите внести свой вклад в проект, вы можете присоединиться к сообществу DevTools.

Вы можете открыть Firefox Developer Tools из меню, выбрав Tools > Web Developer > Toggle Tools или используя сочетание клавиш Ctrl + Shift + I или F12 в Windows и Linux или Cmd + Opt + I в macOS.

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

Инспектор страниц

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

Веб-консоль

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

Отладчик JavaScript

Остановка, пошаговое выполнение, изучение и изменение JavaScript, выполняемого на странице.

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

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

Инструменты производительности

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

Режим адаптивного дизайна

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

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

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

Примечание : собирательным термином для пользовательского интерфейса, внутри которого работают все DevTools, является Toolbox.

Эти инструменты разработчика также встроены в Firefox. В отличие от «Базовых инструментов», описанных выше, вы можете не использовать их каждый день.

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

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

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

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

Для получения информации о расширении Firefox DevTools см. Расширение инструментов разработчика в разделе Расширения браузера MDN.

Переход с Firebug

Firebug подошел к концу (см. Firebug продолжает жить в Firefox DevTools, чтобы узнать, почему), и мы понимаем, что некоторым людям будет сложно перейти на другой, менее знакомый набор DevTools. Чтобы упростить переход от Firebug к инструментам разработчика Firefox, мы написали удобное руководство — Переход с Firebug.

Внести вклад

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

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

Сетевой монитор показывает вам все сетевые запросы, которые Firefox делает (например, когда он загружает страницу или из-за XMLHttpRequests), сколько времени занимает каждый запрос, и детали каждого запроса.

Открытие сетевого монитора

Есть несколько способов открыть сетевой монитор:

Нажмите Ctrl + Shift + E ( Command + Option + E на Mac).
Выберите «Сеть» в меню веб-разработчика (которое является подменю меню «Инструменты» в OS X и Linux).
Щелкните значок гаечного ключа (), который находится на главной панели инструментов или в меню «Гамбургер» (), затем выберите «Сеть».

Сетевой монитор появится в нижней части окна браузера. При первом открытии сетевой монитор не отображает информацию о запросе. Только что открывшийся инструмент выглядит так:

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

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

Обзор пользовательского интерфейса

Пользовательский интерфейс разделен на четыре основных части:

Работа с сетевым монитором

В следующих статьях рассматриваются различные аспекты использования сетевого монитора:

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

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

Есть несколько способов открыть Toolbox:

выберите «Переключить инструменты» в меню веб-разработчика (в разделе «Инструменты» в OS X и Linux или «Firefox» в Windows)
щелкните значок гаечного ключа (), который находится на главной панели инструментов или в меню «Гамбургер» (), затем выберите «Переключить инструменты»
активирует любой инструмент, размещенный на панели инструментов (например, отладчик JavaScript или инспектор страниц).
нажмите Ctrl + Shift + I в Windows и Linux или Cmd + Opt + I в OS X.См. Также сочетания клавиш.

По умолчанию окно появляется прикрепленным к нижней части окна Firefox, но вы можете отсоединить его, если хотите. Вот как это выглядит в пристыкованном состоянии:

Само окно разделено на две части: панель инструментов вверху и основная панель внизу:

Примечание : Начиная с Firefox 62, вы можете перетаскивать вкладки на главной панели инструментов панели инструментов, чтобы изменить порядок инструментов по своему усмотрению (ошибка 1226272).

Режим стыковки

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

Панель инструментов содержит элементы управления для активации определенного инструмента, закрепления / плавания окна и закрытия окна.

Выбор узла

В крайнем левом углу есть кнопка для активации средства выбора узла. Это позволяет вам выбрать элемент страницы для проверки.См. «Выбор элементов».

Инструменты на базе Toolbox

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

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

Далее идет набор кнопок, которые можно добавить или удалить в настройках инструмента разработчика. По умолчанию этот массив включает:

Следующие инструменты не включены в панель инструментов по умолчанию, но вы можете добавить их в настройках:

Органы управления Toolbox

Наконец, есть ряд кнопок:

закройте окно
переключает окно между прикрепленным к нижней части окна браузера и прикрепленным к боковой стороне окна браузера
переключать окно между автономным и прикрепленным к окну браузера
доступ к настройкам инструмента разработчика

См. Отдельную страницу в настройках инструментов разработчика.

Основная панель

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

Сочетания клавиш

Эти ярлыки работают всякий раз, когда открыт набор инструментов, независимо от того, какой инструмент активен.

Команда	Окна	macOS	Linux
Перебирайте инструменты слева направо	`Ctrl` + `]`	`Команда` + `]`	`Ctrl` + `]`
Перебирать инструменты справа налево	`Ctrl` + `[`	`Команда` + `[`	`Ctrl` + `[`
Переключение между активным инструментом и настройками.	`F1`	`F1`	`F1`
Переключение набора инструментов между двумя последними режимами стыковки	`Ctrl` + `Сдвиг` + `D`	`Команд` + `Сдвиг` + `D`	`Ctrl` + `Сдвиг` + `D`
Переключить разделенную консоль (кроме случаев, когда консоль является текущим выбранным инструментом)	`Esc`	`Esc`	`Esc`

Эти ярлыки работают со всеми инструментами, размещенными в наборе инструментов.

Команда	Окна	macOS	Linux
Увеличить размер шрифта	`Ctrl` + `+`	`Команда` + `+`	`Ctrl` + `+`
Уменьшить размер шрифта	`Ctrl` + `-`	`Команда` + `-`	`Ctrl` + `-`
Сбросить размер шрифта	`Ctrl` + `0`	`Команда` + `0`	`Ctrl` + `0`