v134 · devtools / performance

Profiling Harness

Run micro-benchmarks and emit console.timeStamp() marks with custom start, duration, track, and color for each measurement. The mock timeline below mirrors what appears in DevTools Performance panel for Chrome 134+.

checking console.timeStamp options…

Chrome 134 extends console.timeStamp(label, options): options.start sets a custom timestamp, options.duration creates a span (not just a point), options.track groups spans on a named DevTools swimlane, options.trackGroup provides a folder, and options.color controls the span colour.

Benchmarks

Mock Performance timeline (DevTools simulation)

Run benchmarks to populate timeline.

Generated console.timeStamp calls

Run benchmarks to see generated calls.

Usage pattern

// Chrome 134: console.timeStamp with full options
function runBenchmarks() {
  const t0 = performance.now();

  // Sort benchmark
  const sortStart = performance.now();
  const arr = Array.from({ length: 10000 }, () => Math.random());
  arr.sort((a, b) => a - b);
  const sortDuration = performance.now() - sortStart;

  console.timeStamp('Array Sort (10k)', {
    start: sortStart,             // precise start time
    duration: sortDuration,       // span length
    track: 'CPU Benchmarks',      // swimlane name
    trackGroup: 'App Profiler',   // folder in DevTools
    color: 'primary-light',       // blue span
  });

  // Parse benchmark
  const parseStart = performance.now();
  JSON.parse(JSON.stringify(bigObject));
  const parseDuration = performance.now() - parseStart;

  console.timeStamp('JSON roundtrip', {
    start: parseStart,
    duration: parseDuration,
    track: 'CPU Benchmarks',
    trackGroup: 'App Profiler',
    color: 'secondary-light',     // green span
  });
}