Chrome for Developers

Перейти к основному контенту

Инструменты разработчика

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

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

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

Инновации в области искусственного интеллекта

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

Инструменты разработчика для агентов

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

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

Понять производительность

Получите комплексное и действенное представление об эффективности вашей страницы.

Проверка ресурсов

Узнайте, как проверять ресурсы, загруженные вашей страницей, и редактировать их из браузера.

Анализировать сеть

Анализируйте и перезаписывайте сетевые запросы и ответы на лету.

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

Посмотрите нашу ежемесячную серию видеороликов, в которых в игровой форме рассматриваются распространённые сценарии отладки в DevTools.

Имитация пользовательского опыта с помощью агентов программирования.

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

Автоматизируйте аудиты Lighthouse с помощью агентов кодирования.

Lighthouse в Chrome DevTools для агентов позволяет вашему агенту-программисту оценивать качество веб-сайта, выполняя в режиме реального времени проверки доступности, SEO, передовых методов и просмотра веб-страниц агентом.

Оптимизация производительности Pitstop

Ознакомьтесь с обновленной панелью «Производительность», которая покажет вам, как измерять основные веб-показатели (LCP, CLS, INP) и как получать персонализированные рекомендации от Gemini.

Пиксельный пират

Отправляйтесь в плавание с DevTools и станьте настоящим пиратом отладки! Узнайте о методах эмуляции стилей фокусировки, тестирования форм с автозаполнением и устранения внутренних ошибок с помощью сетевых переопределений.

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

Широкий набор инструментов, которые помогут вам измерить и оптимизировать различные аспекты производительности во время выполнения: панель «Производительность», Lighthouse и многое другое.

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

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

Справочник функций

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

Настройка рабочего пространства

Workspace позволяет вам сохранять изменения, которые вы делаете в DevTools в исходный код, который хранится на вашем компьютере. Узнайте, как настроить workspace в ваших собственных проектах.

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

Сетевая панель

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

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

Откройте для себя все другие функции и возможности DevTools.

Read the original on developer.chrome.com ↗