devtools-tracing 1.5.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

@@ -176,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(
@@ -185,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,
@@ -238,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)"
@@ -253,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}`
@@ -323,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);
@@ -343,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/package.json

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