devtools-tracing 1.4.0 → 1.5.0

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

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.5.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);
-}