Chrome DevTools: Elements, Console, Network

Щёлкните правой кнопкой мыши любой элемент и выберите «Исследовать», чтобы открыть DevTools с выбранным элементом. Клавиша F12 открывает и закрывает панель. Сочетание Cmd+Shift+C (Mac) или Ctrl+Shift+C (Windows) сразу включает режим исследования, не открывая всю панель.

Панель элементов показывает актуальное разобранное дерево DOM, а не исходный HTML-код. Она отражает изменения, внесённые с помощью JavaScript. Наводите указатель на узлы, чтобы подсветить их на странице. Дважды щёлкните, чтобы редактировать HTML непосредственно в панели.

После выбора элемента панель стилей показывает все применённые правила CSS, упорядоченные по специфичности. Перечёркнутые правила переопределены. Панель вычисленных значений показывает окончательные рассчитанные значения каждого свойства.

Нажмите кнопку :hov на панели стилей, чтобы принудительно включить состояние CSS, например :hover, :focus, :active или :visited. Исследуйте стили при наведении, не удерживая указатель совершенно неподвижно.

Панель вычисленных значений показывает интерактивную схему блочной модели: содержимое, внутренние отступы, границу и внешние отступы. Наводите указатель на каждую область, чтобы увидеть её значение. Щёлкните, чтобы изменить значения внешних и внутренних отступов прямо в панели.

Консоль показывает ошибки, предупреждения и записи журнала. Введите любое выражение JavaScript и нажмите Enter, чтобы вычислить его относительно актуальной страницы. Используйте консоль как интерактивный REPL для мгновенной проверки фрагментов кода.

Помимо console.log: console.warn() (жёлтое предупреждение), console.error() (красная запись), console.table() (отображает массив или объект в виде таблицы), console.group() / console.groupEnd() для группировки вывода и console.time() для измерения времени.

Каждый HTTP-запрос (HTML, JS, CSS, изображения, XHR, Fetch) отображается отдельной строкой. В столбцах указаны метод, статус, размер и время выполнения. Щёлкните строку, чтобы увидеть подробности полного запроса и ответа.

Используйте строку фильтра, чтобы искать по URL или фильтровать запросы по типу: все, XHR/Fetch, JS, CSS, изображения, медиаданные, шрифты, WS. Фильтр XHR/Fetch особенно полезен при отладке вызовов API из JavaScript.

Выберите сетевой запрос, чтобы увидеть: заголовки (запроса и ответа), предварительный просмотр (форматированный JSON/HTML), ответ (необработанное тело) и время выполнения (этапы соединения). На вкладке Payload показаны параметры тела POST-запроса.

Щёлкните раскрывающийся список ограничения скорости (по умолчанию: без ограничений), чтобы имитировать медленную сеть 3G, быструю сеть 3G или отсутствие сети. Флажок отключения кэша запрещает браузеру использовать кэшированные ресурсы во время тестирования.

Элементы: исследуйте и редактируйте актуальные DOM и CSS. Принудительно включайте псевдосостояния, чтобы исследовать стили при наведении. Консоль: ведите журнал, отлаживайте и запускайте JS непосредственно на странице. Сеть: отслеживайте все HTTP-запросы, исследуйте заголовки и ответы, ограничивайте скорость для имитации медленных соединений.