devtools-tracing 1.4.0 → 1.6.0

package/README.md

@@ -31,7 +31,7 @@ npx devtools-tracing inp trace.json.gz
 npx devtools-tracing stats trace.json.gz
 
 # Source map symbolication (writes a .symbolicated.json.gz alongside the input)
-npx devtools-tracing sourcemap trace.json.gz
+npx devtools-tracing sourcemap trace.json.gz -H "Cookie: $cookie" -H "User-Agent: $ua"
 ```
 
 See the [`commands/`](./commands) directory for full source.

package/cli.ts

@@ -1,9 +1,9 @@
 import { run as cssSelectors } from './commands/selector-stats.js';
 import { run as inp } from './commands/inp.js';
-import { run as sourcemap } from './commands/sourcemap.js';
+import { run as sourcemap, type SourcemapOptions } from './commands/sourcemap.js';
 import { run as stats } from './commands/stats.js';
 
-const commands: Record<string, (tracePath: string) => Promise<void>> = {
+const commands: Record<string, (tracePath: string, ...args: any[]) => Promise<void>> = {
   'selector-stats': cssSelectors,
   inp,
   sourcemap,
@@ -15,12 +15,30 @@ function printUsage() {
   console.log('\nCommands:');
   console.log('  selector-stats  Top CSS selectors from selector stats and invalidation tracking');
   console.log('  inp            Extract INP (Interaction to Next Paint) breakdown');
-  console.log('  sourcemap      Symbolicate a trace using source maps');
+  console.log('  sourcemap      Symbolicate a trace using source maps [-H "Header: value"]');
   console.log('  stats          Generate timeline category statistics');
 }
 
+function parseHeaders(args: string[]): Record<string, string> {
+  const headers: Record<string, string> = {};
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '-H' && i + 1 < args.length) {
+      const value = args[++i];
+      const colonIdx = value.indexOf(':');
+      if (colonIdx === -1) {
+        console.error(`Invalid header (missing ':'): ${value}`);
+        process.exit(1);
+      }
+      headers[value.slice(0, colonIdx).trim()] = value.slice(colonIdx + 1).trim();
+    }
+  }
+  return headers;
+}
+
 async function main() {
-  const [command, tracePath] = process.argv.slice(2);
+  const args = process.argv.slice(2);
+  const command = args[0];
+  const tracePath = args[1];
 
   if (!command || command === '--help' || command === '-h') {
     printUsage();
@@ -40,7 +58,13 @@ async function main() {
     process.exit(1);
   }
 
-  await run(tracePath);
+  if (command === 'sourcemap') {
+    const headers = parseHeaders(args.slice(2));
+    const options: SourcemapOptions = Object.keys(headers).length > 0 ? { headers } : {};
+    await sourcemap(tracePath, options);
+  } else {
+    await run(tracePath);
+  }
 }
 
 main();

package/dist/cli.js

@@ -27,6 +27,7 @@ var fs = __toESM(require("node:fs"));
 var zlib = __toESM(require("node:zlib"));
 var import__ = require("../");
 var SelectorTimingsKey = import__.Trace.Types.Events.SelectorTimingsKey;
+var microToMilli = (us) => import__.Trace.Helpers.Timing.microToMilli(import__.Trace.Types.Timing.Micro(us));
 async function run(tracePath) {
   (0, import__.initDevToolsTracing)();
   const fileData = fs.readFileSync(tracePath);
@@ -66,55 +67,69 @@ async function run(tracePath) {
   }
   const allTimings = [...selectorMap.values()];
   const TOP_N = 15;
+  const truncateSelector = (s) => s.length > 80 ? `${s.slice(0, 77)}...` : s;
   const byElapsed = allTimings.sort(
     (a, b) => b[SelectorTimingsKey.Elapsed] - a[SelectorTimingsKey.Elapsed]
   ).slice(0, TOP_N);
   console.log(`
 === Top ${TOP_N} CSS Selectors by Elapsed Time ===
 `);
-  for (const t of byElapsed) {
-    const elapsedMs = (t[SelectorTimingsKey.Elapsed] / 1e3).toFixed(2);
-    console.log(
-      `  ${elapsedMs}ms | attempts: ${t[SelectorTimingsKey.MatchAttempts]} | matches: ${t[SelectorTimingsKey.MatchCount]} | ${t[SelectorTimingsKey.Selector]}`
-    );
-  }
+  console.table(
+    Object.fromEntries(
+      byElapsed.map((t, i) => [
+        i + 1,
+        {
+          selector: truncateSelector(t[SelectorTimingsKey.Selector]),
+          "elapsed (ms)": microToMilli(t[SelectorTimingsKey.Elapsed]),
+          match_attempts: t[SelectorTimingsKey.MatchAttempts],
+          match_count: t[SelectorTimingsKey.MatchCount],
+          fast_reject_count: t[SelectorTimingsKey.FastRejectCount]
+        }
+      ])
+    )
+  );
   const byAttempts = [...selectorMap.values()].sort(
     (a, b) => b[SelectorTimingsKey.MatchAttempts] - a[SelectorTimingsKey.MatchAttempts]
   ).slice(0, TOP_N);
   console.log(`
 === Top ${TOP_N} CSS Selectors by Match Attempts ===
 `);
-  for (const t of byAttempts) {
-    const elapsedMs = (t[SelectorTimingsKey.Elapsed] / 1e3).toFixed(2);
-    console.log(
-      `  ${t[SelectorTimingsKey.MatchAttempts]} attempts | ${elapsedMs}ms | matches: ${t[SelectorTimingsKey.MatchCount]} | ${t[SelectorTimingsKey.Selector]}`
-    );
-  }
-  const invalidatedNodes = selectorStatsData.invalidatedNodeList;
-  console.log(
-    `
-=== Invalidation Tracking (${invalidatedNodes.length} invalidated nodes) ===
-`
+  console.table(
+    Object.fromEntries(
+      byAttempts.map((t, i) => [
+        i + 1,
+        {
+          selector: truncateSelector(t[SelectorTimingsKey.Selector]),
+          match_attempts: t[SelectorTimingsKey.MatchAttempts],
+          "elapsed (ms)": microToMilli(t[SelectorTimingsKey.Elapsed]),
+          match_count: t[SelectorTimingsKey.MatchCount],
+          fast_reject_count: t[SelectorTimingsKey.FastRejectCount]
+        }
+      ])
+    )
   );
-  const invalidationSelectorCounts = /* @__PURE__ */ new Map();
-  for (const node of invalidatedNodes) {
-    for (const sel of node.selectorList) {
-      const count = invalidationSelectorCounts.get(sel.selector) ?? 0;
-      invalidationSelectorCounts.set(sel.selector, count + 1);
-    }
+  const invalidationsData = parsedTraceData.Invalidations;
+  const allInvalidations = [];
+  for (const [, invalidations] of invalidationsData.invalidationsForEvent) {
+    allInvalidations.push(...invalidations);
   }
-  const topInvalidationSelectors = [...invalidationSelectorCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, TOP_N);
+  const { groupedByReason, backendNodeIds } = (0, import__.generateInvalidationsList)(allInvalidations);
+  const reasons = Object.entries(groupedByReason).sort((a, b) => b[1].length - a[1].length);
   console.log(
-    `  Top ${TOP_N} selectors causing invalidations:
+    `
+=== Invalidation Tracking (${allInvalidations.length} invalidations, ${backendNodeIds.size} unique nodes) ===
 `
   );
-  for (const [selector, count] of topInvalidationSelectors) {
-    console.log(`  ${count}x | ${selector}`);
-  }
-  const subtreeCount = invalidatedNodes.filter((n) => n.subtree).length;
-  console.log(
-    `
-  Subtree invalidations: ${subtreeCount} / ${invalidatedNodes.length} total`
+  console.table(
+    Object.fromEntries(
+      reasons.map(([reason, invalidations], i) => [
+        i + 1,
+        {
+          reason,
+          count: invalidations.length
+        }
+      ])
+    )
   );
   let totalElapsedUs = 0;
   let totalMatchAttempts = 0;
@@ -127,10 +142,12 @@ async function run(tracePath) {
   console.log(`
 === Totals ===
 `);
-  console.log(`  Unique selectors: ${allTimings.length}`);
-  console.log(`  Total elapsed: ${(totalElapsedUs / 1e3).toFixed(2)}ms`);
-  console.log(`  Total match attempts: ${totalMatchAttempts}`);
-  console.log(`  Total match count: ${totalMatchCount}`);
+  console.table({
+    "Unique selectors": allTimings.length,
+    "Total elapsed (ms)": microToMilli(totalElapsedUs),
+    "Total match attempts": totalMatchAttempts,
+    "Total match count": totalMatchCount
+  });
 }
 
 // commands/inp.ts
@@ -159,8 +176,9 @@ async function run2(tracePath) {
 var fs3 = __toESM(require("node:fs"));
 var zlib3 = __toESM(require("node:zlib"));
 var import__3 = require("../");
-async function run3(tracePath) {
+async function run3(tracePath, options) {
   (0, import__3.initDevToolsTracing)();
+  const extraHeaders = options?.headers;
   const fileData = fs3.readFileSync(tracePath);
   const decompressedData = tracePath.endsWith(".gz") ? zlib3.gunzipSync(fileData) : fileData;
   const traceData = JSON.parse(
@@ -168,9 +186,10 @@ async function run3(tracePath) {
   );
   const traceModel = import__3.Trace.TraceModel.Model.createWithAllHandlers();
   const resolveSourceMap = (0, import__3.createSourceMapResolver)({
-    fetch: verboseFetch
+    fetch: (url) => verboseFetch(url, extraHeaders)
   });
-  await traceModel.parse(traceData.traceEvents, {
+  const preprocessedEvents = fixupElectronTraceEvents(traceData.traceEvents);
+  await traceModel.parse(preprocessedEvents, {
     isCPUProfile: false,
     isFreshRecording: false,
     metadata: traceData.metadata,
@@ -221,7 +240,7 @@ async function run3(tracePath) {
   console.log(
     `Symbolicated ${result.symbolicatedFrames} frames across ${result.symbolicatedEvents} events`
   );
-  const outPath = tracePath.replace(/(\.(json|json\.gz))$/i, ".symbolicated$1");
+  const outPath = tracePath.replace(/(\.(json|trace|json\.gz))$/i, ".symbolicated$1");
   if (outPath === tracePath) {
     console.error(
       "Could not determine output path (expected .json or .json.gz extension)"
@@ -236,9 +255,80 @@ async function run3(tracePath) {
   }
   console.log(`Wrote symbolicated trace to ${outPath}`);
 }
-async function verboseFetch(url) {
+var { isTracingStartedInBrowser, isFunctionCall, isRundownScript, isProcessName } = import__3.Trace.Types.Events;
+function fixupElectronTraceEvents(events) {
+  const hasFrameData = events.some(
+    (e) => isTracingStartedInBrowser(e) && e.args.data?.frames?.length
+  );
+  if (hasFrameData) {
+    return events;
+  }
+  const rundownCats = /* @__PURE__ */ new Set([
+    "disabled-by-default-devtools.v8-source-rundown",
+    "disabled-by-default-devtools.v8-source-rundown-sources"
+  ]);
+  const isolateToFrame = /* @__PURE__ */ new Map();
+  const frameToPid = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    if (!isFunctionCall(event)) continue;
+    const data = event.args?.data;
+    if (!data?.isolate || !data?.frame) continue;
+    isolateToFrame.set(String(data.isolate), data.frame);
+    frameToPid.set(data.frame, event.pid);
+  }
+  const frameToUrl = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    if (!isRundownScript(event)) continue;
+    const data = event.args.data;
+    const url = data.url ?? "";
+    const isolate = String(data.isolate ?? "");
+    const frame = isolateToFrame.get(isolate);
+    if (!frame || !url || !url.startsWith("http")) continue;
+    const existing = frameToUrl.get(frame);
+    const isDocument = !url.match(/\.(js|cjs|mjs|wasm)(\?|$)/i);
+    const existingIsDocument = existing && !existing.match(/\.(js|cjs|mjs|wasm)(\?|$)/i);
+    if (!existing || isDocument && !existingIsDocument) {
+      frameToUrl.set(frame, url);
+    }
+  }
+  const browserPid = events.find(
+    (e) => isProcessName(e) && e.args?.name === "Browser"
+  )?.pid;
+  const syntheticEvents = [];
+  for (const [frame, pid] of frameToPid) {
+    const url = frameToUrl.get(frame) ?? "";
+    syntheticEvents.push({
+      cat: "disabled-by-default-devtools.timeline",
+      name: "FrameCommittedInBrowser",
+      ph: import__3.Trace.Types.Events.Phase.INSTANT,
+      pid: browserPid ?? pid,
+      tid: 0,
+      ts: 0,
+      s: import__3.Trace.Types.Events.Scope.GLOBAL,
+      args: {
+        data: {
+          frame,
+          name: "",
+          processId: pid,
+          url
+        }
+      }
+    });
+  }
+  const regular = [];
+  const rundown = [];
+  for (const event of events) {
+    if (rundownCats.has(event.cat)) {
+      rundown.push(event);
+    } else {
+      regular.push(event);
+    }
+  }
+  return [...syntheticEvents, ...regular, ...rundown];
+}
+async function verboseFetch(url, headers) {
   console.log(`[sourcemap] fetching ${url}`);
-  const response = await fetch(url);
+  const response = await fetch(url, headers ? { headers } : void 0);
   if (!response.ok) {
     console.warn(
       `[sourcemap] ${url} -> ${response.status} ${response.statusText}`
@@ -306,11 +396,28 @@ function printUsage() {
   console.log("\nCommands:");
   console.log("  selector-stats  Top CSS selectors from selector stats and invalidation tracking");
   console.log("  inp            Extract INP (Interaction to Next Paint) breakdown");
-  console.log("  sourcemap      Symbolicate a trace using source maps");
+  console.log('  sourcemap      Symbolicate a trace using source maps [-H "Header: value"]');
   console.log("  stats          Generate timeline category statistics");
 }
+function parseHeaders(args) {
+  const headers = {};
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "-H" && i + 1 < args.length) {
+      const value = args[++i];
+      const colonIdx = value.indexOf(":");
+      if (colonIdx === -1) {
+        console.error(`Invalid header (missing ':'): ${value}`);
+        process.exit(1);
+      }
+      headers[value.slice(0, colonIdx).trim()] = value.slice(colonIdx + 1).trim();
+    }
+  }
+  return headers;
+}
 async function main() {
-  const [command, tracePath] = process.argv.slice(2);
+  const args = process.argv.slice(2);
+  const command = args[0];
+  const tracePath = args[1];
   if (!command || command === "--help" || command === "-h") {
     printUsage();
     process.exit(0);
@@ -326,6 +433,12 @@ async function main() {
     console.error(`Usage: devtools-tracing ${command} <trace-file>`);
     process.exit(1);
   }
-  await run5(tracePath);
+  if (command === "sourcemap") {
+    const headers = parseHeaders(args.slice(2));
+    const options = Object.keys(headers).length > 0 ? { headers } : {};
+    await run3(tracePath, options);
+  } else {
+    await run5(tracePath);
+  }
 }
 main();

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { initDevToolsTracing } from './src/init.js';
 export { statsForTimeRange, entryIsVisibleInTimeline } from './src/timeline.js';
+export { generateInvalidationsList } from './src/invalidations.js';
 export { createSourceMapResolver, symbolicateTrace } from './src/sourcemap.js';
 export type { SymbolicateOptions, SymbolicateResult } from './src/sourcemap.js';
 import * as Trace from './lib/front_end/models/trace/trace.js';

package/dist/index.js

@@ -10998,6 +10998,7 @@ __export(index_exports, {
   Trace: () => trace_exports,
   createSourceMapResolver: () => createSourceMapResolver,
   entryIsVisibleInTimeline: () => entryIsVisibleInTimeline,
+  generateInvalidationsList: () => generateInvalidationsList,
   initDevToolsTracing: () => initDevToolsTracing,
   statsForTimeRange: () => statsForTimeRange,
   symbolicateTrace: () => symbolicateTrace
@@ -42414,6 +42415,51 @@ function entryIsVisibleInTimeline(entry, parsedTrace) {
   return eventStyle && !eventStyle.hidden || eventIsTiming;
 }
 
+// src/invalidations.ts
+function generateInvalidationsList(invalidations) {
+  const groupedByReason = {};
+  const backendNodeIds2 = /* @__PURE__ */ new Set();
+  for (const invalidation of invalidations) {
+    backendNodeIds2.add(invalidation.args.data.nodeId);
+    let reason = invalidation.args.data.reason || "unknown";
+    if (reason === "unknown" && types_exports.Events.isScheduleStyleInvalidationTracking(invalidation) && invalidation.args.data.invalidatedSelectorId) {
+      switch (invalidation.args.data.invalidatedSelectorId) {
+        case "attribute":
+          reason = "Attribute";
+          if (invalidation.args.data.changedAttribute) {
+            reason += ` (${invalidation.args.data.changedAttribute})`;
+          }
+          break;
+        case "class":
+          reason = "Class";
+          if (invalidation.args.data.changedClass) {
+            reason += ` (${invalidation.args.data.changedClass})`;
+          }
+          break;
+        case "id":
+          reason = "Id";
+          if (invalidation.args.data.changedId) {
+            reason += ` (${invalidation.args.data.changedId})`;
+          }
+          break;
+      }
+    }
+    if (reason === "PseudoClass" && types_exports.Events.isStyleRecalcInvalidationTracking(invalidation) && invalidation.args.data.extraData) {
+      reason += invalidation.args.data.extraData;
+    }
+    if (reason === "Attribute" && types_exports.Events.isStyleRecalcInvalidationTracking(invalidation) && invalidation.args.data.extraData) {
+      reason += ` (${invalidation.args.data.extraData})`;
+    }
+    if (reason === "StyleInvalidator") {
+      continue;
+    }
+    const existing = groupedByReason[reason] || [];
+    existing.push(invalidation);
+    groupedByReason[reason] = existing;
+  }
+  return { groupedByReason, backendNodeIds: backendNodeIds2 };
+}
+
 // lib/front_end/core/sdk/sdk.ts
 var sdk_exports = {};
 __export(sdk_exports, {
@@ -86844,6 +86890,7 @@ function decodeDataUrl(dataUrl) {
   Trace,
   createSourceMapResolver,
   entryIsVisibleInTimeline,
+  generateInvalidationsList,
   initDevToolsTracing,
   statsForTimeRange,
   symbolicateTrace

package/dist/src/invalidations.d.ts

@@ -0,0 +1,6 @@
+import type * as Protocol from '../lib/front_end/generated/protocol.js';
+import * as Trace from '../lib/front_end/models/trace/trace.js';
+export declare function generateInvalidationsList(invalidations: Trace.Types.Events.InvalidationTrackingEvent[]): {
+    groupedByReason: Record<string, Trace.Types.Events.InvalidationTrackingEvent[]>;
+    backendNodeIds: Set<Protocol.DOM.BackendNodeId>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devtools-tracing",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Utilities for working with trace files",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/commands/inp.ts

@@ -1,27 +0,0 @@
-import * as fs from 'node:fs';
-import * as zlib from 'node:zlib';
-
-import { initDevToolsTracing, Trace } from '../';
-
-export async function run(tracePath: string) {
-  initDevToolsTracing();
-
-  const fileData = fs.readFileSync(tracePath);
-  const decompressedData = tracePath.endsWith('.gz')
-    ? zlib.gunzipSync(fileData)
-    : fileData;
-  const traceData = JSON.parse(
-    decompressedData.toString()
-  ) as Trace.Types.File.TraceFile;
-
-  const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
-  await processor.parse(traceData.traceEvents, {});
-  const insights = processor.insights!.get('NO_NAVIGATION');
-  const longestInteractionEvent =
-    insights!.model.INPBreakdown.longestInteractionEvent!;
-  const inp = longestInteractionEvent.dur / 1000;
-  console.log({
-    insights: insights?.model.INPBreakdown,
-    inp,
-  });
-}

package/commands/selector-stats.ts

@@ -1,145 +0,0 @@
-import * as fs from 'node:fs';
-import * as zlib from 'node:zlib';
-
-import { initDevToolsTracing, Trace } from '../';
-
-const SelectorTimingsKey = Trace.Types.Events.SelectorTimingsKey;
-
-export async function run(tracePath: string) {
-  initDevToolsTracing();
-
-  const fileData = fs.readFileSync(tracePath);
-  const decompressedData = tracePath.endsWith('.gz')
-    ? zlib.gunzipSync(fileData)
-    : fileData;
-  const traceData = JSON.parse(
-    decompressedData.toString(),
-  ) as Trace.Types.File.TraceFile;
-
-  const traceModel = Trace.TraceModel.Model.createWithAllHandlers({
-    debugMode: true,
-    enableAnimationsFrameHandler: false,
-    maxInvalidationEventsPerEvent: 20,
-    showAllEvents: false,
-  });
-  await traceModel.parse(traceData.traceEvents, {
-    isCPUProfile: false,
-    isFreshRecording: false,
-    metadata: traceData.metadata,
-    showAllEvents: false,
-  });
-  const parsedTrace = traceModel.parsedTrace(0)!;
-  const parsedTraceData = parsedTrace.data;
-
-  // --- Selector Stats ---
-  const selectorStatsData = parsedTraceData.SelectorStats;
-  const selectorMap = new Map<
-    string,
-    Trace.Types.Events.SelectorTiming
-  >();
-
-  for (const [, value] of selectorStatsData.dataForRecalcStyleEvent) {
-    for (const timing of value.timings) {
-      const key =
-        timing[SelectorTimingsKey.Selector] +
-        '_' +
-        timing[SelectorTimingsKey.StyleSheetId];
-      const existing = selectorMap.get(key);
-      if (existing) {
-        existing[SelectorTimingsKey.Elapsed] +=
-          timing[SelectorTimingsKey.Elapsed];
-        existing[SelectorTimingsKey.MatchAttempts] +=
-          timing[SelectorTimingsKey.MatchAttempts];
-        existing[SelectorTimingsKey.MatchCount] +=
-          timing[SelectorTimingsKey.MatchCount];
-        existing[SelectorTimingsKey.FastRejectCount] +=
-          timing[SelectorTimingsKey.FastRejectCount];
-      } else {
-        selectorMap.set(key, { ...timing });
-      }
-    }
-  }
-
-  const allTimings = [...selectorMap.values()];
-  const TOP_N = 15;
-
-  // Top selectors by elapsed time
-  const byElapsed = allTimings
-    .sort(
-      (a, b) =>
-        b[SelectorTimingsKey.Elapsed] - a[SelectorTimingsKey.Elapsed],
-    )
-    .slice(0, TOP_N);
-
-  console.log(`\n=== Top ${TOP_N} CSS Selectors by Elapsed Time ===\n`);
-  for (const t of byElapsed) {
-    const elapsedMs = (t[SelectorTimingsKey.Elapsed] / 1000).toFixed(2);
-    console.log(
-      `  ${elapsedMs}ms | attempts: ${t[SelectorTimingsKey.MatchAttempts]} | matches: ${t[SelectorTimingsKey.MatchCount]} | ${t[SelectorTimingsKey.Selector]}`,
-    );
-  }
-
-  // Top selectors by match attempts
-  const byAttempts = [...selectorMap.values()]
-    .sort(
-      (a, b) =>
-        b[SelectorTimingsKey.MatchAttempts] -
-        a[SelectorTimingsKey.MatchAttempts],
-    )
-    .slice(0, TOP_N);
-
-  console.log(`\n=== Top ${TOP_N} CSS Selectors by Match Attempts ===\n`);
-  for (const t of byAttempts) {
-    const elapsedMs = (t[SelectorTimingsKey.Elapsed] / 1000).toFixed(2);
-    console.log(
-      `  ${t[SelectorTimingsKey.MatchAttempts]} attempts | ${elapsedMs}ms | matches: ${t[SelectorTimingsKey.MatchCount]} | ${t[SelectorTimingsKey.Selector]}`,
-    );
-  }
-
-  // --- Invalidation Tracking ---
-  const invalidatedNodes = selectorStatsData.invalidatedNodeList;
-  console.log(
-    `\n=== Invalidation Tracking (${invalidatedNodes.length} invalidated nodes) ===\n`,
-  );
-
-  // Aggregate selectors that caused invalidations
-  const invalidationSelectorCounts = new Map<string, number>();
-  for (const node of invalidatedNodes) {
-    for (const sel of node.selectorList) {
-      const count = invalidationSelectorCounts.get(sel.selector) ?? 0;
-      invalidationSelectorCounts.set(sel.selector, count + 1);
-    }
-  }
-
-  const topInvalidationSelectors = [...invalidationSelectorCounts.entries()]
-    .sort((a, b) => b[1] - a[1])
-    .slice(0, TOP_N);
-
-  console.log(
-    `  Top ${TOP_N} selectors causing invalidations:\n`,
-  );
-  for (const [selector, count] of topInvalidationSelectors) {
-    console.log(`  ${count}x | ${selector}`);
-  }
-
-  // Subtree vs single-node invalidations
-  const subtreeCount = invalidatedNodes.filter((n) => n.subtree).length;
-  console.log(
-    `\n  Subtree invalidations: ${subtreeCount} / ${invalidatedNodes.length} total`,
-  );
-
-  // --- Totals ---
-  let totalElapsedUs = 0;
-  let totalMatchAttempts = 0;
-  let totalMatchCount = 0;
-  for (const t of allTimings) {
-    totalElapsedUs += t[SelectorTimingsKey.Elapsed];
-    totalMatchAttempts += t[SelectorTimingsKey.MatchAttempts];
-    totalMatchCount += t[SelectorTimingsKey.MatchCount];
-  }
-  console.log(`\n=== Totals ===\n`);
-  console.log(`  Unique selectors: ${allTimings.length}`);
-  console.log(`  Total elapsed: ${(totalElapsedUs / 1000).toFixed(2)}ms`);
-  console.log(`  Total match attempts: ${totalMatchAttempts}`);
-  console.log(`  Total match count: ${totalMatchCount}`);
-}

package/commands/sourcemap.ts

@@ -1,114 +0,0 @@
-import * as fs from 'node:fs';
-import * as zlib from 'node:zlib';
-
-import {
-  initDevToolsTracing,
-  createSourceMapResolver,
-  symbolicateTrace,
-  Trace,
-} from '../';
-
-export async function run(tracePath: string) {
-  initDevToolsTracing();
-
-  const fileData = fs.readFileSync(tracePath);
-  const decompressedData = tracePath.endsWith('.gz')
-    ? zlib.gunzipSync(fileData)
-    : fileData;
-  const traceData = JSON.parse(
-    decompressedData.toString(),
-  ) as Trace.Types.File.TraceFile;
-
-  const traceModel = Trace.TraceModel.Model.createWithAllHandlers();
-  const resolveSourceMap = createSourceMapResolver({
-    fetch: verboseFetch,
-  });
-
-  await traceModel.parse(traceData.traceEvents, {
-    isCPUProfile: false,
-    isFreshRecording: false,
-    metadata: traceData.metadata,
-    showAllEvents: false,
-    resolveSourceMap,
-  });
-
-  const parsedTrace = traceModel.parsedTrace(0)!;
-  const parsedTraceData = parsedTrace.data;
-  const scripts = parsedTraceData.Scripts.scripts;
-
-  const metadataSourceMaps = traceData.metadata?.sourceMaps?.length ?? 0;
-  console.log(`Found ${scripts.length} scripts in trace`);
-  console.log(`Source maps in trace metadata: ${metadataSourceMaps}\n`);
-
-  // Diagnostic: show script properties to explain resolution results.
-  let withUrl = 0;
-  let withFrame = 0;
-  let withSourceMapUrl = 0;
-  let withElided = 0;
-  for (const script of scripts) {
-    if (script.url) withUrl++;
-    if (script.frame) withFrame++;
-    if (script.sourceMapUrl) withSourceMapUrl++;
-    if (script.sourceMapUrlElided) withElided++;
-  }
-  console.log('Script breakdown:');
-  console.log(`  with url:                ${withUrl}`);
-  console.log(`  with frame:              ${withFrame}`);
-  console.log(`  with sourceMapUrl:       ${withSourceMapUrl}`);
-  console.log(`  with sourceMapUrlElided: ${withElided}`);
-  console.log(`  (resolution requires url + frame + sourceMapUrl/elided)\n`);
-
-  let resolvedCount = 0;
-  for (const script of scripts) {
-    if (!script.sourceMap) {
-      continue;
-    }
-    resolvedCount++;
-
-    const sourceMap = script.sourceMap;
-    const sourceURLs = sourceMap.sourceURLs();
-
-    console.log(
-      `  ${script.url || script.scriptId} -> ${sourceURLs.length} sources, ${sourceMap.mappings().length} mappings`,
-    );
-  }
-
-  console.log(
-    `Resolved source maps for ${resolvedCount} of ${scripts.length} scripts\n`,
-  );
-
-  // Symbolicate the raw trace events in-place using resolved source maps.
-  const result = symbolicateTrace(traceData.traceEvents, scripts);
-  console.log(
-    `Symbolicated ${result.symbolicatedFrames} frames across ${result.symbolicatedEvents} events`,
-  );
-
-  // Write the symbolicated trace to a new file.
-  const outPath = tracePath.replace(/(\.(json|json\.gz))$/i, '.symbolicated$1');
-  if (outPath === tracePath) {
-    console.error(
-      'Could not determine output path (expected .json or .json.gz extension)',
-    );
-    process.exit(1);
-  }
-  const outputJson = JSON.stringify(traceData);
-  if (outPath.endsWith('.gz')) {
-    fs.writeFileSync(outPath, zlib.gzipSync(outputJson));
-  } else {
-    fs.writeFileSync(outPath, outputJson);
-  }
-  console.log(`Wrote symbolicated trace to ${outPath}`);
-}
-
-async function verboseFetch(url: string): Promise<Response> {
-  console.log(`[sourcemap] fetching ${url}`);
-  const response = await fetch(url);
-  if (!response.ok) {
-    console.warn(
-      `[sourcemap] ${url} -> ${response.status} ${response.statusText}`,
-    );
-  } else {
-    console.log(`[sourcemap] ${url} -> ok`);
-  }
-  return response;
-}

package/commands/stats.ts

@@ -1,58 +0,0 @@
-import * as fs from 'node:fs';
-import * as zlib from 'node:zlib';
-
-import {
-  initDevToolsTracing,
-  entryIsVisibleInTimeline,
-  statsForTimeRange,
-  Trace,
-} from '../';
-
-export async function run(tracePath: string) {
-  initDevToolsTracing();
-
-  const fileData = fs.readFileSync(tracePath);
-  const decompressedData = tracePath.endsWith('.gz')
-    ? zlib.gunzipSync(fileData)
-    : fileData;
-  const traceData = JSON.parse(
-    decompressedData.toString(),
-  ) as Trace.Types.File.TraceFile;
-
-  const traceModel = Trace.TraceModel.Model.createWithAllHandlers({
-    debugMode: true,
-    enableAnimationsFrameHandler: false,
-    maxInvalidationEventsPerEvent: 20,
-    showAllEvents: false,
-  });
-  await traceModel.parse(traceData.traceEvents, {
-    isCPUProfile: false,
-    isFreshRecording: false,
-    metadata: traceData.metadata,
-    showAllEvents: false,
-  });
-  const parsedTrace = traceModel.parsedTrace(0)!;
-  const parsedTraceData = parsedTrace!.data!;
-
-  const startTime = Trace.Helpers.Timing.microToMilli(
-    parsedTraceData.Meta.traceBounds.min,
-  );
-  const endTime = Trace.Helpers.Timing.microToMilli(
-    parsedTraceData.Meta.traceBounds.max,
-  );
-
-  const threads = Trace.Handlers.Threads.threadsInTrace(parsedTrace.data);
-  const mainThread = threads.find(
-    (t) => t.type === Trace.Handlers.Threads.ThreadType.MAIN_THREAD,
-  );
-  if (!mainThread) {
-    throw new Error('No renderer main thread found in trace file');
-  }
-
-  const rendererEvents = [...mainThread.entries].filter((e) =>
-    entryIsVisibleInTimeline(e, parsedTrace),
-  );
-  const stats = statsForTimeRange(rendererEvents, startTime, endTime);
-
-  console.log(stats);
-}