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