Chrome DevTools Documentation

This is a placeholder for Chrome DevTools documentation index.

Начало работы

• Открытие DevTools

  Различные способы запуска DevTools, включая горячие клавиши и меню Chrome. Также описывает как настроить автоматическое открытие DevTools для новых вкладок.

• Командное меню

  Быстрый доступ к функциям DevTools через Command Menu (Cmd/Ctrl + Shift + P). Включает команды для скриншотов, отключения JavaScript и других частых операций.

• Горячие клавиши

  Полный список сочетаний клавиш для всех панелей DevTools. Включает shortcuts для Windows/Linux и Mac OS.

Основные панели

Элементы и стили

• Работа с DOM

  Руководство по просмотру, редактированию и отладке DOM структуры страницы. Включает поиск элементов, изменение атрибутов, работу с event listeners.

• CSS редактирование

  Инструменты для просмотра и редактирования CSS стилей, включая работу с Box Model, изменение цветов и значений, добавление новых правил.

• Анимации

  Инструменты для отладки CSS анимаций и переходов. Позволяет замедлять, воспроизводить и изменять параметры анимаций.

• CSS обзор

  Анализ используемых цветов, шрифтов, медиа-запросов и неиспользуемых объявлений CSS на странице.

• Изменения отслеживайте изменения HTML, CSS и JavaScript

  Отслеживание и управление изменениями в HTML, CSS и JavaScript файлах.

Отладка и производительность

• Консоль

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

• Проблемы Найдите и устраните проблемы

  Обнаружение и исправление проблем с производительностью, доступностью и безопасностью.

• Источники

  Отладка JavaScript с использованием брейкпоинтов, просмотр стека вызовов, работа с исходным кодом и сопоставление с source maps.

• Быстрый исходный код

  Быстрый доступ к просмотру и редактированию исходных файлов без переключения контекста с других панелей.

• Отключение JavaScript

  Как временно отключить JavaScript для тестирования поведения страницы без JS и проверки прогрессивного улучшения.

Сеть и безопасность

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

  Анализ сетевых запросов, времени загрузки, заголовков и содержимого. Включает фильтрацию, сортировку и экспорт данных.

• Блокировка запросов

  Блокировка определенных сетевых запросов для тестирования поведения сайта при недоступности ресурсов.

• Безопасность

  Проверка безопасности сайта, включая HTTPS, сертификаты и смешанный контент.

• Условия сети

  Эмуляция различных сетевых условий и устройств, изменение User Agent и другие сетевые настройки.

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

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

  Запись и анализ производительности страницы, включая рендеринг, JavaScript выполнение и использование памяти.

• Монитор производительности

  Мониторинг производительности в реальном времени, включая CPU, FPS и количество DOM узлов.

• Статистика производительности

  Анализ производительности на основе конкретных сценариев использования, с рекомендациями по улучшению.

• Память

  Профилирование памяти, поиск утечек и анализ использования heap.

• Инспектор памяти

  Просмотр и анализ ArrayBuffer, TypedArray и WebAssembly память.

• Покрытие кода

  Анализ неиспользуемого JavaScript и CSS кода для оптимизации размера бандла.

• Обзор вкладки «Рендеринг»

  Анализ и отладка процесса рендеринга страницы.

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

• Lighthouse

  Автоматизированный аудит производительности, доступности, PWA, SEO и лучших практик.

• Рекордер

  Запись и воспроизведение пользовательских действий для тестирования и измерения производительности.

• WebAudio просмотр показателей API WebAudio

  Просмотр и отладка Web Audio API, включая аудио контекст, частоту дискретизации и другие параметры.

• WebAuthn эмуляция аутентификаторов

  Эмуляция аутентификаторов для тестирования WebAuthn функциональности.

• Автозаполнение

  Проверка и отладка функциональности автозаполнения форм, включая адреса и другие данные.

• PWA отладка

  Инструменты для отладки Service Workers, манифестов и других компонентов PWA.

• Датчики эмуляция датчиков устройства

  Эмуляция различных датчиков устройства для тестирования.

• Медиа просмотр и отладка информации о медиаплеерах

  Инструменты для отладки и анализа медиаплееров на странице.

Настройки и конфигурация

• Общие настройки

  Основные настройки DevTools, включая внешний вид, поведение и персонализацию.

• Предпочтения

  Детальная настройка поведения различных панелей и функций DevTools.

• Рабочая среда

  Настройка рабочего пространства для сохранения изменений в локальных файлах.

• Ярлыки

  Настройка и персонализация сочетаний клавиш для различных действий в DevTools.

• Черный список

  Настройка игнорируемых файлов и папок при отладке.

• Устройства

  Управление списком эмулируемых мобильных устройств и их характеристиками.

• Локации

  Настройка эмуляции геолокации для тестирования функций, зависящих от местоположения.

• Регулирование

  Настройка профилей регулирования сети для эмуляции различных сетевых условий.