Слой 1
Что пришло(данные извне)
Сюда идут, когда нужно проверить сетевые запросы, ответы сервера, внешние условия загрузки, сертификаты и общий факт того, что именно попало в приложение.
Chrome DevTools · карта инструментов через модель дебага
Chrome DevTools.
карта инструментов
Все инструменты Chrome DevTools удобно раскладываются по четырём вопросам дебага.
(данные извне)
Слой 2
Что есть сейчас(состояние системы)
Этот слой показывает текущее состояние интерфейса, DOM, CSS, storage, авторизации, предупреждений и других частей приложения после того, как данные уже применились.
Слой 3
Что выполняется(код и логика)
Здесь ищут ошибки в JavaScript, смотрят порядок выполнения, ставят breakpoints, воспроизводят сценарии и проверяют, почему код принимает именно такие решения.
Слой 4
Как это работает во времени(динамика системы)
Этот слой нужен для таймингов, производительности, памяти, рендера, анимаций, слоёв, покрытия кода и поведения приложения в реальном времени.
1
Layer 1
Что пришло (данные извне)
Инструменты этого слоя отвечают на вопрос: какие внешние данные, ресурсы и условия реально попали в приложение до того, как оно начало что-то рисовать или выполнять.
Network
Layer 1
Главный инструмент для просмотра всех сетевых запросов, ответов, таймингов, waterfall и фактического обмена данными между клиентом и сервером.
Когда открывать
Когда не приходят данные, API отвечает ошибкой, страница грузится слишком долго, часть ресурсов не подтягивается, response отличается от ожиданий или баг выглядит как проблема на границе между фронтом и беком.
Где находится
Верхняя панель DevTools → вкладка Network. Для узких случаев полезны фильтры Fetch/XHR, JS, CSS, Img, Doc, а также search, preserve log и disable cache.
Что смотреть
Статусы, URL, method, headers, cookies, payload, response body, initiator, timing breakdown, waterfall, cache status, priority, blocking, redirects и поведение запроса после перезагрузки или пользовательского действия.
Для чего полезен
Позволяет быстро доказать, в чём именно проблема: запрос не ушёл, ушёл не туда, сервер ответил не тем, данные пришли поздно, ресурс закэшировался, либо фронт получил корректный ответ, но уже сломал его дальше сам.
Network Conditions
Layer 1
Инструмент для эмуляции внешних сетевых условий: медленный интернет, offline-режим, смена user-agent и других факторов, влияющих на загрузку приложения.
Когда открывать
Когда баг воспроизводится только у пользователей с плохой сетью, только на мобильных устройствах, только в offline/unstable условиях или когда нужно проверить, как приложение переживает деградацию сети.
Где находится
Через More tools → Network conditions, либо через drawer в нижней части DevTools. Часто используется вместе с вкладкой Network и перезагрузкой страницы.
Что смотреть
С каким throttling-профилем ведёт себя приложение, что ломается в offline, какие запросы начинают таймаутиться, меняется ли путь загрузки, и не завязана ли логика на слишком оптимистичные сетевые ожидания.
Для чего полезен
Помогает воспроизвести те условия, в которых живут реальные пользователи, а не идеальный локальный стенд. Хорошо выявляет race condition, плохую обработку ретраев, пустые состояния и хрупкие загрузочные сценарии.
Request Blocking
Layer 1
Инструмент для блокировки отдельных запросов: позволяет проверить fallback-сценарии и посмотреть, как приложение живёт без части внешних зависимостей.
Когда открывать
Когда нужно проверить, что будет без аналитики, без шрифтов, без CDN-ресурса, без стороннего скрипта или при частичном отказе какого-то запроса, от которого приложение слишком сильно зависит.
Где находится
More tools → Request blocking. Часть сценариев также проверяется из Network через контекстное меню по запросу (Block request URL / domain).
Что смотреть
Ломается ли интерфейс без конкретного ресурса, есть ли graceful degradation, как ведут себя fallback-ветки, не перестаёт ли страница работать из-за второстепенного скрипта, и насколько хрупка цепочка загрузки.
Для чего полезен
Позволяет быстро понять реальную цену внешней зависимости. Очень полезен для поиска скрытых связей между ресурсами и проверки того, насколько приложение готово к частичным отказам инфраструктуры.
Protocol Monitor
Layer 1
Низкоуровневый инструмент, показывающий обмен командами по Chrome DevTools Protocol. Помогает понять, какие внутренние команды уходят в браузер и какие события он возвращает.
Когда открывать
Когда нужно понять, как работает сам DevTools, воспроизвести действие через CDP, подготовить автоматизацию или разобраться, какие команды лежат под конкретной UI-функцией браузера.
Где находится
More tools → Protocol monitor. Обычно им пользуются вместе с обычными вкладками DevTools, чтобы сопоставить действие в интерфейсе и CDP-команды под капотом.
Что смотреть
Какие домены протокола активируются, какие команды отправляются, какие события прилетают в ответ, в каком порядке это происходит и что именно можно воспроизвести из внешнего агента или скрипта.
Для чего полезен
Это мост между ручным дебагом и автоматизацией. Позволяет превращать действия в DevTools в воспроизводимые шаги через CDP и лучше понимать, какие данные браузер вообще умеет отдавать агенту.
Security
Layer 1
Показывает состояние безопасности соединения: сертификаты, HTTPS, mixed content, проблемы шифрования и доверия к загружаемым ресурсам.
Когда открывать
Когда запросы не проходят из-за сертификатов, ресурсы блокируются браузером, есть mixed content, проблемы только в production-домене, либо нужно убедиться, что соединение действительно безопасно.
Где находится
Верхняя панель DevTools → вкладка Security. Часто используется вместе с Network, если часть запросов режется политиками браузера или TLS-ошибками.
Что смотреть
Статус соединения, valid certificate chain, origin security, mixed content warnings, insecure resources и детали конкретных причин, по которым браузер не считает страницу или ресурс безопасными.
Для чего полезен
Помогает быстро отделить прикладной баг от инфраструктурного. Иногда приложение "не работает" не потому, что сломан код, а потому что браузер просто не доверяет каналу, сертификату или конкретному ресурсу.
Lighthouse
Layer 1
Автоматический аудит страницы по нескольким направлениям: performance, accessibility, best practices, SEO и quality-сигналы, которые сложно быстро заметить вручную.
Когда открывать
Когда нужен быстрый обзор проблем страницы, первичная диагностика деградации, проверка качества сборки перед релизом или аргументированный отчёт о том, что в приложении уже выглядит подозрительно.
Где находится
Верхняя панель DevTools → вкладка Lighthouse. Запускается из браузера как аудит выбранной страницы с набором категорий и устройством desktop/mobile.
Что смотреть
Итоговые оценки, opportunities, diagnostics, render-blocking ресурсы, large layout shifts, unused code, accessibility issues, проблемы контраста, семантики и общие подсказки по улучшению страницы.
Для чего полезен
Это быстрый способ получить карту слабых мест без ручного прохода по десяткам инструментов. Не заменяет глубокий дебаг, но отлично помогает начать с наиболее вероятных и измеримых проблем.
2
Layer 2
Что есть сейчас (состояние системы)
Этот слой отвечает на вопрос: в каком состоянии приложение находится прямо сейчас — что лежит в DOM, какие стили применились, что сохранено в storage и какие системные проблемы уже видны.
Elements
Layer 2
Основной инструмент для инспекции DOM, CSS, layout, box model, computed styles и визуальных проблем интерфейса прямо на странице.
Когда открывать
Когда элемент есть, но выглядит не так, находится не там, перекрыт другим блоком, текст не виден, стили "как будто не применились", ломается grid/flex-layout или интерфейс визуально расползается.
Где находится
Верхняя панель DevTools → вкладка Elements. Внутри особенно важны панели Styles, Computed, Layout, Event Listeners, Accessibility и DOM-дерево с live-подсветкой элементов.
Что смотреть
Реальный DOM, порядок вложенности, активные и перебитые CSS-правила, computed styles, размеры, margin/padding, stacking context, псевдосостояния, flex/grid-оверлеи и итоговую геометрию элемента.
Для чего полезен
Позволяет мгновенно проверить гипотезу о том, почему интерфейс сломан именно на экране. Это самый прямой путь от "вижу баг" к "вот конкретная причина в DOM, CSS или layout".
Application
Layer 2
Центральное место для проверки состояния приложения: storage, cookies, local/session storage, IndexedDB, service workers, cache, manifest и фоновые части web-приложения.
Когда открывать
Когда кажется, что проблема в состоянии приложения: пользователь разлогинен, включается не та тема, не сбрасывается старое состояние, вкладки видят разное, после refresh всё меняется или кэш ведёт себя странно.
Где находится
Верхняя панель DevTools → вкладка Application. Внутри доступны Storage, Local Storage, Session Storage, IndexedDB, Cookies, Cache Storage, Service Workers, Manifest и другие разделы.
Что смотреть
Какие ключи реально лежат в storage, какие cookies установлены, какой service worker активен, что закэшировано, какой manifest подключён, есть ли устаревшие данные и не живёт ли приложение в старом состоянии.
Для чего полезен
Очень быстро показывает, что проблема может быть не в UI и не в сетевом ответе, а в накопленном состоянии браузера. Это главный инструмент для поиска багов, связанных с persistence и жизненным циклом приложения.
CSS Overview
Layer 2
Агрегированный снапшот всего CSS на странице: цвета, шрифты, проблемы контраста, неиспользуемые стили и общая структура дизайн-системы в текущем состоянии.
Когда открывать
Когда нужно понять, какие стили реально применяются на странице как целом, найти несоответствия дизайн-системе, собрать все цвета и шрифты или оценить масштаб CSS-хаоса в проекте.
Где находится
More tools → CSS Overview. Сначала собирается snapshot, после чего DevTools показывает агрегированный отчёт по стилям и accessibility-параметрам страницы.
Что смотреть
Количество уникальных цветов, font sizes, font families, contrast issues, unused declarations, часто повторяющиеся значения и любые аномальные визуальные паттерны, которые сложно выловить точечной инспекцией.
Для чего полезен
Помогает перейти от локальной правки одного блока к системному пониманию состояния дизайна. Особенно полезен для больших проектов, где стиль уже начал деградировать и проблемы стали распределёнными.
Changes
Layer 2
Показывает diff изменений, которые ты сделал прямо в DevTools при редактировании CSS или исходников, чтобы не потерять удачные правки во время ручного расследования.
Когда открывать
Когда ты уже правил что-то в DevTools руками и хочешь понять, что именно изменил, сравнить с исходным состоянием, сохранить найденное решение или быстро показать коллеге точный diff удачной правки.
Где находится
More tools → Changes. Особенно полезен при работе через Elements, Sources и live-редактировании стилей или файлов прямо во время дебага.
Что смотреть
Список изменённых файлов, конкретные добавленные и удалённые строки, накопленные локальные правки и итоговый diff между исходным и текущим состоянием после ручных экспериментов.
Для чего полезен
Не даёт потерять найденную гипотезу. Когда ты уже нащупал рабочую правку, этот инструмент помогает превратить импровизацию в оформленный результат, который можно перенести в кодовую базу.
WebAuthn
Layer 2
Инструмент для отладки WebAuthn, passkeys и security keys. Позволяет эмулировать и проверять сценарии современной аутентификации прямо в браузере.
Когда открывать
Когда ломается логин через passkeys, security keys, FIDO/WebAuthn, не создаётся credential, не проходит assertion, сценарий авторизации ведёт себя нестабильно или зависит от аппаратного ключа.
Где находится
More tools → WebAuthn. Обычно используется вместе с приложением, где запускается процесс регистрации или входа по WebAuthn-сценарию.
Что смотреть
Зарегистрированные виртуальные аутентификаторы, типы credential, этапы flow, успешность создания и проверки данных, а также место, где сценарий аутентификации перестаёт идти дальше.
Для чего полезен
Делает дебаг сложной аутентификации воспроизводимым. Без него WebAuthn-баги часто выглядят как чёрный ящик, а с ним можно локально имитировать устройство и увидеть, на каком шаге всё сломалось.
Autofill
Layer 2
Инструмент для проверки сценариев автозаполнения форм и связанных с ними проблем в полях ввода, атрибутах формы и пользовательском потоке оформления данных.
Когда открывать
Когда формы заполняются не теми значениями, браузер не предлагает автозаполнение, ломаются поля адреса, имени, карты или контактных данных, а баг проявляется именно в реальном пользовательском заполнении.
Где находится
More tools → Autofill. Обычно используется рядом с Elements и реальной формой, чтобы сопоставлять поведение браузера с разметкой и атрибутами полей.
Что смотреть
Какие поля браузер распознаёт, как они размечены, какие атрибуты autocomplete используются, где возникает неоднозначность, и почему autofill либо не срабатывает, либо заполняет форму некорректно.
Для чего полезен
Помогает чинить формы не только для идеального ручного ввода, но и для реального поведения браузера. Это особенно важно в checkout, логине, онбординге и других критичных формах.
3
Layer 3
Что выполняется (код и логика)
Этот слой отвечает на вопрос: какой код действительно выполняется, в каком порядке идут шаги программы, где меняются значения и как воспроизводится проблемный сценарий.
Sources
Layer 3
Базовый инструмент для отладки JavaScript: breakpoints, step-by-step выполнение, call stack, scope, watch expressions и контроль над тем, как реально движется логика приложения.
Когда открывать
Когда нужно остановить код в нужной точке, увидеть реальные значения переменных, проверить ветвление, понять порядок вызовов, найти момент поломки и доказать, где именно логика начинает идти не туда.
Где находится
Верхняя панель DevTools → вкладка Sources. Важные зоны внутри: Navigator, Editor, Breakpoints, Scope, Watch, Call Stack, Event Listener Breakpoints и XHR/fetch breakpoints.
Что смотреть
Breakpoint-срабатывания, step over / into / out, значения в scope, call stack, async stack traces, watcher-выражения, порядок исполнения и переход от одного участка кода к следующему.
Для чего полезен
Это главный инструмент для превращения предположений в факт. Вместо догадок о том, "наверное, тут что-то пошло не так", ты видишь точный момент и контекст, в котором программа приняла ошибочное решение.
Console
Layer 3
Интерактивная среда выполнения JavaScript в рантайме страницы: быстрые проверки гипотез, чтение логов, доступ к глобальным объектам и точечный runtime-анализ.
Когда открывать
Когда нужно быстро проверить выражение, посмотреть ошибки, вывести объект, сравнить состояние до и после действия, попробовать патч в рантайме или понять, что приложение пишет в лог прямо сейчас.
Где находится
Верхняя панель DevTools → вкладка Console. Также доступна как drawer снизу в других вкладках, что удобно для параллельной инспекции страницы и выполнения команд.
Что смотреть
Ошибки, warnings, stack traces, значения выражений, доступность объектов, network-related logs, custom logs приложения и результаты прямого выполнения JavaScript в текущем контексте страницы.
Для чего полезен
Console — это самый быстрый способ проверить гипотезу без правки кода и пересборки. Хорошо работает как микролаборатория рядом с Sources, Elements и Network.
Recorder
Layer 3
Инструмент для записи, повторения и измерения пользовательских сценариев. Помогает воспроизводить длинные последовательности действий и превращать баг в повторяемый сценарий.
Когда открывать
Когда баг проявляется не всегда, его сложно воспроизвести руками, есть длинная цепочка действий "нажми тут, потом сюда, потом ещё раз", нужно передать сценарий другому человеку или проверить фикс без ручной рутины.
Где находится
Верхняя панель DevTools → вкладка Recorder (или More tools → Recorder). Записывает сценарий действий пользователя прямо в браузере и позволяет воспроизводить его с нужной скоростью.
Что смотреть
Последовательность шагов, пользовательские действия, точки воспроизведения, стабильность сценария, сравнение успешного и неуспешного прогона, а также возможность экспорта сценария для дальнейшей автоматизации.
Для чего полезен
Снимает зависимость от памяти и ручной аккуратности. Если баг можно записать, его можно повторять, сравнивать, измерять и постепенно доводить до воспроизводимого кейса, который проще чинить и проверять.
Developer Resources
Layer 3
Инструмент для диагностики ресурсов, ошибок загрузки исходников и проблем, связанных с dev-средой, sourcemaps и связанными ресурсами, которые нужны самому процессу разработки и дебага.
Когда открывать
Когда DevTools не может корректно загрузить sourcemaps, исходники показываются странно, часть development-ресурсов недоступна, либо нужно понять, не мешает ли самой отладке проблема в devtool-инфраструктуре.
Где находится
More tools → Developer Resources. Используется точечно, когда обычные инструменты уже намекают, что проблема может быть в исходниках, сорсмапах или связанных ресурсах разработки.
Что смотреть
Ошибки загрузки developer resources, sourcemap issues, проблемы доступа к исходникам, статусы связанных файлов и всё, что объясняет, почему DevTools показывает код не так, как ты ожидаешь.
Для чего полезен
Помогает отделить баг приложения от багов среды отладки. Иногда кажется, что "ничего не дебажится", а на самом деле сломан мост между сборкой, sourcemap и интерфейсом DevTools.
4
Layer 4
Как это работает во времени (динамика системы)
Этот слой отвечает на вопрос: что происходит с приложением во времени — где тратятся миллисекунды, где теряются кадры, растёт память, ломается рендер и деградирует поведение.
Performance
Layer 4
Главный инструмент для анализа производительности страницы: запись взаимодействия, flame chart, main thread, long tasks, layout, paint и общая картина того, куда уходит время.
Когда открывать
Когда есть фризы, лаги, долгие действия, просадка FPS, непонятные задержки, тяжёлый скролл, медленные клики, подвисания интерфейса или общее ощущение, что "что-то тормозит".
Где находится
Верхняя панель DevTools → вкладка Performance. Запись делается по кнопке record, после чего воспроизводится проблемный сценарий и анализируется весь таймлайн события.
Что смотреть
Flame chart, main thread, scripting, rendering, painting, long tasks, screenshots, interactions, layout shifts, event timing и связь между пользовательским действием и реальной нагрузкой на браузер.
Для чего полезен
Позволяет увидеть проблему не как ощущение, а как измеряемую последовательность событий. Это лучший инструмент для ответа на вопрос: почему конкретное действие заняло именно столько времени.
Memory
Layer 4
Инструмент для анализа потребления памяти: heap snapshots, allocation sampling и поиска утечек, удерживаемых объектов и общего ухудшения состояния приложения со временем.
Когда открывать
Когда приложение со временем начинает тормозить, через час всё становится хуже, вкладка ест всё больше памяти, страница падает на слабых устройствах или есть подозрение на утечки объектов.
Где находится
Верхняя панель DevTools → вкладка Memory. Доступны heap snapshot, allocation instrumentation on timeline и sampling-подходы для поиска проблем удержания памяти.
Что смотреть
Рост heap, retained size, dominators, detached DOM nodes, повторяющиеся allocations, объекты, которые не очищаются, и различия между снимками памяти до и после сценария.
Для чего полезен
Позволяет ловить те баги, которые не видны сразу после загрузки, но постепенно убивают приложение. Особенно важен для долгоживущих вкладок, dashboard-интерфейсов и сложных SPA.
Performance Monitor
Layer 4
Живой мониторинг метрик страницы в реальном времени: CPU, JS heap size, DOM nodes, layouts per second, style recalculations и других индикаторов поведения приложения.
Когда открывать
Когда нужно вживую наблюдать за деградацией приложения во время работы, не делая полную запись performance, либо быстро понять, растут ли DOM, память и перерасчёты прямо в процессе действий.
Где находится
More tools → Performance monitor. Обычно его держат открытым рядом со страницей, чтобы смотреть метрики во время ручного взаимодействия с приложением.
Что смотреть
Графики CPU usage, JS heap size, DOM node count, document count, layouts/sec, style recalcs/sec и любые стабильные тренды роста или всплесков при конкретных действиях пользователя.
Для чего полезен
Отлично подходит для быстрого подтверждения гипотезы о деградации. Не всегда нужен глубокий профиль — иногда достаточно увидеть, что один клик стабильно добавляет сотни DOM-узлов или мегабайты памяти.
Rendering
Layer 4
Набор оверлеев и опций рендера для диагностики repaint, layout shift, layer borders, FPS и других визуальных характеристик того, как браузер реально рисует страницу.
Когда открывать
Когда есть странные перерисовки, мерцание, layout shift, просадки кадров, лишние repaint, проблемы при скролле или ощущение, что интерфейс перерисовывается чаще и тяжелее, чем должен.
Где находится
More tools → Rendering. Вспомогательная панель с набором переключателей и визуальных индикаторов поверх страницы.
Что смотреть
Paint flashing, layout shift regions, layer borders, FPS meter, scrolling performance issues и любые визуальные подсказки браузера о том, где рендер становится тяжёлым или нестабильным.
Для чего полезен
Помогает увидеть invisible work браузера: то, что не видно по коду, но отлично видно по перерисовкам и оверлеям. Особенно полезен для UI-багов и визуальной производительности.
Layers
Layer 4
Инструмент для анализа compositing layers и GPU-слоёв. Позволяет понять, как браузер разносит элементы по слоям и как это влияет на рендер, перекрытия и производительность.
Когда открывать
Когда есть проблемы с анимацией, лаги на overlay и модалках, странные перекрытия, подозрение на GPU-композицию или ощущение, что визуально элемент сверху, но рендерится не так, как ожидается.
Где находится
More tools → Layers. Обычно используется вместе с Rendering и Performance для понимания compositing-части проблемы.
Что смотреть
Какие элементы вынесены в отдельные слои, как меняется структура слоёв, какие области композитятся отдельно, и как это влияет на перерисовку, анимацию и перекрытие контента.
Для чего полезен
Даёт редкое, но очень важное понимание того, как браузер реально раскладывает интерфейс для рендера. Особенно полезен при сложных анимациях, sticky-элементах и проблемах поверхностной композиции.
Animations
Layer 4
Инструмент для инспекции и замедления CSS/Web Animations: помогает увидеть тайминг, длительность, easing и фактическое поведение анимаций на странице.
Когда открывать
Когда анимация дёргается, выглядит слишком быстрой, стартует не вовремя, пересекается с другой анимацией, не доходит до нужного состояния или ломает UX при взаимодействии пользователя.
Где находится
More tools → Animations. После запуска анимации DevTools показывает дорожку анимаций и позволяет управлять скоростью воспроизведения.
Что смотреть
Timeline анимаций, delay, duration, easing, последовательность запуска, пересечения нескольких анимаций и различия между ожидаемым и реальным поведением интерфейса во времени.
Для чего полезен
Позволяет перевести субъективное "анимация какая-то странная" в конкретную проблему с таймингом, easing или последовательностью. Особенно полезен для микроинтеракций и сложных UI-переходов.
Coverage
Layer 4
Показывает, какая часть CSS и JavaScript реально используется во время текущего сценария, а какая загружается зря и не участвует в работе страницы.
Когда открывать
Когда страница грузит слишком много кода, хочется понять реальную полезность больших бандлов, есть подозрение на лишний CSS/JS или нужно найти кандидатов на оптимизацию загрузки.
Где находится
More tools → Coverage. После запуска записи нужно воспроизвести интересующий сценарий, чтобы DevTools оценил фактическое использование кода.
Что смотреть
Процент unused bytes, конкретные файлы с избыточным кодом, диапазоны неиспользованных строк и различие между тем, что загрузилось, и тем, что реально понадобилось пользователю в сценарии.
Для чего полезен
Помогает принять решение об оптимизации не на глаз, а по данным. Полезен для performance-работы, борьбы с раздутыми бандлами и понимания цены неиспользуемых ресурсов.
Media
Layer 4
Инструмент для анализа воспроизведения медиа: видео, аудио, потоков и связанных событий, которые влияют на пользовательский опыт и поведение страницы.
Когда открывать
Когда не воспроизводится видео или аудио, медиа зависает, буферизация ведёт себя странно, поток отваливается, есть проблемы с codecs, autoplay или синхронизацией событий во время проигрывания.
Где находится
More tools → Media. Обычно используется на страницах с видео- или аудиоплеерами, потоками и сложной медиа-логикой.
Что смотреть
События проигрывания, состояние буфера, ошибки декодирования, медиасессию, смену состояний плеера и любые аномалии между действием пользователя и реальным поведением медиапотока.
Для чего полезен
Даёт специализированный взгляд на медиа-сценарии, которые плохо диагностируются через обычные Network и Console. Особенно полезен для стриминга, кастомных плееров и мультимедийных интерфейсов.
WebAudio
Layer 4
Показывает граф Web Audio API и помогает анализировать связи между аудио-узлами, маршрутизацию звука и внутреннюю структуру аудиообработки в приложении.
Когда открывать
Когда приложение использует Web Audio API, звук не идёт, идёт не туда, цепочка эффектов работает странно, узлы не соединяются как надо или нужна визуальная схема аудио-графа.
Где находится
More tools → WebAudio. Используется на страницах и приложениях, которые строят звук через AudioContext и цепочки аудио-узлов.
Что смотреть
Граф нод, их соединения, lifecycle аудиоконтекста, параметры обработки и фактическую архитектуру аудиосигнала внутри приложения в конкретный момент времени.
Для чего полезен
Превращает сложную аудио-логику из невидимой цепочки API-вызовов в наглядную карту. Это существенно упрощает дебаг интерактивного звука и музыкальных веб-приложений.
Memory Inspector
Layer 4
Позволяет низкоуровнево смотреть содержимое памяти для ArrayBuffer, TypedArray, DataView и WebAssembly-памяти, когда нужно проверить бинарные данные напрямую.
Когда открывать
Когда работа идёт с бинарными форматами, TypedArray, WebAssembly, парсингом байтов, буферами изображений, звука или сетевых пакетов, и нужно увидеть реальное содержимое памяти побайтно.
Где находится
Открывается из контекста объектов памяти в DevTools — через Sources или Console, когда выбран поддерживаемый буфер или участок WebAssembly memory.
Что смотреть
Сырые байты, интерпретацию в разных форматах, смещения, изменения значений, структуру бинарных данных и соответствие между ожиданием кода и фактическим содержимым буфера.
Для чего полезен
Точечный, но незаменимый инструмент для низкоуровневого дебага. Когда проблема не в объектах высокого уровня, а в байтах, он позволяет увидеть истину без промежуточных абстракций.
Sensors
Layer 4
Инструмент для эмуляции сенсоров и окружения устройства: геолокации, ориентации, idle-state и других факторов, от которых может зависеть поведение приложения.
Когда открывать
Когда приложение зависит от геолокации, ориентации устройства, motion-сценариев, idle-state или похожих параметров среды, которые сложно стабильно воспроизводить на реальном устройстве.
Где находится
More tools → Sensors. Обычно используется вместе с Device Mode и страницами, поведение которых зависит от мобильного или физического контекста устройства.
Что смотреть
Как приложение реагирует на поддельную геолокацию, изменение ориентации, idle-state и другие эмулированные параметры окружения, а также не ломается ли логика на граничных значениях.
Для чего полезен
Позволяет воспроизводить условия, которые неудобно менять руками в реальной жизни. Полезен для карт, travel-сценариев, mobile web и контекстно-зависимого поведения интерфейсов.
Device Mode
Layer 4
Режим эмуляции мобильных и других устройств: размеры экрана, DPR, touch, user agent и адаптивное поведение интерфейса под разные форм-факторы.
Когда открывать
Когда баг проявляется только на мобильном, ломается адаптив, touch-сценарий работает не так, viewport ведёт себя странно или нужно быстро проверить интерфейс в разных размерах и плотностях экрана.
Где находится
Включается через переключатель device toolbar в верхнем левом углу DevTools (или Ctrl+Shift+M / Cmd+Shift+M). Дальше можно выбрать готовое устройство или задать кастомные параметры вручную.
Что смотреть
Breakpoint-переходы, responsive layout, touch-реакции, viewport, DPR, размеры, поведение fixed/sticky элементов, открытие клавиатуры и то, как страница живёт в мобильной конфигурации.
Для чего полезен
Даёт быстрый и практичный способ ловить адаптивные проблемы без постоянного переключения на реальные устройства. Очень полезен как первый фильтр перед более точной мобильной проверкой.
Background Services
Layer 4
Инструмент для логирования событий фоновых сервисов браузера: background sync, notifications, push, payment handler и других сценариев, живущих вне активной вкладки.
Когда открывать
Когда проблема проявляется не в момент активного взаимодействия, а позже: не приходят push-уведомления, не срабатывает background sync, ломается фоновая логика или непонятно, что делает приложение вне вкладки.
Где находится
Вкладка Application → раздел Background Services (Background Sync, Push Messaging, Notifications, Payment Handler и другие подразделы).
Что смотреть
Логи фоновых событий, регистрации, попытки синхронизации, push, notifications, payment и другие сервисные активности, которые браузер хранит для отладки жизненного цикла background-функций.
Для чего полезен
Позволяет дебажить то, что иначе выглядит как магия вне экрана. Особенно полезен для PWA, сервис-воркеров и всех сценариев, где приложение должно что-то делать даже не будучи открытым у пользователя.