Разбираемся в Performance Extensibility API

Если вам нужно глубоко погружаться в детали перфоманса веб-приложения на клиенте, во вкладке Performance в Chrome DevTools появился Extensibility API.

Гарри Робертс показывает на примерах, как его применять. Например,

performance.measure('cssTime', {
  start: 'cssStart',
  end: 'cssEnd',
  detail: {
    devtools: {
      track: 'CSS',
      color: 'secondary-dark',
      tooltipText: 'External CSS fetched and parsed',
      properties: [
        ['URL', `app.css`],
        ['Transferred Size', `29.3 KB`],
        ['Decoded Body Size', `311.8 KB`],
        ['Queuing & Latency', `104 ms`],
        ['Download', `380 ms`]
      ]
    }
  }
});

Такой код создаст в отладочной панели трек CSS, внутри трека — «колбаску» с замером от отметки cssStart до отметки cssEnd тёмного цвета, которая будет подписана лейблом External CSS fetched and parsed. По клику на «колбаску» можно будет посмотреть дополнительные данные, переданные в properties.

По сути старые методы performance.mark() и performance.measure() обрастают возможностями, которые есть у нативных замеров. Теперь разработчик может создать себе заметные визуальные зацепки с деталями, которые сделают отладку производительности ещё более удобной.

https://csswizardry.com/2025/07/the-extensibility-api/