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

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

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

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

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

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

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

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

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

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

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

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

Проверка и редактирование ресурсов

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

Анализ сетевой активности

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

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

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