Chrome DevTools — это набор инструментов веб-разработчика, встроенных непосредственно в браузер Google Chrome. DevTools позволяет оперативно редактировать страницы и быстро диагностировать проблемы, что помогает быстрее создавать более качественные веб-сайты.
Начать Узнать новости
DevTools поддерживает широкий спектр распространенных задач веб-разработки. Перейдите дальше на этой странице и изучите некоторые ключевые функции DevTools. Не знаете, с чего начать или впервые пользуетесь DevTools? Посмотрите введение в DevTools .
Информация из консоли и помощь искусственного интеллекта помогают более эффективно отлаживать и исправлять ошибки JavaScript, производительность и стиль.
Получите комплексное и действенное представление об эффективности вашей страницы.
Узнайте, как проверять ресурсы, загруженные на вашу страницу, и редактировать их в браузере.
Анализируйте и перезаписывайте сетевые запросы и ответы на лету.

Помощь искусственного интеллекта и информация о консоли

Узнайте, как инновации искусственного интеллекта в DevTools позволяют вам делать больше и быстрее.
Позвольте Gemini помочь вам проанализировать и улучшить стиль, сеть, источники и производительность вашего веб-сайта.
Изучите примеры использования помощи искусственного интеллекта в Chrome DevTools и узнайте, как она может поддержать ваш рабочий процесс отладки в отношении стиля, производительности и многого другого.
Изучите консольные сообщения и ошибки в DevTools и узнайте, как их исправить — без копирования.

Советы по инструментам разработчика

Ознакомьтесь с нашей ежемесячной серией видео, в которой объясняется, как использовать DevTools для решения распространенных проблем веб-разработки.
Узнайте, как записать трассировку производительности в DevTools и проанализировать ее, чтобы выявить и устранить проблемы с производительностью.

Мониторинг основных веб-показателей в реальном времени

Отладка проблем LCP и использование данных CrUX, чтобы увидеть, отлаживаете ли вы аналогичный опыт для своих пользователей.

Кэширование раскрыто

Познакомьтесь с различными типами кеша браузера, а также с тем, как его проверять и управлять им в Chrome DevTools!
Пытаетесь осмотреть элемент, и «пуф» его нет? Как будто ваш код играет с вами в прятки!

Получите статистику производительности

Широкий набор инструментов, которые помогут вам измерить и оптимизировать различные аспекты производительности во время выполнения: панель «Производительность», Lighthouse и многое другое.
Узнайте обо всех функциях панели «Производительность»: как записывать трассировку производительности, как просматривать и анализировать трассировку и многое другое.
Панель «Производительность» помогает разработчикам измерять и оптимизировать производительность во время выполнения на протяжении большей части 15 лет. Узнайте, как он развивается в будущем.
Аннотируйте трассировки на месте и сохраняйте их непосредственно в файле трассировки для упрощения совместного использования.

Новости и обновления

Проверяйте и редактируйте ресурсы

Узнайте обо всех функциях панели «Источники»: о том, как просматривать и редактировать файлы, отлаживать JavaScript и настраивать рабочую область.
Начать
Workspace позволяет сохранять изменения, внесенные вами в DevTools, в исходный код, хранящийся на вашем компьютере. Узнайте, как настроить рабочее пространство в собственных проектах.
Читать руководство

Анализируйте сетевую активность

Узнайте обо всех функциях панели «Сеть»: проверьте тела ответов и запросов, перезапишите заголовки и многое другое.
Начать
Практическое руководство, которое поможет вам выполнить типичные задачи на панели «Сеть».
Читать руководство

Дополнительные инструменты

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