Chrome DevTools — это набор инструментов веб-разработчика, встроенных непосредственно в браузер Google Chrome . DevTools может помочь вам оперативно редактировать страницы и быстро диагностировать проблемы, что в конечном итоге поможет вам быстрее создавать более качественные веб-сайты.
Посмотрите это видео, чтобы увидеть живую демонстрацию основных рабочих процессов DevTools, включая отладку CSS, создание прототипов CSS, отладку JavaScript и анализ производительности нагрузки.
Открыть инструменты разработчика
Существует много способов открыть DevTools, поскольку разным пользователям нужен быстрый доступ к различным частям пользовательского интерфейса DevTools.
- Чтобы работать с DOM или CSS, щелкните правой кнопкой мыши элемент на странице и выберите «Проверить» , чтобы перейти на панель «Элементы» . Или нажмите Command + Option + C (Mac) или Control + Shift + C (Windows, Linux, ChromeOS).
- Чтобы просмотреть зарегистрированные сообщения или запустить JavaScript, нажмите Command + Option + J (Mac) или Control + Shift + J (Windows, Linux, ChromeOS), чтобы перейти прямо на панель консоли .
Дополнительные сведения и рабочие процессы см. в разделе Open Chrome DevTools .
Начать
Если вы более опытный веб-разработчик, вот рекомендуемые отправные точки для изучения того, как DevTools может повысить вашу производительность:
- Просмотр и изменение DOM
- Просмотр и изменение CSS
- Отладка JavaScript
- Просматривайте сообщения и запускайте JavaScript в консоли.
- Оптимизируйте скорость сайта
- Проверьте сетевую активность
Откройте для себя инструменты разработчика
Пользовательский интерфейс DevTools может показаться немного перегруженным… здесь так много вкладок! Но если вы потратите некоторое время на ознакомление с каждой вкладкой и понимание возможностей, вы можете обнаружить, что DevTools может серьезно повысить вашу производительность.
Режим устройства
Имитация мобильных устройств.
Панель «Элементы»
Просмотрите и измените DOM и CSS.
- Начало работы с просмотром и изменением DOM
- Начало работы с просмотром и изменением CSS
- Редактировать CSS
- Редактировать DOM
- Найдите недействительный, переопределенный, неактивный и другой CSS.
- Определить потенциальные улучшения CSS
- Эмуляция светлых/темных тем, контрастности и других медиа-функций CSS.
- Найдите неиспользуемый CSS
- Проверка анимации
Консольная панель
Просматривайте сообщения и запускайте JavaScript из консоли.
Панель «Источники»
Отлаживайте JavaScript, сохраняйте изменения, внесенные в DevTools, при перезагрузке страницы, сохраняйте и запускайте фрагменты JavaScript, а также сохраняйте изменения, внесенные в DevTools, в локальные источники.
- Начало работы с отладкой JavaScript
- Приостановите свой код с помощью точек останова
- Редактирование и сохранение файлов в рабочей области
- Запуск фрагментов JavaScript
- Справочник по отладке JavaScript
- Переопределить веб-контент и заголовки ответов HTTP локально
Сетевая панель
Просмотр и отладка сетевой активности.
Панель рекордера
Записывайте, воспроизводите и измеряйте потоки пользователей.
- Записывайте, воспроизводите и измеряйте потоки пользователей
- Настройте рекордер с помощью расширений
- Справочник по функциям рекордера
Панель производительности
Найдите способы улучшить производительность нагрузки и выполнения.
- Оптимизируйте скорость сайта
- Анализируйте производительность во время выполнения
- Справочник по характеристикам производительности
Панель памяти
Найдите и устраните проблемы с памятью, влияющие на производительность страницы, например утечки памяти.
Панель приложений
Проверьте все загружаемые ресурсы, включая базы данных IndexedDB или Web SQL, локальное и сеансовое хранилище, файлы cookie, кэш приложений, изображения, шрифты и таблицы стилей.
- Отладка прогрессивных веб-приложений
- Просмотр и редактирование локального хранилища
- Просмотр, добавление, редактирование и удаление файлов cookie
- Просмотр информации о пробной версии источника
Панель безопасности
Устранение проблем со смешанным содержимым, проблем с сертификатами и т. д.
Сообщество
Отчеты об ошибках и запросы функций сохраняются в Crbug, который является средством отслеживания ошибок команды разработчиков.
Если вы хотите сообщить нам об ошибке или запросе функции, но у вас мало времени, вы можете отправить твит на @ChromeDevTools. Мы отвечаем и присылаем объявления с аккаунта регулярно.
Для помощи в использовании DevTools лучшим каналом является Stack Overflow.
Чтобы сообщить об ошибках или запросах функций в документации DevTools, откройте задачу GitHub.
У DevTools также есть канал Slack, но команда не отслеживает его постоянно.