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 |