Chrome DevTools 134 вышел с порцией обновлений, которые упрощают работу с производительностью, приватностью и отладкой. Вот восемь фич, на которые стоит обратить внимание.
Optimize DOM size — находишь раздутое дерево без гаданий
Большое DOM-дерево тормозит рендеринг и замедляет интерактивность. Во вкладке Insights в панели Performance появился инсайт «Optimize DOM size»: он показывает общее число элементов, глубину дерева и — самое приятное — кликабельные ссылки на конкретные узлы прямо в панели Elements. Больше не нужно угадывать, где проблема.
Как попробовать: запиши загрузку страницы в панели Performance → открой вкладку Insights → найди «Optimize DOM size».
Фильтрация сторонних скриптов — фокус на своём коде
Когда треть флейм-чарта занимают аналитики и рекламные сети, найти проблему в собственном коде непросто. Теперь в настройках панели Performance есть опция «Dim 3rd parties»: она приглушает активность сторонних скриптов. В сводной таблице Summary появилась разбивка first-party / third-party — можно навести курсор на любую группу (Yahoo, Google CDN, HubSpot и т. д.) и сразу увидеть соответствующие события на флейм-чарте.
Совет: тестируй в режиме инкогнито с включённым троттлингом сети и CPU — так расширения браузера не будут шуметь в записи.
Privacy and Security panel — тест без сторонних cookies
Веб движется в сторону ужесточения приватности, и важно знать заранее, как сайт ведёт себя без третьесторонних cookies. В новой панели Privacy and Security есть переключатель, который блокирует third-party cookies прямо в DevTools — без изменения глобальных настроек Chrome. Там же можно посмотреть, какие cookies были заблокированы или получили исключение, и проверить SSL-сертификат страницы.
Как попробовать: открой панель Privacy and Security → вкладка Controls → включи ограничение third-party cookies → перезагрузи страницу → смотри таблицу во вкладке Third-party cookies.
Калиброванный CPU-троттлинг — реалистичная симуляция устройств
Стандартный троттлинг «×4 slowdown» одинаков для всех машин, хотя мощность у всех разная. Новая функция калиброванного CPU-троттлинга подстраивает коэффициент замедления под конкретное железо, на котором запущен DevTools. Результат — более честная симуляция реальных устройств.
И ещё четыре фичи в той же версии
DebugBear упоминает ещё несколько обновлений в DevTools 134, которые вошли в тот же релиз: улучшения в работе с сетевыми запросами, обновления в панели Sources и другие инструменты оптимизации. Все восемь фич доступны в Chrome 134+ и частично — в Microsoft Edge (как Chromium-браузере).
Если давно не смотрел, что нового в DevTools — самое время открыть панель Performance и попробовать инсайты вживую. 🦆