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

Отладка с помощью ИИ

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

Подключите сервер Chrome DevTools MCP (Model Context Protocol) к выбранному вами инструменту: Antigravity, Claude Code, Cline, Copilot и другим.

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

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

Посмотрите нашу ежемесячную серию видеороликов, в которых в игровой форме рассматриваются распространённые сценарии отладки в DevTools.
Инструменты разработчика Chrome для агентов позволяют вашему агенту проверять адаптивный дизайн, тестировать API, учитывающие местоположение, и имитировать различные скорости процессора или сети.
Lighthouse в Chrome DevTools для агентов позволяет вашему агенту-программисту оценивать качество веб-сайта, выполняя в режиме реального времени проверки доступности, SEO, передовых методов и просмотра веб-страниц агентом.
Ознакомьтесь с обновленной панелью «Производительность», которая покажет вам, как измерять основные веб-показатели (LCP, CLS, INP) и как получать персонализированные рекомендации от Gemini.
Отправляйтесь в плавание с DevTools и станьте настоящим пиратом отладки! Узнайте о методах эмуляции стилей фокусировки, тестирования форм с автозаполнением и устранения внутренних ошибок с помощью сетевых переопределений.

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

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

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

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

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

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

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

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

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