Какая правильная комбинация клавиш на клавиатуре вызывает инструменты разработки консоли разработчика
Обновлено: 23.11.2024
На этой странице перечислены все сочетания клавиш, используемые инструментами разработчика, встроенными в Firefox.
В первом разделе перечислены ярлыки для открытия каждого инструмента, а во втором разделе перечислены ярлыки, применимые к самой панели инструментов. После этого для каждого инструмента есть раздел, в котором перечислены сочетания клавиш, которые вы можете использовать в этом инструменте.
Поскольку ключи доступа зависят от региональных настроек, они не описаны на этой странице.
Открытие и закрытие инструментов
Эти ярлыки работают в главном окне браузера для открытия указанного инструмента. Те же самые ярлыки будут работать для закрытия инструментов, размещенных на панели инструментов, если этот инструмент активен. Для таких инструментов, как консоль браузера, которые открываются в новом окне, вам нужно закрыть окно, чтобы закрыть инструмент.
| Команда | Windows | macOS | Linux |
|---|---|---|---|
| Открыть панель инструментов (с активированным последним инструментом) | < td>Ctrl + Shift + ICmd + Opt + I | Ctrl + Shift + I | |
| Вывести Панель инструментов на передний план (если Панель инструментов находится в отдельном окне, а не на переднем плане) | Ctrl + Shift + I или F12 | Cmd + Opt + I или F12 | Ctrl + Shift + I или F12 |
| Закрыть панель инструментов (если панель инструментов находится в отдельном окне и на переднем плане) | Ctrl + Shift + I или F12 | Cmd + Opt + I или F12 | Ctrl + Shift + I или F12 |
| Открыть веб-консоль 1 | Ctrl + Shift + K | Cmd + Opt + K | Ctrl + Shift + K | < /tr>
| Переключить "Выбрать элемент со страницы" (открывает панель инструментов и/или фокусирует вкладку "Инспектор") | Ctrl + Shift + C | Cmd + Opt + C | Ctrl + Shift + C |
| Открыть редактор стилей | Shift + F7 | Shift + F7 * | Shift + F7 |
| Открыть профайлер | < td>Shift + F5Shift + F5 * | Shift + F5 | |
| Открыть сетевой монитор 2 < /th> | Ctrl + Shift + E | Cmd + Opt + E | Ctrl + Shift + E |
| Переключить режим адаптивного дизайна | Ctrl + Shift + M | Cmd + Opt + M | Ctrl + Shift + M |
| Открыть консоль браузера | Ctrl + Shift + J | Cmd + Shift + J | Ctrl + Shift + J |
| Открыть панель инструментов браузера | Ctrl + Alt + Shift + I | Cmd + Opt + Shift + I | Ctrl + Alt + Shift + I |
| Открыть блокнот | Shift + F4 | Shift + F4 * | Shift + F4 |
| Открыть WebIDE | Shift + F8< /td> | Shift + F8 * | Shift + F8 |
| Инспектор хранилища | Shift + F9 | Shift + F9 * | Shift + F9 |
| Открыть отладчик 3 | Ctrl + Shift + Z | Cmd + Opt + Z | Ctrl + Shift + Z |
Инструменты
Сочетания клавиш для панели инструментов.
Эти сочетания клавиш работают, когда панель инструментов открыта, независимо от того, какой инструмент активен.
Переключить панель инструментов между двумя последними режимами закрепления
Эти сочетания клавиш работают во всех инструментах, размещенных в наборе инструментов.
| Команда | Windows | macOS | 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 | macOS | Linux |
|---|---|---|---|
| Перейти к строке | Ctrl + J , Ctrl + G | Cmd + J , Cmd + G | Ctrl + J , Ctrl + G |
| Найти в файле | Ctrl + F | Cmd + F | Ctrl + F |
| Выбрать все | 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 |
| I ndent | Вкладка | Вкладка | Вкладка |
| Неотступность | < td>Shift + TabShift + Tab | Shift + Tab | |
| Переместить строку(и) вверх | Alt + Up | Alt + Up | Alt + Up |
| Переместить строки вниз | Alt + Down | Alt + Down | Alt + Down |
| Комментировать/раскомментировать строку(и) | Ctrl + / | Cmd + / | Ctrl + / |
Инспектор страниц
Сочетания клавиш для Инспектора страниц.
| Команда | Windows | macOS | Linux |
|---|---|---|---|
| Проверить элемент | Ctrl + Shift + C< /td> | Cmd + Shift + C | Ctrl + Shift + C |
Выбор узла
Эти ярлыки работают, пока активно средство выбора узлов.
| Команда | Windows | macOS | Linux |
|---|---|---|---|
| Выберите элемент под мышью и отмените режим выбора | < td>НажмитеНажмите | Нажмите | |
| Выберите элемент под мышью и оставайтесь в режиме выбора< /th> | Shift+щелчок | Shift+щелчок | Shift+щелчок |
Панель HTML
Эти ярлыки работают, пока вы находитесь на панели HTML инспектора.
| Команда | Windows | macOS | Linux |
|---|---|---|---|
| Удалить выбранный узел | Удалить | Удалить | Удалить |
| Отменить удаление узла | Ctrl + Z | Cmd + Z | Ctrl + Z |
| Повторить удаление узла | Ctrl + Shift + Z / Ctrl + Y | Cmd + Shift + Z / Cmd + Y | Ctrl + Shift + Z / Ctrl + Y |
| Перейти к следующему узлу (только расширенные узлы) | Стрелка вниз | Стрелка вниз | Стрелка вниз |
| Перейти к предыдущему узлу | Стрелка вверх | Стрелка вверх | Стрелка вверх |
| Перейти к первому узлу в дереве. | Главная | Главная | Главная | < /tr>
| Перейти к последнему узлу в дереве. | Конец | Конец | Конец |
| Развернуть d текущий выбранный узел | Стрелка вправо | Стрелка вправо | Стрелка вправо |
| Свернуть текущий выбранный узел | Стрелка влево | Стрелка влево | Стрелка влево |
| (Когда узел выбран) переместитесь внутрь узла, чтобы вы могли начать пошаговое выполнение атрибутов. | Enter | Return | Enter |
| Шаг вперед по атрибутам node | Tab | Tab | Tab |
| Шаг назад по атрибутам узел | Shift + Tab | Shift + Tab | Shift + Tab |
| (Когда атрибут выбран) начать редактирование атрибута | Enter | Return | Enter |
| Скрыть/показать выбранный узел | H | H | H |
| Выбрать поле поиска в области HTML | Ctrl + F | Cmd + F | Ctrl + F |
| Редактировать как HTML | F2 | F2 | F2 |
| Остановить редактирование HTML | F2 / Ctrl + Enter | F2 / Cmd + Return | F2 / Ctrl + Enter |
| Копировать внешний HTML-код выбранного узла | Ctrl + C | Cmd + C | Ctrl + С | Прокрутить выбранный узел в поле зрения | S | S | S |
| Найти следующее совпадение в разметке, когда поиск активен | Enter | Return | Enter | < /tr>
| Найти предыдущее совпадение в разметке, когда поиск активен | Shift+Enter | Shift+Return | Shift + Enter |
Панель навигации
Эти сочетания клавиш работают, когда навигационная панель находится в фокусе.
| Команда | Windows | macOS | Linux |
|---|---|---|---|
| Перейти к предыдущему элементу на панели навигации | Стрелка влево | Стрелка влево | Стрелка влево |
| Перейти к следующему элементу на панели навигации< /th> | Стрелка вправо | Стрелка вправо | Стрелка вправо |
| Фокус панели HTML< /th> | Shift + Tab | Shift + Tab | Shift + Tab |
| Фокус Панель CSS | Вкладка | Вкладка | Вкладка |
Панель CSS
Эти сочетания клавиш работают, когда вы находитесь на панели CSS Инспектора.
| Команда | Windows | macOS | Linux |
|---|---|---|---|
| Выделить фокус на поле поиска на панели CSS | Ctrl + F | Cmd + F | Ctrl + F |
| Очистить содержимое окна поиска (только когда окно поиска сфокусировано, и содержимое введено) | Esc | Esc | Esc |
| Перейти к свойствам и значениям | Tab | Tab | Tab |
| Переход назад по свойствам и значениям | Shift + Tab | Shift + Tab | Shift + Tab |
| Начать редактирование свойства или значения (только просмотр правил, когда свойство или значение выбрано, но еще не редактируется) | Ввод или пробел | Возврат или пробел | Ввод или пробел |
| Переход вверх и вниз по предложениям автозаполнения (Правила vi только при редактировании свойства или значения) | Стрелка вверх, стрелка вниз | Стрелка вверх, стрелка вниз | Стрелка вверх, стрелка вниз | td>
| Выберите текущее предложение автозаполнения (только для просмотра правил, когда редактируется свойство или значение) | Enter или Tab | Return или Tab | Enter или Tab |
| Увеличить выбранное значение на 1 | Стрелка вверх | Стрелка вверх | Стрелка вверх |
| Уменьшить выбранное значение на 1 | Вниз стрелка | Стрелка вниз | Стрелка вниз |
| Увеличить выбранное значение на 100 | Shift + Page Up | Shift + Page Up | Shift + Page Up |
| Уменьшить выбранное значение на 100 | Shift + Page Down | Shift + Page Down | Shift + Page Down |
| Увеличить выбранное значение на 10 | Shift + стрелка вверх | Shift + стрелка вверх | Shift + стрелка вверх< /td> |
| Уменьшить выбранное значение на 10 | Shift + стрелка вниз | Shift + стрелка вниз | < td>Shift + стрелка вниз|
| Увеличить выбранное значение на 0,1 | Alt + стрелка вверх ( Ctrl + стрелка вверх, начиная с Firefox 60 .) | Alt + стрелка вверх | Alt + стрелка вверх ( Ctrl + стрелка вверх, начиная с Firefox 60.) |
| Уменьшить выбранное значение на 0,1 | Alt + стрелка вниз ( Ctrl + стрелка вниз, начиная с Firefox 60). | Alt + стрелка вниз | Alt + Стрелка вниз ( Ctrl + Стрелка вниз, начиная с Firefox 60). |
| Показать/скрыть дополнительную информацию о текущем свойстве (только вычисляемое представление, когда свойство выбрано) | Ввод или пробел td> | Return or Space | Enter or Space |
| Открыть справочную страницу MDN о текущем свойстве (только для компьютерного представления, когда выбрано свойство) | F1 | F1 | F1 |
| Открыть текущий Файл CSS в редакторе стилей (только в представлении Computed, когда отображается дополнительная информация о свойстве и выделена ссылка на файл CSS). | Enter | Return | Введите |
Отладчик
| Команда | Windows | macOS | Linux |
|---|---|---|---|
| Закрыть текущий файл | Ctrl + W | Cmd + W | Ctrl + W |
| Поиск строки в текущем файле | < td>Ctrl + FCmd + F | Ctrl + F | |
| Поиск строки во всех файлы | Ctrl + Shift + F | Cmd + Shift + F | Ctrl + Shift + F |
| Найти следующий в текущем файле | Ctrl + G | Cmd + G | Ctrl + G |
| Поиск скриптов по имени | Ctrl + P | Cmd + P | Ctrl + P |
| Возобновить выполнение при достижении точки останова | F8 | F8 1 | F8 |
| Перешагнуть | F10 | F10 1 | F10 |
| Перейти к | F11 | F11 1 | F11 |
| Выйти | Shift + F11 | Shift + F11 1 | Shift + F11 |
| Переключить точку останова на текущей выбранной строке | Ctrl + B | Cmd + B | Ctrl + B |
| Переключить условную точку останова на текущей выбранной строке | Ctrl + Shift + B | Cmd + Shift + B | Ctrl + Shift + B |
Примечание. До Firefox 66 комбинация Ctrl + Shift + S в Windows и Linux или Cmd + Opt + S в macOS открывала/закрывала отладчик. Начиная с Firefox 66 и более поздних версий, это уже не так.
Инструменты разработчика Firefox — это набор инструментов веб-разработчика, встроенных в Firefox. Вы можете использовать их для проверки, редактирования и отладки HTML, CSS и JavaScript.
Этот раздел содержит подробные руководства по всем инструментам, а также информацию о том, как отлаживать Firefox для Android, как расширять DevTools и как отлаживать браузер в целом.
Если у вас есть отзывы о DevTools или вы хотите внести свой вклад в проект, вы можете присоединиться к сообществу DevTools.
Примечание. Если вы только начинаете заниматься веб-разработкой и использовать инструменты разработчика, вам помогут наши учебные документы — см. разделы Начало работы в Интернете и Что такое браузерные инструменты разработчика? для хорошей отправной точки.
Основные инструменты
Вы можете открыть Инструменты разработчика Firefox из меню, выбрав Инструменты > Веб-разработчик > Инструменты веб-разработчика или используя сочетание клавиш Ctrl + Shift + I или F12 в Windows и Linux или Cmd + Opt + I в macOS.
Меню с многоточием в правой части инструментов разработчика содержит несколько команд, позволяющих выполнять действия или изменять настройки инструментов.
| Эта кнопка появляется только при наличии нескольких фреймов на странице. Щелкните ее, чтобы отобразить список фреймов iframe на текущей странице, и выберите тот, с которым вы хотите работать. | |
| Нажмите эту кнопку, чтобы скриншот текущей страницы. (Примечание. Эта функция не включена по умолчанию и должна быть включена в настройках, прежде чем появится значок.) | |
| Переключает режим адаптивного дизайна. | |
| Открывает меню, которое включает параметры закрепления, возможность показать или скрыть разделенную консоль и настройки инструментов разработчика. Меню также содержит ссылки на документацию по веб-инструментам Firefox и сообществу Mozilla. | |
| Закрывает инструменты разработчика |
Инспектор страниц
Просмотр и редактирование содержимого и макета страницы. Визуализируйте многие аспекты страницы, включая блочную модель, анимацию и макеты сетки.
Веб-консоль
Просматривайте сообщения, регистрируемые веб-страницей, и взаимодействуйте со страницей с помощью JavaScript.
Отладчик JavaScript
Остановитесь, просмотрите и изучите код JavaScript, запущенный на странице.
Сетевой монитор
Просмотр сетевых запросов, сделанных при загрузке страницы.
Инструменты повышения производительности
Проанализируйте общую скорость отклика вашего сайта, JavaScript и производительность макета.
Режим адаптивного дизайна
Узнайте, как ваш веб-сайт или приложение будет выглядеть и вести себя на разных устройствах и в разных сетях.
Инспектор специальных возможностей
Предоставляет средства для доступа к дереву специальных возможностей страницы, позволяя вам проверить, что отсутствует или иным образом требует внимания.
Панель приложений
Предоставляет инструменты для проверки и отладки современных веб-приложений (также известных как прогрессивные веб-приложения). Сюда входит проверка сервис-воркеров и манифестов веб-приложений.
Примечание. Обобщающим термином для пользовательского интерфейса, в котором работают все инструменты разработчика, является панель инструментов.
Дополнительные инструменты
Эти инструменты разработчика также встроены в Firefox. В отличие от «Основных инструментов» выше, вы можете не использовать их каждый день.
Для получения новейших инструментов и функций разработчика попробуйте Firefox Developer Edition.
Подключение инструментов разработчика
Если вы откроете инструменты разработчика с помощью сочетаний клавиш или аналогичных элементов меню, они будут нацелены на документ, размещенный на текущей активной вкладке. Но вы также можете прикрепить инструменты к множеству других целей, как в текущем браузере, так и в других браузерах или даже на разных устройствах.
about:debugging Отладка надстроек, вкладок контента и рабочих процессов, работающих в браузере. Подключение к Firefox для Android Подключите инструменты разработчика к экземпляру Firefox, работающему на устройстве Android. Подключение к iframe Подключите инструменты разработчика к определенному iframe на текущей странице. Подключение к другим браузерам Подключите инструменты разработчика к Chrome на Android и Safari на iOS.
Отладка браузера
По умолчанию инструменты разработчика прикреплены к веб-странице или веб-приложению. Но вы также можете подключить их к браузеру в целом. Это полезно для браузера и разработки дополнений.
Консоль браузера Просматривайте сообщения, зарегистрированные самим браузером и надстройками, и запускайте код JavaScript в области действия браузера. Панель инструментов браузера Прикрепите инструменты разработчика к самому браузеру.
Расширение DevTools
Информацию о расширении инструментов разработчика Firefox см. в разделе Расширение инструментов разработчика в разделе «Расширения браузера» на MDN.
Миграция с Firebug
Firebug подошел к концу (подробности о том, почему Firebug продолжает жить в Firefox DevTools), и мы понимаем, что некоторые люди сочтут переход на другой, менее знакомый набор DevTools сложным. Чтобы упростить переход с Firebug на инструменты разработчика Firefox, мы написали удобное руководство — Миграция с Firebug.
Добавить
Если вы хотите помочь улучшить инструменты разработчика, эти ресурсы помогут вам начать работу.
Я хочу использовать Dev Tools для проверки элемента в состоянии наведения мыши; код mouseleave, очевидно, запустится, если я попытаюсь нажать кнопку паузы!
Если кто-нибудь в Chrome когда-либо читал эту страницу, знайте, что ни один из ярлыков не работает, если вы застряли в каком-то "цикле ошибок", когда вы получаете сотни сообщений и ошибок, записываемых на консоль каждую секунду, и вы пытаетесь остановить это!
5 ответов 5
Обновление: в Dev Tools есть много встроенных ярлыков (нажмите F1, чтобы просмотреть список). Приостановка выполнения скрипта — F8 (при просмотре вкладки «Источники», начиная с Chrome 45) или Ctrl + / .
Ярлык работает только в главном окне браузера, если инструменты разработчика уже открыты на вкладке "Источники".
Если приведенный выше ярлык не работает, я придумал однострочник, который можно поместить на страницу (или вставить в консоль Javascript) для достижения моей цели:
Это приведет к приостановке выполнения, когда вы нажмете F12 .
(отладчик — это оператор JavaScript, который вызывает точку останова.)
Работает ли CTRL + / под Linux или что-то в этом роде? Потому что CTRL + \ работает под Windows, и, по мнению других, это будет CMD + \ для MAC.
иногда горячие клавиши события закрывают элемент, который вы хотите проверить, здесь помогает setTimeout(function() < debugger; >, 1000)
Для меня нажатие F8 не останавливало выполнение скрипта, если DevTools не был не только открыт, но и с фокусом на панели "Источники". 1. Щелкните панель DevTools, чтобы выделить ее (убедитесь, что панель «Источники» открыта!). 2: Наведите указатель мыши на элемент, который хотите проверить, с помощью указателя мыши. 3: Теперь нажмите F8 (не нажимая на элемент или где-либо в главном окне, иначе DevTools снова потеряет фокус).
Справочные списки сочетаний клавиш Google для «Приостановить/возобновить выполнение скрипта»:
- F8 или Ctrl + \ (Windows)
- F8 или Cmd + \ (Mac)
Есть более простые способы проверки элементов в странных состояниях, таких как наведение курсора или активное действие. Сначала найдите узел DOM на панели «Элементы» Chrome Dev Tools. Теперь вы можете либо щелкнуть узел правой кнопкой мыши и посмотреть «Принудительное состояние элемента» в контекстном меню, либо выбрать узел и посмотреть на вкладке «Стили» и найти значок пунктирного прямоугольника с указателем мыши в правом верхнем углу. (рядом со значком +/плюс, который позволяет добавить новое правило CSS в element.style выбранного вами элемента).
Когда вы активируете одно из этих состояний, на левой границе панели элементов появляется небольшой кружок, указывающий на то, что вы переопределили естественное состояние элемента в этой строке.
Нативные веб-приложения, такие как Balsamiq Cloud, могут быть сложными для устранения неполадок, особенно когда речь идет о количестве браузеров и подключаемых модулей браузеров, доступных сегодня пользователям. Одна вещь, которая может помочь нам (и вам) выяснить, что происходит, — это консоль разработчика вашего браузера (или Javascript). Вот как его найти в большинстве современных браузеров.
Яблочное сафари
Прежде чем вы сможете получить доступ к консоли разработчика в Safari, сначала необходимо включить меню разработчика. Для этого перейдите в настройки Safari («Меню Safari» > «Настройки») и выберите вкладку «Дополнительно».
После включения этого меню вы найдете консоль разработчика, нажав «Разработка» > «Показать консоль Javascript».
Вы также можете использовать сочетание клавиш Option + ⌘ + C .
Консоль откроется либо в существующем окне Safari, либо в новом окне. Он автоматически выберет вкладку Консоль.
Google Chrome
Чтобы открыть консоль разработчика в Google Chrome, откройте меню Chrome в правом верхнем углу окна браузера и выберите Дополнительные инструменты > Инструменты разработчика.
Вы также можете использовать Option + ⌘ + J (в macOS) или Shift + CTRL + J (в Windows/Linux).
Консоль откроется либо в существующем окне Chrome, либо в новом окне. Возможно, вам придется выбрать вкладку Консоль.
Мозилла Фаерфокс
Чтобы открыть консоль разработчика в Firefox, щелкните меню Firefox в правом верхнем углу браузера и выберите Дополнительные инструменты > Консоль браузера.
Вы также можете использовать сочетание клавиш Shift + ⌘ + J (в macOS) или Shift + CTRL + J (в Windows/Linux).
Консоль браузера откроется в новом окне.
Майкрософт Эдж
Чтобы открыть консоль разработчика в Microsoft Edge, откройте меню Edge в правом верхнем углу окна браузера и выберите Дополнительные инструменты > Инструменты разработчика.
Вы также можете нажать CTRL + Shift + i, чтобы открыть его.
Консоль откроется либо в существующем окне Edge, либо в новом окне. Возможно, вам придется выбрать вкладку Консоль.
Читайте также: