Скрытые возможности Chrome DevTools

Mar 11, 2026 · 4 min read

Вы, вероятно, открываете Chrome DevTools десятки раз в день. Console, Elements, Network — привычный круг. Но DevTools незаметно превратился в гораздо более мощную среду, и большинство его лучших возможностей находятся на один уровень меню глубже, чем там, где останавливаются большинство разработчиков.

Вот малоизвестные функции Chrome DevTools, которые стоит добавить в ваш регулярный рабочий процесс.

Ключевые выводы

CSS Overview предоставляет полный аудит цветов, шрифтов и проблем со специфичностью — идеально подходит для выявления несоответствий в таблицах стилей перед рефакторингом.
Logpoints и Conditional Breakpoints позволяют отлаживать код без изменения исходников, переживают горячие перезагрузки и не требуют повторного развертывания.
Вкладка Coverage количественно определяет неиспользуемый JavaScript и CSS по каждому файлу, предоставляя конкретные цели для разделения кода и отложенной загрузки.
Layout Shift Regions и разбивка Main thread на панели Performance помогают точно определить виновников CLS и затратные пересчеты стилей.
Панель Network Conditions, инструменты блокировки запросов и вкладка Initiator предлагают детальный контроль над симуляцией запросов и точную трассировку стека вызовов.

CSS Overview: проверка здоровья ваших таблиц стилей

Как открыть: Нажмите меню с тремя точками (⋮) → More Tools → CSS Overview.

Запустите захват, и вы получите полную разбивку каждого цвета, семейства шрифтов, размера шрифта, медиа-запроса и проблемы со специфичностью на странице. В больших кодовых базах это бесценно для обнаружения почти дублирующихся цветов, таких как #fff и #ffffff, или селекторов с настолько высокой специфичностью, что их невозможно корректно переопределить.

Раздел Font Info особенно полезен — он показывает фактическое распределение размеров и начертаний шрифтов, которые отображаются, что часто выявляет несоответствия, которые должны были предотвратить дизайн-токены.

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

Продвинутая отладка в Chrome DevTools: Logpoints вместо console.log

Перестаньте засорять исходный код вызовами console.log. На панели Sources щелкните правой кнопкой мыши любой номер строки и выберите Add Logpoint. Введите любое выражение — оно будет выводиться в консоль без изменения вашего кода.

Это одна из самых недооцененных техник отладки в Chrome DevTools. Logpoints переживают горячие перезагрузки, не требуют повторного развертывания и исчезают без следа, когда вы закончите. Сочетайте их с Conditional Breakpoints (правый клик → Add Conditional Breakpoint), чтобы приостанавливать выполнение только при истинности определенного выражения — полезно для отладки периодических ошибок, которые появляются только после 50-й итерации цикла.

Вкладка Coverage: поиск и устранение неиспользуемого кода

Как открыть: Меню с тремя точками → More Tools → Coverage.

Нажмите запись, взаимодействуйте со страницей, затем остановите. DevTools покажет вам точный процент каждого JS и CSS файла, который никогда не выполнялся. Файл с 60–70% неиспользуемого кода — кандидат на разделение или отложенную загрузку.

Рабочий процесс прост: Coverage → определение мертвого кода → разделение или отсрочка → измерение улучшения LCP и TTI. Это напрямую влияет на ваши показатели Core Web Vitals.

Совет: Coverage не учитывает код, запускаемый при взаимодействии. Записывайте, проходя по ключевым пользовательским сценариям, а не только при загрузке страницы.

Инсайты панели Performance: отладка сдвигов макета и пересчета стилей

Панель Performance значительно улучшилась. Запишите сессию и посмотрите на разбивку Main thread — конкретно события Style Recalc и Layout. Изменение одного CSS-свойства родительского элемента может вызвать полный пересчет макета сотен узлов DOM.

Для отладки CLS включите Layout Shift Regions через панель Rendering (меню с тремя точками → More Tools → Rendering) перед записью. Сдвинутые элементы будут выделены синим оверлеем кадр за кадром, что сразу показывает, какой элемент переместился и когда.

Избегайте запроса свойств макета, таких как offsetHeight или getBoundingClientRect(), внутри циклов — каждый вызов принудительно запускает синхронный layout, что быстро накапливается.

Панель Network Conditions: детальная симуляция и трассировка запросов

Большинство разработчиков знают о глобальном троттлинге сети во вкладке Network. Меньше знают о панелях Request Blocking и Network Conditions, доступных через меню с тремя точками → More Tools.

Панель Network Conditions позволяет переопределить user agent и глобально отключить кеширование. Сам сетевой троттлинг обычно управляется из выпадающего списка троттлинга во вкладке Network, который симулирует более медленные соединения для тестирования. Новые версии DevTools также поддерживают более детальный троттлинг на уровне запросов через инструменты условий запросов.

Request Blocking (More Tools → Network Request Blocking) позволяет полностью блокировать определенные URL-шаблоны — полезно для тестирования поведения приложения, когда загрузка конкретного стороннего скрипта не удается.

Для трассировки источника запроса в вашем коде щелкните любой запрос во вкладке Network и откройте вкладку Initiator. Она показывает точный стек вызовов, который инициировал запрос — быстрый способ провести обратную инженерию незнакомых API-вызовов или отследить, откуда неожиданно запускается fetch.

Заключение

Перечисленные выше функции не являются малоизвестными ради самой малоизвестности — они решают реальные проблемы быстрее альтернатив. CSS Overview заменяет ручной аудит таблиц стилей. Logpoints заменяют временные выводы в консоль. Coverage делает оптимизацию бандлов конкретной, а не спекулятивной.

Лучшие техники отладки в Chrome DevTools имеют одну общую черту: они сокращают разрыв между «что-то не так» и «я точно знаю, что не так». Начните с одной функции из этого списка, встройте её в свой рабочий процесс, и остальное последует естественным образом.

Часто задаваемые вопросы

Logpoints привязаны к вашей сессии DevTools и конкретному маппингу исходных файлов. Они сохраняются до тех пор, пока исходный код страницы остается неизменным, а DevTools сохраняет состояние своего рабочего пространства. Однако они не сохраняются постоянно между перезапусками браузера, если вы не используете Workspace с настроенными локальными переопределениями файлов на панели Sources.

Tree-shaking удаляет код, который никогда не импортируется или не используется во время сборки на основе статического анализа. Вкладка Coverage измеряет выполнение во время работы, показывая код, который был отправлен в браузер, но фактически не выполнялся во время сессии. Они дополняют друг друга: tree-shaking отлавливает неиспользуемые экспорты, а Coverage — код, который достижим, но не используется на практике.

CSS Overview не предлагает встроенной функции экспорта. Однако вы можете вручную скопировать данные из каждого раздела или сделать скриншоты. Для более автоматизированного подхода рассмотрите использование инструментов, таких как cssstats.com или Wallace CLI, которые анализируют таблицы стилей и создают экспортируемые отчеты с аналогичными разбивками по цветам, шрифтам и специфичности.

Включение Layout Shift Regions через панель Rendering добавляет визуальный оверлей, но не влияет существенно на метрики панели Performance. Стоимость рендеринга оверлея незначительна. Для наиболее точных результатов профилирования закройте другие вкладки, отключите расширения браузера и используйте режим инкогнито, чтобы минимизировать влияние фоновых процессов.

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.