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/
В 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/