Режим разработчика mozilla firefox клавиши
Обновлено: 04.07.2024
Эта страница перечисляет все клавиатурные сокращения, используемые инструментами разработчика, встроенными в Firefox.
Первый раздел перечисляет сокращения для открытия каждого инструмента, а второй — сокращения, применимые в самом наборе инструментов. После них идут разделы, посвящённые каждый своему инструменту, которые перечисляют сокращения, используемые в соответствующем инструменте.
Поскольку клавиши доступа зависят от настроек локали, они не задокументированы на этой странице.
Открытие и закрытие инструментов
Эти клавиатурные сокращения работают в главном окне браузера для открытия определённого инструмента. Если инструмент содержится в наборе инструментов, комбинация закрывает его, если он был активен. Инструменты, которые открываются в новом окне, вроде «Консоли браузера», закрываются при закрытии их окна.
| Команда | Windows | OS X | Linux |
|---|---|---|---|
| Набор инструментов (открывается последний активированный инструмент) | Ctrl + Shift + I | Cmd + Opt + I | Ctrl + Shift + I |
| Перенос Набора инструментов на передний план (если он в отдельном окне и в фоне) | Ctrl + Shift + I or F12 | Cmd + Opt + I or F12 | Ctrl + Shift + I or F12 |
| Закрыть Набор инструментов (если он в отдельном окне и на переднем плане) | Ctrl + Shift + I or F12 | Cmd + Opt + I or F12 | Ctrl + Shift + I or F12 |
| Веб-консоль 1 | Ctrl + Shift + K | Cmd + Opt + K | Ctrl + Shift + K |
| Инспектор | Ctrl + Shift + I | Cmd + Opt + I | Ctrl + Shift + I |
| Отладчик | Ctrl + Shift + S | Cmd + Opt + S | Ctrl + Shift + S |
| Редактор стилей | Shift + F7 | Shift + F7 1 | Shift + F7 |
| Профайлер | Shift + F5 | Shift + F5 1 | Shift + F5 |
| Сеть | Ctrl + Shift + Q | Cmd + Opt + Q | Ctrl + Shift + Q |
| Панель разработки (включение и выключение) | Shift + F2 | Shift + F2 1 | Shift + F2 |
| Режим адаптивного дизайна (включение и выключение) | Ctrl + Shift + M | Cmd + Opt + M | Ctrl + Shift + M |
| Консоль браузера 2 | Ctrl + Shift + J | Cmd + Shift + J | Ctrl + Shift + J |
| Инструменты разработчика браузера (с Firefox 39) | Ctrl + Alt + Shift + I | Cmd + Opt + Shift + I | Ctrl + Alt + Shift + I |
| Простой редактор JavaScript | Shift + F4 | Shift + F4 | Shift + F4 |
| WebIDE | Shift + F8 | Shift + F8 | Shift + F8 |
| Инспектор Хранилища 3 | Shift + F9 | Shift + F9 | Shift + F9 |
Набор инструментов
Эти сокращения работают только при открытом наборе инструментов, независимо от текущего активного инструмента.
| Команда | Windows | OS X | Linux |
|---|---|---|---|
| Циклическая смена инструментов слева направо | Ctrl + ] | Cmd + ] | Ctrl + ] |
| Циклическая смена инструментов справа налево | Ctrl + [ | Cmd + [ | Ctrl + [ |
| Показать настройки инструментов разработчика | Ctrl + Shift + O | Cmd + Shift + O | Ctrl + Shift + O |
| Переключение между активной вкладкой панели инструментов и настройками Панели инструментов (новое в Firefox 43) | F1 | F1 | F1 |
| Переключение Панели инструментов между двумя последними Режимами прикрепления (новое в Firefox 41) | Ctrl + Shift + D | Cmd + Shift + D | Ctrl + Shift + D |
| Показать/скрыть Консоль в любой вкладке панели инструментов (кроме вкладки Консоль) | Esc | Esc | Esc |
Эти сокращения работают для всех инструментов, находящихся в окне набора инструментов.
| Команда | Windows | OS X | Linux |
|---|---|---|---|
| Увеличить размер шрифта | Ctrl + + | Cmd + + | Ctrl + + |
| Уменьшить размер шрифта | Ctrl + - | Cmd + - | Ctrl + - |
| Сбросить размер шрифта | Ctrl + 0 | Cmd + 0 | Ctrl + 0 |
Редактор исходного кода
Эта таблица перечисляет клавиатурные сокращения по умолчанию для редактора исходного кода.
Вместо них в разделе Настройки редактора настроек инструментов разработчика, вы можете выбрать схему привязки клавиш Vim, Emacs или Sublime Text.
Для этого откройте страницу about:config , выберите настройку devtools.editor.keymap и присвойте ей значение "vim", "emacs" или "sublime". Если вы сделаете это, выбранная схема привязки будет использоваться для всех инструментов разработчика, использующих редактор исходного кода. Вам нужно будет повторно открыть редактор, чтобы изменения вступили в силу.
Начиная с Firefox 33 и выше, настройки схемы привязки клавиш выставляются в разделе Настройки редактора настроек инструментов разработчика, и вы можете установить её там вместо ручного редактирования about:config .
| Команда | Windows | OS X | Linux |
|---|---|---|---|
| Перейти к строке | Ctrl + J | Cmd + J | Ctrl + J |
| Найти в файле | Ctrl + F | Cmd + F | Ctrl + F |
| Найти далее | Ctrl + G | Cmd + G | Ctrl + G |
| Выделить всё | Ctrl + A | Cmd + A | Ctrl + A |
| Вырезать | Ctrl + X | Cmd + X | Ctrl + X |
| Копировать | Ctrl + C | Cmd + C | Ctrl + C |
| Вставить | Ctrl + V | Cmd + V | Ctrl + V |
| Отменить | Ctrl + Z | Cmd + Z | Ctrl + Z |
| Повторить | Ctrl + Shift + Z / Ctrl + Y | Cmd + Shift + Z / Cmd + Y | Ctrl + Shift + Z / Ctrl + Y |
| Отступ | Tab | Tab | Tab |
| Убрать отступ | Shift + Tab | Shift + Tab | Shift + Tab |
| Переместить строки вверх | Alt + вверх | Alt + вверх | Alt + вверх |
| Переместить строки вниз | Alt + вниз | Alt + вниз | Alt + вниз |
| За-/раскомментировать строки | Ctrl + / | Cmd + / | Ctrl + / |
Инспектор
| Команда | Windows | OS X | Linux |
|---|---|---|---|
| Открыть инспектор | Ctrl + Shift + C | Cmd + Shift + C | Ctrl + Shift + C |
Панель HTML
Эти клавиатурные сокращения работают, пока вы находитесь в Панели HTML инспектора.
Навигационная цепочка
Следующие сокращения работают при фокусе на навигационной цепочке.
| Команда | Windows | OS X | Linux |
|---|---|---|---|
| Переместиться на предыдущий элемент | Left arrow | Left arrow | Left arrow |
| Переместиться на следующий элемент | Right arrow | Right arrow | Right arrow |
| Переключить фокус на Панель HTML в Инспекторе | Shift + Tab | Shift + Tab | Shift + Tab |
| Переключить фокус на CSS-панель в Инспекторе | Tab | Tab | Tab |
Панель CSS
Эти клавиатурные сокращения работают, пока вы находитесь в Панели CSS в Инспекторе.
Ниже приведены фичи и советы по использованию Firefox Developer Tools. Некоторые из них аналогичны возможностям инструментов в Chrome, для некоторых аналоги в других браузерах отсутствуют.
Осторожно, под катом много тяжёлых гифок!
Поиск по CSS селектору
Очень удобно использовать для:
- элементов с `z-index`, на которые не получается кликнуть
- визуально одинаковых элементов, для которых вы знаете селектор
Фильтр стилей
Вы можете отфильтровать правила CSS по любому селектору или свойству.
Для селекторов фильтр выделит цветом селекторы в списке правил. Для свойств инструмент развернёт все свойства, содержащие ваш фильтр, выделит их цветом, а так же скроет правила, где свойств из фильтра не содержится.
Выбор цвета и «Пипетка»
Кликните по любой точке с цветом в инспекторе, чтобы открыть удобный инструмент.
Смена представлений цвета
Shift+клик на цветной точке позволяет менять представление цвета (имя/hex/hsl/rgb).
Shift+клик на точке рядом с углом позволяет менять единицы измерения угла.
Редактирование кривых Безье функций времени
Кликните на точке с искривлённой линией рядом со свойством функции времени, чтобы открыть удобный редактор. Там будут как предопределённые функции, так и возможность настроить свой вариант вручную.
Применение CSS
Поддерживаются не все свойства, но весьма много.
Поиск по истории
Нажмите CTRL+R на Mac (и F9 на Windows и Linux). После чего используйте CTRL+R / CTRL+S (F9 / SHIFT+F9) для листания результатов вперёд / назад. В отличие от стрелочек, сочетания клавиш выше будут работать и между сессиями.
Скриншот страницы или её элемента
Гораздо удобнее просто указать селектор, чем пытаться точно выделить нужную область мышкой.
Переключение контекста JavaScript
Вы можете переключаться на контекст iframe по селектору, используя cd().
Метки в таймере
Запустить таймер — console.time(“метка”),
остановить его - console.timeEnd(“метка”).
Условные точки останова
Для создания точки надо сделать правый клик на номере строки. Точка будет активной только при выполнении условия.
Поиск по имени функции или номеру строки
Поиск по имени файла — CMD + P на Mac (и CTRL + P на Windows и Linux).
Напечатайте "@" в том же инпуте, чтобы искать по объявлению функции в файле.
Напечатайте ":" в том же инпуте, чтобы быстро добраться до строки по её номеру.
Красивый вывод минифицированного кода
Нажмите на иконку <>, чтобы посмотреть красивый код вместо минифицированного.
Точки останова для URL
Точка станет активной при попытке обратиться к урлу и покажет ответственный за обращение код.
Отключить точки останова
Отключённые точки останутся доступны для включения и использования в будущем.
Редактируйте отправленные запросы и оправляйте их заново.
Фильтр запросов
Фильтр по домену — CMD + F на Mac (или CTRL + F на Windows и Linux).
Если вам нужно найти все запросы, без домена, добавьте чёрточку (-) перед фильтром.
Ограничение скорости
Проверьте как сайт будет загружаться при медленном интернете.
Горячее/Холодное профилирование
Сохранение/Загрузка HAR
Сохраняем совершённые запросы в архивный формат. Удобно, чтобы обмениваться с коллегами по разработке.
Кастомное устройство
Просматривайте, как будет выглядеть сайт для устройств с кастомным разрешением.
Ограничение скорости
Смотрим загрузку мобильной версии на мобильной скорости интернета.
Эмулирование тачей
За это отвечает маленькая иконка с «рукой». Эмулируются, в том числе долгие тапы.
Изменение User-Agent
Не забудьте включить в настройках пункт «Перезагружать страницу при смене UA» — сэкономите время.
Выравнивание вьюпорта по левому краю
Удобно, если хотите разместить панели справа (например, для дебага).
Редактирование Cookies
Сделайте двойной клик по ячейке, значение которой хотите поменять.
Удаление Cookies
Легче всего удалить куки, выделив их и нажав Backsapce.
Изменение Cookies в реальном времени
Оранжевым мигают куки, которые только что были изменены.
Статические снимки для IndexedDB
Увидеть изменения записей IndexedDB в реальном времени не получится, поэтому чтобы получить наиболее актуальный снимок БД, используйте кнопку «обновить».
Веб-обозреватели предназначены не только для обычных пользователей, но и для разработчиков, которые тестируют инструменты и создают веб-сайты. В определенных условиях консоль может понадобиться и обычному юзеру. Открыть ее можно в любом браузере, и способы этого часто одинаковые.
Открытие консоли разработчика в браузерах
Для девелоперов в браузере есть несколько инструментов, которые позволяют им профессионально заниматься веб-разработкой. Одним из них является консоль, которая позволяет отслеживать разные события. Открывать ее можно по-разному, и далее мы рассмотрим различные варианты этого действия. Для Яндекс.Браузера у нас есть отдельная статья, а обладателям других браузеров предлагаем ознакомиться с материалом ниже.
Способ 1: Горячие клавиши
Каждый веб-обозреватель поддерживает управление горячими клавишами, и в большинстве своем эти комбинации одинаковы.
Способ 2: Контекстное меню
Через контекстное меню также можно вызвать консоль разработчика. Сами действия абсолютно одинаковы.
Google Chrome
Opera
Mozilla Firefox
Способ 3: Меню браузера
Через меню также не составит труда попасть в искомый раздел.
Google Chrome
Opera
Mozilla Firefox
Способ 4: Запуск при старте браузера
Тем, кто постоянно связан с разработкой, необходимо всегда держать консоль открытой. Чтобы каждый раз не вызывать ее заново, браузеры предлагают задать ярлыку определенные параметры, которые автоматически вызывают консоль, когда через этот ярлык будет запускаться веб-обозреватель.
Google Chrome
Теперь консоль разработчика будет автоматически открываться вместе с браузером.
Mozilla 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.
Читайте также: