demo · v134

Framework trace — own track, colored spans

The Google doc that pushed this through hammered on one workflow: framework developers want their custom trace on the DevTools Performance panel so users can stop bouncing between “native” and “framework” tools. The new console.timeStamp(label, start, end, track, color) shape supports duration spans (with a start and end), grouped onto a named track, with a presentation color. Click render below to fire a realistic React-style commit trace and see the resulting timeline.

probing extended console.timeStamp…

Trace a render pass

DevTools Performance panel (simulated)

Main thread (browser)
app/render
app/network

The code

console.timeStamp(
  'Reconcile ',
  performance.now() - 12,           // start
  performance.now(),                 // end (turns it into a span)
  'app/render',                      // track
  'tertiary-dark',                   // color
);

// Quick markers still work too — start-only:
console.timeStamp('first paint hint');

see also