DevTools Map – карта инструментов Chrome DevTools через модель дебага

В Chrome DevTools очень много инструментов: Network, Elements, Console, Sources, Performance, Application, Memory, Rendering, Coverage, Recorder и многие другие.

С одной стороны, это делает DevTools мощной средой для отладки. С другой стороны, в них легко потеряться. Не всегда понятно, какую вкладку открыть, какой инструмент за что отвечает и где искать конкретную проблему.

Поэтому я собрал DevTools Map. Это карта инструментов Chrome DevTools, разложенная не по вкладкам, а по вопросам, которые мы задаём во время дебага.

Я разделил инструменты на четыре слоя:

1. Что пришло?
Инструменты, которые показывают, какие данные попали в приложение: запросы, ответы сервера, ресурсы, сертификаты, условия загрузки.

2. Что есть сейчас?
Инструменты, которые показывают текущее состояние приложения: DOM, CSS, storage, cookies, service workers, accessibility, issues.

3. Что выполняется?
Инструменты для анализа выполнения JavaScript: код, логика, breakpoints, call stack, console, пользовательские сценарии.

4. Как это работает во времени?
Инструменты для анализа производительности, таймингов и поведения: память, рендер, анимации, long tasks, layout shifts.

Главная идея простая: когда что-то ломается, важно не просто открыть DevTools, а быстро понять, какой инструмент использовать для поиска проблемы.

Я собрал карту DevTools здесь:
https://karpov.website.yandexcloud.net/devtools/

P.S.

Отдельной страницей я сделал карту готовности инструментов DevTools для работы с MCP, потому что эта часть может меняться чаще.

Карта DevTools MCP:
https://karpov.website.yandexcloud.net/devtools/mcp/

Chrome DevTools MCP:
https://github.com/ChromeDevTools/chrome-devtools-mcp/