Performance & Tracing

// Enable metric collection
await send('Performance.enable');

// Get current metric values at any time
const metrics = await send('Performance.getMetrics');
// metrics.metrics = [
//   { name: 'Timestamp', value: 1719012345.678 },
//   { name: 'Documents', value: 1 },
//   { name: 'Frames', value: 1 },
//   { name: 'JSEventListeners', value: 47 },
//   { name: 'Nodes', value: 312 },
//   { name: 'LayoutCount', value: 14 },
//   { name: 'RecalcStyleCount', value: 18 },
//   { name: 'LayoutDuration', value: 0.023 },
//   { name: 'RecalcStyleDuration', value: 0.011 },
//   { name: 'ScriptDuration', value: 0.156 },
//   { name: 'TaskDuration', value: 0.312 },
//   { name: 'JSHeapUsedSize', value: 8453120 },
//   { name: 'JSHeapTotalSize', value: 12582912 },
//   ... more metrics
// ]Copy

// Capture before an action
const before = await send('Performance.getMetrics');

// Perform the action (navigate, click, load data)
await send('Page.navigate', { url: 'http://localhost:4200/dashboard' });
await waitForSelector('[data-testid="dashboard-loaded"]');

// Capture after
const after = await send('Performance.getMetrics');

// Compare
function getMetricValue(metrics, name) {
  const metric = metrics.metrics.find(m => m.name === name);
  return metric ? metric.value : 0;
}

const heapGrowth = getMetricValue(after, 'JSHeapUsedSize') - getMetricValue(before, 'JSHeapUsedSize');
const nodeGrowth = getMetricValue(after, 'Nodes') - getMetricValue(before, 'Nodes');

console.log(`Heap grew by: ${(heapGrowth / 1024 / 1024).toFixed(2)} MB`);
console.log(`DOM nodes added: ${nodeGrowth}`);Copy

// Collect trace events as they arrive
const traceEvents = [];

// Listen for trace data chunks
// (Tracing.dataCollected fires multiple times with batches of events)
ws.on('message', (data) => {
  const msg = JSON.parse(data.toString());
  if (msg.method === 'Tracing.dataCollected') {
    traceEvents.push(...msg.params.value);
  }
});

// Start recording
await send('Tracing.start', {
  categories: '-*,devtools.timeline,v8.execute,disabled-by-default-devtools.timeline',
  transferMode: 'ReportEvents'   // Send events as they happen
});

// ... perform the actions you want to profile ...
await send('Page.navigate', { url: 'http://localhost:4200' });
await waitForSelector('[data-testid="app-ready"]');

// Stop recording
await send('Tracing.end');

// Wait for tracingComplete event (signals all data has been sent)
await new Promise((resolve) => {
  const handler = (data) => {
    const msg = JSON.parse(data.toString());
    if (msg.method === 'Tracing.tracingComplete') {
      ws.removeListener('message', handler);
      resolve();
    }
  };
  ws.on('message', handler);
});Copy

const categories = await send('Tracing.getCategories');
// categories.categories = ['devtools.timeline', 'v8', 'blink', 'cc', 'gpu', ...]Copy

import { writeFileSync } from 'fs';

// Chrome trace format is just a JSON array of trace events
const traceFile = JSON.stringify(traceEvents);
writeFileSync('trace.json', traceFile);

console.log(`Trace saved: ${traceEvents.length} events`);
// Open in DevTools: Performance panel → Load profile → select trace.json
// Or open https://ui.perfetto.dev and drag the file inCopy

{
  "cat": "devtools.timeline",        // Category
  "name": "FunctionCall",             // Event type
  "ph": "X",                          // Phase: 'X' = complete, 'B' = begin, 'E' = end
  "ts": 1234567890,                   // Timestamp (microseconds)
  "dur": 5000,                        // Duration (microseconds) - for complete events
  "pid": 1234,                        // Process ID
  "tid": 5678,                        // Thread ID
  "args": {                           // Event-specific data
    "data": {
      "functionName": "renderComponent",
      "scriptId": "7",
      "url": "http://localhost:4200/main.js",
      "lineNumber": 42
    }
  }
}Copy

// Find the longest JavaScript functions
const longFunctions = traceEvents
  .filter(event => event.name === 'FunctionCall' && event.dur)
  .sort((a, b) => b.dur - a.dur)
  .slice(0, 10)
  .map(event => ({
    name: event.args?.data?.functionName || 'anonymous',
    duration: `${(event.dur / 1000).toFixed(1)}ms`,
    url: event.args?.data?.url
  }));

console.log('Top 10 slowest functions:', longFunctions);

// Find layout thrashing (forced reflows)
const forcedLayouts = traceEvents
  .filter(event => event.name === 'Layout' && event.args?.beginData?.dirtyObjects > 0);

console.log(`Forced layouts: ${forcedLayouts.length}`);

// Find long tasks (> 50ms - these block the main thread)
const longTasks = traceEvents
  .filter(event => event.name === 'RunTask' && event.dur > 50000);  // 50ms in microseconds

console.log(`Long tasks (> 50ms): ${longTasks.length}`);Copy

// In the package's diagnostic collector:
class DiagnosticCollector {
  // ...existing code...

  async captureMetricsSnapshot(label) {
    const metrics = await this.send('Performance.getMetrics');
    this.#metricsSnapshots = [
      ...this.#metricsSnapshots,
      { label, timestamp: Date.now(), metrics: metrics.metrics }
    ];
  }

  getMetricsReport() {
    return this.#metricsSnapshots;
  }
}Copy