Советы и хитрости Chrome DevTools

На этой странице представлена шпаргалка с советами и хитростями по использованию инструментов разработчика Chrome (DevTools), включая операции отладки, мониторинг сети, анализ производительности и многое другое.

Панель Elements (Элементы)

Действие	Сочетание клавиш
Открыть DevTools	F12 или Ctrl + Shift + I
Переключить панель устройства	Ctrl + Shift + M
Обновить и очистить кэш	Ctrl + Shift + R
Просмотреть контекстное меню элемента	Правой кнопкой мыши
Редактировать элемент	Enter
Удалить элемент	Delete
Копировать элемент	Ctrl + C
Вставить элемент	Ctrl + V
Просмотреть CSS-правила элемента	Ctrl + Shift + C

Панель Console (Консоль)

Действие	Сочетание клавиш
Открыть консоль	Esc
Очистить консоль	Ctrl + L
Копировать выделенный текст	Ctrl + C
Вставить текст	Ctrl + V
Просмотреть историю команд	Стрелка вверх и Стрелка вниз
Просмотреть подробную информацию об объекте	Ctrl + Shift + C

Панель Network (Сеть)

Действие	Сочетание клавиш
Начать/Остановить запись сетевой активности	Ctrl + E
Очистить сетевой журнал	Ctrl + R
Фильтровать запросы	Ctrl + F
Просмотреть подробную информацию о запросе	Ctrl + Shift + C

Панель Performance (Производительность)

Действие	Сочетание клавиш
Начать/Остановить запись производительности	Ctrl + E
Экспортировать запись производительности	Ctrl + S
Фильтровать события	Ctrl + F

Панель Memory (Память)

Действие	Сочетание клавиш
Сделать снимок (Snapshot)	Ctrl + S
Экспортировать снимок	Ctrl + Shift + S
Фильтровать снимки	Ctrl + F

Панель Application (Приложение)

Действие	Сочетание клавиш
Обновить приложение	Ctrl + R
Очистить хранилище	Ctrl + Shift + R
Фильтровать данные	Ctrl + F

Панель Security (Безопасность)

Действие	Сочетание клавиш
Просмотреть сертификат	Ctrl + Shift + C
Перезагрузить страницу в обход кэша	Ctrl + Shift + R

Разное (Misc)

Действие	Сочетание клавиш
Открыть настройки	F1
Переключить тему	Ctrl + Shift + P, затем введите theme
Просмотреть горячие клавиши	Ctrl + Shift + P, затем введите shortcuts