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