Существует множество способов открыть инструменты разработчика Chrome. Выберите наиболее удобный для вас способ из этого исчерпывающего справочника.
Доступ к инструментам разработчика можно получить с помощью интерфейса Chrome или клавиатуры:
- Из выпадающих меню в Chrome .
- С помощью специальных сочетаний клавиш можно открыть Elements , Console или последнюю использованную панель.
Кроме того, узнайте, как настроить автоматическое открытие инструментов разработчика при открытии каждой новой вкладки .
Откройте инструменты разработчика из меню Chrome.
Если вы предпочитаете пользовательский интерфейс, вы можете получить доступ к инструментам разработчика через выпадающие меню в Chrome.
Откройте панель «Элементы», чтобы просмотреть DOM или CSS.
Чтобы проверить элемент, щелкните правой кнопкой мыши по нему на странице и выберите «Проверить элемент» .
В инструментах разработчика открывается панель «Элементы» , и выбирается элемент в дереве DOM. На вкладке «Стили» отображаются правила CSS, примененные к выбранному элементу.
Откройте последнюю использованную вами панель из главного меню Chrome.
Чтобы открыть последнюю панель инструментов разработчика, нажмите кнопку справа от адресной строки и выберите «Дополнительные инструменты» > «Инструменты разработчика» .
В качестве альтернативы, вы можете открыть последнюю панель с помощью сочетания клавиш. Подробнее см. в следующем разделе.
Открывайте панели с помощью сочетаний клавиш: Elements, Console или последнюю открытую панель.
Если вы предпочитаете использовать клавиатуру, нажмите сочетание клавиш в Chrome в зависимости от вашей операционной системы:
| ОС | Элементы | Консоль | Ваша последняя панель |
|---|---|---|---|
| Windows или Linux | Ctrl + Shift + C | Ctrl + Shift + J | Ф12 Ctrl + Shift + I |
| Мак | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
Вот простой способ запомнить сочетания клавиш:
- C означает CSS.
- J означает JavaScript.
- I обозначает ваш выбор.
Сочетание клавиш C открывает панель «Элементы» в режиме инспектора . В этом режиме при наведении курсора на элементы на странице отображаются полезные всплывающие подсказки. Вы также можете щелкнуть любой элемент, чтобы просмотреть его CSS на вкладке «Элементы > Стили» .
Полный список сочетаний клавиш для инструментов разработчика см. в разделе «Сочетания клавиш» .
Откройте инструменты разработчика и перезагрузите страницу с кэшированием или без него.
При открытых инструментах разработчика вы можете перезагрузить страницу тремя способами. В главной панели действий окна Chrome нажмите и удерживайте кнопку « и выберите один из вариантов:
Обычная перезагрузка . Использует кэш для ускорения времени перезагрузки.
Сочетание клавиш: Cmd + R (macOS) или Ctrl + R (Windows/Linux).
Принудительная перезагрузка . Обходит кэш, но не очищает его.
Сочетание клавиш: Cmd + Shift + R (macOS) или Ctrl + Shift + R (Windows/Linux).
Очистка кэша и принудительная перезагрузка . Очищает кэш для всех сайтов перед перезагрузкой.
Автоматическое открытие инструментов разработчика при открытии каждой новой вкладки
Запустите Chrome из командной строки и передайте флаг --auto-open-devtools-for-tabs :
Закройте все запущенные экземпляры Chrome.
Запустите ваше любимое приложение терминала или командной строки.
В зависимости от вашей операционной системы выполните следующую команду:
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsОкна:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
Инструменты разработчика будут автоматически открываться в каждой новой вкладке, пока вы не закроете Chrome.
Что дальше?
Далее посмотрите следующее видео, чтобы узнать о некоторых полезных сочетаниях клавиш и настройках для более быстрой навигации по инструментам разработчика.
Для более практического обучения ознакомьтесь с инструкцией по настройке DevTools .