Chrome DevTools — это набор инструментов веб-разработчика, встроенных непосредственно в браузер Google Chrome. DevTools может помочь вам оперативно редактировать страницы и быстро диагностировать проблемы, что помогает вам быстрее создавать более качественные веб-сайты.
Все способы открытия Chrome DevTools.
Будьте в курсе последних изменений DevTools.
Серия небольших видеороликов, которые помогут вам изучить функции DevTools.

Команды и ярлыки

Быстро выполнять задачи.
Руководство о том, как открыть командное меню, запускать команды, открывать файлы, просматривать другие действия и многое другое.
Каноническая документация по сочетаниям клавиш Chrome DevTools.
Посмотрите, как выглядит и ведет себя веб-страница, когда JavaScript отключен.
Используйте виртуальные устройства в режиме устройства Chrome для создания веб-сайтов, ориентированных на мобильные устройства.
Найдите текст во всех загруженных ресурсах с помощью вкладки «Поиск».

Панели

Откройте для себя возможности каждой панели DevTools.
Узнайте, как просматривать и изменять DOM страницы с помощью Chrome DevTools.
Узнайте, как просматривать и изменять CSS страницы с помощью Chrome DevTools.
Регистрируйте сообщения и запускайте JavaScript.
Просматривайте и редактируйте файлы, создавайте фрагменты, отлаживайте JavaScript и настраивайте рабочую область.
Записывать сетевые запросы.
Оценивайте производительность сайта с помощью DevTools.
Выявляйте проблемы с памятью, влияющие на производительность страниц, включая утечки памяти, ее раздувание и частую сборку мусора.
Проверяйте, изменяйте и отлаживайте веб-приложения, тестируйте кеш и просматривайте хранилище.
Записывайте, воспроизводите, измеряйте потоки пользователей и редактируйте их шаги.
Откройте для себя коллекцию параметров, влияющих на рендеринг веб-контента.
Найдите и устраните проблемы на вашем сайте.
Используйте панель «Безопасность», чтобы убедиться, что страница полностью защищена HTTPS.
Проверьте ArrayBuffer, TypedArray или DataView в JavaScript, а также WebAssembly и память приложений C++ Wasm.
Переопределить строку пользовательского агента. Отключите параметр «Выбирать автоматически» и выберите из списка или введите собственную строку.
Используйте панель «Медиа» для просмотра информации и отладки медиаплееров на каждой вкладке браузера.
Просматривайте и изменяйте анимацию на вкладке «Анимация».
Отслеживайте изменения в HTML, CSS и JavaScript.
Найдите и проанализируйте неиспользуемый код JavaScript и CSS в Chrome DevTools.
Используйте вкладку «Ресурсы для разработчиков», чтобы проверить, успешно ли загружаются исходные карты, и загрузите их вручную.
Определите потенциальные улучшения CSS с помощью панели «Обзор CSS».
Оптимизируйте скорость сайта с помощью панели Lighthouse.
Получите полезную информацию об эффективности вашего веб-сайта с помощью панели «Статистика производительности».
Эмулировать датчики устройства.
Эмулировать аутентификаторы.