Инструменты разработчика
Chrome DevTools — это набор инструментов веб-разработчика, встроенных непосредственно в браузер Google Chrome. DevTools позволяет оперативно редактировать страницы и быстро диагностировать проблемы, что помогает быстрее создавать более качественные веб-сайты.
DevTools поддерживает широкий спектр распространенных задач веб-разработки. Перейдите дальше на этой странице и изучите некоторые ключевые функции DevTools. Не знаете, с чего начать или впервые пользуетесь DevTools? Посмотрите введение в DevTools .
Получите помощь ИИ
Информация из консоли и помощь искусственного интеллекта помогают более эффективно отлаживать и исправлять ошибки JavaScript, производительность и стиль.
Понять производительность
Получите комплексное и действенное представление об эффективности вашей страницы.
Проверка ресурсов
Узнайте, как проверять ресурсы, загруженные на вашу страницу, и редактировать их в браузере.
Анализ сети
Анализируйте и перезаписывайте сетевые запросы и ответы на лету.
Помощь искусственного интеллекта и информация о консоли
Узнайте, как инновации искусственного интеллекта в DevTools позволяют вам делать больше и быстрее.
Начать
Позвольте Gemini помочь вам проанализировать и улучшить стиль, сеть, источники и производительность вашего веб-сайта.
Быть вдохновленным
Изучите примеры использования помощи искусственного интеллекта в Chrome DevTools и узнайте, как она может поддержать ваш рабочий процесс отладки в отношении стиля, производительности и многого другого.
Понимание сообщений консоли
Изучите консольные сообщения и ошибки в DevTools и узнайте, как их исправить — без копирования.
Советы по инструментам разработчика
Ознакомьтесь с нашей ежемесячной серией видео, в которой объясняется, как использовать DevTools для решения распространенных проблем веб-разработки.
Записывайте и анализируйте трассировку производительности
Узнайте, как записать трассировку производительности в DevTools и проанализировать ее, чтобы выявить и устранить проблемы с производительностью.
Мониторинг основных веб-показателей в реальном времени
Отладка проблем LCP и использование данных CrUX, чтобы увидеть, отлаживаете ли вы аналогичный опыт для своих пользователей.
Кэширование раскрыто
Познакомьтесь с различными типами кеша браузера, а также с тем, как его проверять и управлять им в Chrome DevTools!
Зафиксируйте экран и проверьте исчезающие элементы
Пытаетесь осмотреть элемент, и «пуф» его нет? Как будто ваш код играет с вами в прятки!
Получите статистику производительности
Широкий набор инструментов, которые помогут вам измерить и оптимизировать различные аспекты производительности во время выполнения: панель «Производительность», Lighthouse и многое другое.
Обзор инструмента повышения производительности
Узнайте обо всех функциях панели «Производительность»: как записывать трассировку производительности, как просматривать и анализировать трассировку и многое другое.
Будущее инструментов повышения производительности
Панель «Производительность» помогает разработчикам измерять и оптимизировать производительность во время выполнения на протяжении большей части 15 лет. Узнайте, как он развивается в будущем.
Аннотирование трассировок производительности
Аннотируйте трассировки на месте и сохраняйте их непосредственно в файле трассировки для упрощения совместного использования.
Новости и обновления
Проверяйте и редактируйте ресурсы
Справочник функций
Узнайте обо всех функциях панели «Источники»: о том, как просматривать и редактировать файлы, отлаживать JavaScript и настраивать рабочую область.
Настройка рабочего пространства
Workspace позволяет сохранять изменения, внесенные вами в DevTools, в исходный код, хранящийся на вашем компьютере. Узнайте, как настроить рабочее пространство в собственных проектах.
Анализируйте сетевую активность
Сетевая панель
Узнайте обо всех функциях панели «Сеть»: проверьте тела ответов и запросов, перезапишите заголовки и многое другое.
Проверьте сетевую активность
Практическое руководство, которое поможет вам выполнить типичные задачи на панели «Сеть».
Дополнительные инструменты
Откройте для себя все другие функции и возможности DevTools.
Элементы
Узнайте, как просматривать и изменять DOM страницы.
Стили
Узнайте, как просматривать и изменять CSS страницы.
Изменения
Отслеживайте изменения в HTML, CSS и JavaScript.
Cloud Console
Регистрируйте сообщения и запускайте JavaScript.
Эффективность
Оцените эффективность сайта.
Память
Найдите проблемы с памятью, которые влияют на производительность страницы, включая утечки памяти и многое другое.
Приложение
Проверяйте, изменяйте и отлаживайте веб-приложения, тестируйте кеш, просматривайте хранилище и многое другое.
Анимации
Проверяйте и изменяйте анимацию.
Регистратор
Записывайте, воспроизводите, измеряйте потоки пользователей и редактируйте их шаги.
Визуализация
Откройте для себя коллекцию параметров, влияющих на рендеринг веб-контента.
Автозаполнение
Проверка и отладка сохраненных адресов.
Проблемы
Найдите и устраните проблемы на вашем сайте.
Конфиденциальность и безопасность
Убедитесь, что страница полностью защищена HTTPS.
СМИ
Просматривайте информацию и отлаживайте медиаплееры на каждой вкладке браузера.
Датчики
Эмулировать датчики устройства.
ВебАутн
Эмулировать аутентификаторы.