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

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

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

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

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

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

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

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

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

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

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

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

More accurate DevTools performance debugging using real-world data

Updated 4 апреля 2025 г.

Learn about new DevTools features like CPU throttling calibration to help you base your performance debugging decisions on data from the real world

Insights sidebar in the DevTools Performance panel

Updated 2 апреля 2025 г.

Learn about the new performance insights, the power of Lighthouse directly in the DevTools Performance panel.

Improved navigation and filtering in the DevTools Performance panel

Updated 19 марта 2025 г.

DevTools Performance panel updates make it easier to navigate within and filter traces.

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

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

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

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

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

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