Google Chrome DevTools — это мощный набор инструментов для разработчиков, который входит в состав браузера Google Chrome. Он предоставляет широкий функционал для анализа веб-страниц, отладки кода, мониторинга производительности, тестирования различных параметров и взаимодействия с веб-приложениями. Освоение горячих клавиш в DevTools может значительно ускорить работу и повысить продуктивность, особенно если вы часто используете эти инструменты для работы с веб-кодом.
🛠️ Открытие DevTools
Для начала работы с DevTools важно знать, как быстро открыть и закрыть инструменты.
| Сочетание клавиш | Действие |
|---|---|
F12 | Открыть / закрыть DevTools |
Ctrl + Shift + I | Открыть / закрыть DevTools |
Ctrl + Shift + J | Открыть консоль DevTools |
Ctrl + Shift + C | Открыть инструменты выбора элементов |
Ctrl + Shift + P | Открыть панель команд |
Esc | Открыть/закрыть консоль |
🧭 Навигация по панелям
Google Chrome DevTools предоставляет множество панелей для различных задач, например, инспекции элементов, анализа сетевых запросов и работы с JavaScript. Вот горячие клавиши для навигации между ними.
| Сочетание клавиш | Действие |
|---|---|
Ctrl + 1 | Переключиться на панель «Элементы» |
Ctrl + 2 | Переключиться на панель «Консоль» |
Ctrl + 3 | Переключиться на панель «История» |
Ctrl + 4 | Переключиться на панель «Сеть» |
Ctrl + 5 | Переключиться на панель «Приложения» |
Ctrl + 6 | Переключиться на панель «Источники» |
Ctrl + 7 | Переключиться на панель «Снимки» |
Ctrl + 8 | Переключиться на панель «Память» |
Ctrl + 9 | Переключиться на панель «Сетевые запросы» |
Ctrl + Shift + D | Разделить DevTools на два окна (вертикально) |
🧩 Работа с элементами (Elements)
Инструмент Elements позволяет анализировать HTML и CSS-структуру страницы, а также изменять элементы в реальном времени.
| Сочетание клавиш | Действие |
|---|---|
Ctrl + Shift + C | Включить/выключить инструмент выбора элементов |
Ctrl + Shift + E | Включить панель для редактирования стилей элемента |
Ctrl + Shift + F | Найти элемент в документе |
Ctrl + F | Найти по тегам и аттрибутам элементов |
Esc | Закрыть текущую панель поиска |
F2 | Редактировать выбранный элемент |
Ctrl + Shift + M | Переключиться в режим мобильного устройства |
🔄 Работа с JavaScript (Console)
Консоль — важнейший инструмент для отладки и выполнения JavaScript кода в реальном времени. Она позволяет не только выводить ошибки, но и выполнять код, тестировать запросы и взаимодействовать с DOM.
| Сочетание клавиш | Действие |
|---|---|
Ctrl + Shift + J | Открыть консоль DevTools |
Ctrl + L | Очистить консоль |
Ctrl + Enter | Выполнить текущую команду в консоли |
Up Arrow | Перейти к предыдущей введённой команде |
Down Arrow | Перейти к следующей введённой команде |
Tab | Автодополнение команды в консоли |
Ctrl + Shift + I | Инспектор — открыть DevTools в новом окне консоли |
🌐 Анализ Сети (Network)
Network панель позволяет отслеживать все сетевые запросы и ответы, анализировать производительность и загружаемые ресурсы.
| Сочетание клавиш | Действие |
|---|---|
Ctrl + R | Перезагрузить страницу |
Ctrl + Shift + R | Перезагрузить страницу с отключённым кэшем |
Ctrl + Shift + P | Открыть панель команд |
F5 | Перезагрузить страницу |
Ctrl + Shift + E | Открыть панель ресурсов (ресурсы, файлы) |
🧑💻 Программирование и отладка (Sources)
Панель Sources предоставляет мощные инструменты для отладки JavaScript, управления исходными кодами и паузой выполнения скриптов.
| Сочетание клавиш | Действие |
|---|---|
Ctrl + P | Открыть файл по имени |
Ctrl + Shift + O | Открыть/перейти к символу в файле |
Ctrl + Shift + F | Поиск по всем файлам |
F8 | Пауза/продолжение выполнения скрипта |
F10 | Шаг в следующий оператор |
F11 | Перейти в следующую функцию |
Ctrl + Shift + B | Открыть/закрыть панель отладчиков |
⚙️ Панель настроек (Settings)
Для быстрого доступа к настройкам DevTools можно использовать горячие клавиши для работы с параметрами.
| Сочетание клавиш | Действие |
|---|---|
Ctrl + , | Открыть настройки DevTools |
Ctrl + Shift + I | Открыть DevTools с новым окном настроек |
📊 Производительность и аналитика
| Сочетание клавиш | Действие |
|---|---|
Ctrl + Shift + P | Открыть панель команд |
Ctrl + E | Включить/выключить запись в панели Performance |
Ctrl + Shift + Q | Снять или начать запись в панели Performance |