devtools-tracing 1.2.2 → 1.4.0

package/dist/cli.js

@@ -0,0 +1,331 @@
+#!/usr/bin/env node
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// commands/selector-stats.ts
+var fs = __toESM(require("node:fs"));
+var zlib = __toESM(require("node:zlib"));
+var import__ = require("../");
+var SelectorTimingsKey = import__.Trace.Types.Events.SelectorTimingsKey;
+async function run(tracePath) {
+  (0, import__.initDevToolsTracing)();
+  const fileData = fs.readFileSync(tracePath);
+  const decompressedData = tracePath.endsWith(".gz") ? zlib.gunzipSync(fileData) : fileData;
+  const traceData = JSON.parse(
+    decompressedData.toString()
+  );
+  const traceModel = import__.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 selectorStatsData = parsedTraceData.SelectorStats;
+  const selectorMap = /* @__PURE__ */ new Map();
+  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;
+  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]}`
+    );
+  }
+  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) ===
+`
+  );
+  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 topInvalidationSelectors = [...invalidationSelectorCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, TOP_N);
+  console.log(
+    `  Top ${TOP_N} selectors causing invalidations:
+`
+  );
+  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`
+  );
+  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(`
+=== 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}`);
+}
+
+// commands/inp.ts
+var fs2 = __toESM(require("node:fs"));
+var zlib2 = __toESM(require("node:zlib"));
+var import__2 = require("../");
+async function run2(tracePath) {
+  (0, import__2.initDevToolsTracing)();
+  const fileData = fs2.readFileSync(tracePath);
+  const decompressedData = tracePath.endsWith(".gz") ? zlib2.gunzipSync(fileData) : fileData;
+  const traceData = JSON.parse(
+    decompressedData.toString()
+  );
+  const processor = import__2.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 / 1e3;
+  console.log({
+    insights: insights?.model.INPBreakdown,
+    inp
+  });
+}
+
+// commands/sourcemap.ts
+var fs3 = __toESM(require("node:fs"));
+var zlib3 = __toESM(require("node:zlib"));
+var import__3 = require("../");
+async function run3(tracePath) {
+  (0, import__3.initDevToolsTracing)();
+  const fileData = fs3.readFileSync(tracePath);
+  const decompressedData = tracePath.endsWith(".gz") ? zlib3.gunzipSync(fileData) : fileData;
+  const traceData = JSON.parse(
+    decompressedData.toString()
+  );
+  const traceModel = import__3.Trace.TraceModel.Model.createWithAllHandlers();
+  const resolveSourceMap = (0, import__3.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}
+`);
+  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)
+`);
+  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
+`
+  );
+  const result = (0, import__3.symbolicateTrace)(traceData.traceEvents, scripts);
+  console.log(
+    `Symbolicated ${result.symbolicatedFrames} frames across ${result.symbolicatedEvents} events`
+  );
+  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")) {
+    fs3.writeFileSync(outPath, zlib3.gzipSync(outputJson));
+  } else {
+    fs3.writeFileSync(outPath, outputJson);
+  }
+  console.log(`Wrote symbolicated trace to ${outPath}`);
+}
+async function verboseFetch(url) {
+  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;
+}
+
+// commands/stats.ts
+var fs4 = __toESM(require("node:fs"));
+var zlib4 = __toESM(require("node:zlib"));
+var import__4 = require("../");
+async function run4(tracePath) {
+  (0, import__4.initDevToolsTracing)();
+  const fileData = fs4.readFileSync(tracePath);
+  const decompressedData = tracePath.endsWith(".gz") ? zlib4.gunzipSync(fileData) : fileData;
+  const traceData = JSON.parse(
+    decompressedData.toString()
+  );
+  const traceModel = import__4.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 = import__4.Trace.Helpers.Timing.microToMilli(
+    parsedTraceData.Meta.traceBounds.min
+  );
+  const endTime = import__4.Trace.Helpers.Timing.microToMilli(
+    parsedTraceData.Meta.traceBounds.max
+  );
+  const threads = import__4.Trace.Handlers.Threads.threadsInTrace(parsedTrace.data);
+  const mainThread = threads.find(
+    (t) => t.type === import__4.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) => (0, import__4.entryIsVisibleInTimeline)(e, parsedTrace)
+  );
+  const stats = (0, import__4.statsForTimeRange)(rendererEvents, startTime, endTime);
+  console.log(stats);
+}
+
+// cli.ts
+var commands = {
+  "selector-stats": run,
+  inp: run2,
+  sourcemap: run3,
+  stats: run4
+};
+function printUsage() {
+  console.log("Usage: devtools-tracing <command> <trace-file>");
+  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("  stats          Generate timeline category statistics");
+}
+async function main() {
+  const [command, tracePath] = process.argv.slice(2);
+  if (!command || command === "--help" || command === "-h") {
+    printUsage();
+    process.exit(0);
+  }
+  const run5 = commands[command];
+  if (!run5) {
+    console.error(`Unknown command: ${command}`);
+    printUsage();
+    process.exit(1);
+  }
+  if (!tracePath) {
+    console.error(`Missing trace file path.`);
+    console.error(`Usage: devtools-tracing ${command} <trace-file>`);
+    process.exit(1);
+  }
+  await run5(tracePath);
+}
+main();

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { initDevToolsTracing } from './src/init.js';
 export { statsForTimeRange, entryIsVisibleInTimeline } from './src/timeline.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';
-export { Trace };
+import * as SDK from './lib/front_end/core/sdk/sdk.js';
+export { Trace, SDK };