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

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

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

Панели

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

Справочник по настройкам