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

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

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

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

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

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

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

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

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

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

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

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

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

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