devtools-tracing 1.0.0

package/lib/front_end/models/trace/extras/FilmStrip.ts

@@ -0,0 +1,78 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+//
+import * as Platform from '../../../core/platform/platform.js';
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Types from '../types/types.js';
+
+export interface Data {
+  zeroTime: Types.Timing.Micro;
+  spanTime: Types.Timing.Micro;
+  frames: readonly Frame[];
+}
+
+export interface Frame {
+  screenshotEvent: Types.Events.LegacySyntheticScreenshot|Types.Events.Screenshot;
+  index: number;
+}
+
+export type HandlersWithFilmStrip = Handlers.Types.HandlersWithMeta<{
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Screenshots: typeof Handlers.ModelHandlers.Screenshots,
+}>;
+
+export type HandlerDataWithScreenshots = Handlers.Types.EnabledHandlerDataWithMeta<{
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Screenshots: typeof Handlers.ModelHandlers.Screenshots,
+}>;
+
+// Cache film strips based on:
+// 1. The trace parsed data object
+// 2. The start time.
+const filmStripCache = new WeakMap<HandlerDataWithScreenshots, Map<Types.Timing.Micro, Data>>();
+
+export function fromHandlerData(data: HandlerDataWithScreenshots, customZeroTime?: Types.Timing.Micro): Data {
+  const frames: Frame[] = [];
+
+  const zeroTime = typeof customZeroTime !== 'undefined' ? customZeroTime : data.Meta.traceBounds.min;
+  const spanTime = data.Meta.traceBounds.range;
+  const fromCache = filmStripCache.get(data)?.get(zeroTime);
+  if (fromCache) {
+    return fromCache;
+  }
+
+  const screenshots = data.Screenshots.screenshots ?? data.Screenshots.legacySyntheticScreenshots ?? [];
+
+  for (const screenshotEvent of screenshots) {
+    if (screenshotEvent.ts < zeroTime) {
+      continue;
+    }
+    const frame: Frame = {
+      index: frames.length,
+      screenshotEvent,
+    };
+    frames.push(frame);
+  }
+
+  const result: Data = {
+    zeroTime,
+    spanTime,
+    frames: Array.from(frames),
+  };
+
+  const cachedForData =
+      Platform.MapUtilities.getWithDefault(filmStripCache, data, () => new Map<Types.Timing.Micro, Data>());
+  cachedForData.set(zeroTime, result);
+
+  return result;
+}
+
+export function frameClosestToTimestamp(filmStrip: Data, searchTimestamp: Types.Timing.Micro): Frame|null {
+  const closestFrameIndexBeforeTimestamp = Platform.ArrayUtilities.nearestIndexFromEnd(
+      filmStrip.frames, frame => frame.screenshotEvent.ts < searchTimestamp);
+  if (closestFrameIndexBeforeTimestamp === null) {
+    return null;
+  }
+  return filmStrip.frames[closestFrameIndexBeforeTimestamp];
+}

package/lib/front_end/models/trace/extras/MainThreadActivity.ts

@@ -0,0 +1,86 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+const IDLE_FUNCTION_CALL_NAMES = new Set([
+  '(program)',
+  '(idle)',
+  '(root)',
+]);
+
+export function calculateWindow(
+    traceBounds: Types.Timing.TraceWindowMicro,
+    mainThreadEntries: readonly Types.Events.Event[]): Types.Timing.TraceWindowMicro {
+  if (!mainThreadEntries.length) {
+    return traceBounds;
+  }
+  const entriesWithIdleRemoved = mainThreadEntries.filter(entry => {
+    if (Types.Events.isProfileCall(entry) &&
+        (IDLE_FUNCTION_CALL_NAMES.has(entry.callFrame.functionName) || !entry.callFrame.functionName)) {
+      return false;
+    }
+    return true;
+  });
+
+  if (entriesWithIdleRemoved.length === 0) {
+    return traceBounds;
+  }
+  /**
+   * Calculates regions of low utilization and returns the index of the event
+   * that is the first event that should be included.
+   **/
+  function findLowUtilizationRegion(startIndex: number, stopIndex: number): number {
+    const threshold = 0.1;
+
+    let cutIndex = startIndex;
+    const entryAtCut = entriesWithIdleRemoved[cutIndex];
+    const timings = Helpers.Timing.eventTimingsMicroSeconds(entryAtCut);
+    let cutTime = (timings.startTime + timings.endTime) / 2;
+    let usedTime = 0;
+    const step = Math.sign(stopIndex - startIndex);
+    for (let i = startIndex; i !== stopIndex; i += step) {
+      const task = entriesWithIdleRemoved[i];
+      const taskTimings = Helpers.Timing.eventTimingsMicroSeconds(task);
+      const taskTime = (taskTimings.startTime + taskTimings.endTime) / 2;
+      const interval = Math.abs(cutTime - taskTime);
+      if (usedTime < threshold * interval) {
+        cutIndex = i;
+        cutTime = taskTime;
+        usedTime = 0;
+      }
+      usedTime += taskTimings.duration;
+    }
+    return cutIndex;
+  }
+  const rightIndex = findLowUtilizationRegion(entriesWithIdleRemoved.length - 1, 0);
+  const leftIndex = findLowUtilizationRegion(0, rightIndex);
+  const leftTimings = Helpers.Timing.eventTimingsMicroSeconds(entriesWithIdleRemoved[leftIndex]);
+  const rightTimings = Helpers.Timing.eventTimingsMicroSeconds(entriesWithIdleRemoved[rightIndex]);
+
+  let leftTime = leftTimings.startTime;
+  let rightTime = rightTimings.endTime;
+  const zoomedInSpan = rightTime - leftTime;
+
+  if (zoomedInSpan < traceBounds.range * 0.1) {
+    // If the area we have chosen to zoom into is less than 10% of the entire
+    // span, we bail and show the entire trace. It would not be so useful to
+    // the user to zoom in on such a small area; we assume they have
+    // purposefully recorded a trace that contains empty periods of time.
+    return traceBounds;
+  }
+
+  // Adjust the left time down by 5%, and the right time up by 5%, so that
+  // we give the range we want to zoom a bit of breathing space. At the
+  // same time, ensure that we do not stray beyond the bounds of the
+  // min/max time of the entire trace.
+  leftTime = Types.Timing.Micro(Math.max(leftTime - 0.05 * zoomedInSpan, traceBounds.min));
+  rightTime = Types.Timing.Micro(Math.min(rightTime + 0.05 * zoomedInSpan, traceBounds.max));
+
+  return {
+    min: leftTime,
+    max: rightTime,
+    range: Types.Timing.Micro(rightTime - leftTime),
+  };
+}

package/lib/front_end/models/trace/extras/ScriptDuplication.ts

@@ -0,0 +1,236 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Handlers from '../handlers/handlers.js';
+
+// Ignore modules smaller than an absolute threshold.
+const ABSOLUTE_SIZE_THRESHOLD_BYTES = 1024 * 0.5;
+// Ignore modules smaller than a % size of largest copy of the module.
+const RELATIVE_SIZE_THRESHOLD = 0.1;
+
+interface SourceData {
+  source: string;
+  resourceSize: number;
+}
+
+export function normalizeSource(source: string): string {
+  // Trim trailing question mark - b/c webpack.
+  source = source.replace(/\?$/, '');
+
+  // Normalize paths for dependencies by only keeping everything after the last `node_modules`.
+  const lastNodeModulesIndex = source.lastIndexOf('node_modules');
+  if (lastNodeModulesIndex !== -1) {
+    source = source.substring(lastNodeModulesIndex);
+  }
+
+  return source;
+}
+
+function shouldIgnoreSource(source: string): boolean {
+  // Ignore bundle overhead.
+  if (source.includes('webpack/bootstrap')) {
+    return true;
+  }
+  if (source.includes('(webpack)/buildin')) {
+    return true;
+  }
+
+  // Ignore webpack module shims, i.e. aliases of the form `module.exports = window.jQuery`
+  if (source.includes('external ')) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * The key is a source map `sources` entry (these are URLs/file paths), but normalized
+ * via `normalizeSource`.
+ *
+ * The value is an object with an entry for every script that has a source map which
+ * denotes that this source was used, along with the estimated resource size it takes
+ * up in the script.
+ */
+export type ScriptDuplication = Map<string, {
+  /**
+   * This is the sum of all (but one) `attributedSize` in `scripts`.
+   *
+   * One copy of this module is treated as the canonical version - the rest will
+   * have non-zero `wastedBytes`. The canonical copy is the first entry of
+   * `scripts`.
+   *
+   * In the case of all copies being the same version, all sizes are
+   * equal and the selection doesn't matter (ignoring compression ratios). When
+   * the copies are different versions, it does matter. Ideally the newest
+   * version would be the canonical copy, but version information is not present.
+   * Instead, size is used as a heuristic for latest version. This makes the
+   * value here conserative in its estimation.
+   */
+  estimatedDuplicateBytes: number,
+  duplicates: Array<{
+    script: Handlers.ModelHandlers.Scripts.Script,
+    /**
+     * The number of bytes in the script bundle that map back to this module,
+     * in terms of estimated impact on transfer size.
+     */
+    attributedSize: number,
+  }>,
+}>;
+
+/**
+ * Sorts each array within @see ScriptDuplication by attributedSize, drops information
+ * on sources that are too small, and calculates esimatedDuplicateBytes.
+ */
+export function normalizeDuplication(duplication: ScriptDuplication): void {
+  for (const [key, data] of duplication) {
+    // Sort by resource size.
+    data.duplicates.sort((a, b) => b.attributedSize - a.attributedSize);
+
+    // Ignore modules smaller than a % size of largest.
+    if (data.duplicates.length > 1) {
+      const largestResourceSize = data.duplicates[0].attributedSize;
+      data.duplicates = data.duplicates.filter(duplicate => {
+        const percentSize = duplicate.attributedSize / largestResourceSize;
+        return percentSize >= RELATIVE_SIZE_THRESHOLD;
+      });
+    }
+
+    // Ignore modules smaller than an absolute threshold.
+    data.duplicates = data.duplicates.filter(duplicate => duplicate.attributedSize >= ABSOLUTE_SIZE_THRESHOLD_BYTES);
+
+    // Delete any that now don't have multiple entries.
+    if (data.duplicates.length <= 1) {
+      duplication.delete(key);
+      continue;
+    }
+
+    data.estimatedDuplicateBytes = data.duplicates.slice(1).reduce((acc, cur) => acc + cur.attributedSize, 0);
+  }
+}
+
+function indexOfOrLength(haystack: string, needle: string, startPosition = 0): number {
+  const index = haystack.indexOf(needle, startPosition);
+  return index === -1 ? haystack.length : index;
+}
+
+export function getNodeModuleName(source: string): string {
+  const sourceSplit = source.split('node_modules/');
+  source = sourceSplit[sourceSplit.length - 1];
+
+  const indexFirstSlash = indexOfOrLength(source, '/');
+  if (source[0] === '@') {
+    return source.slice(0, indexOfOrLength(source, '/', indexFirstSlash + 1));
+  }
+
+  return source.slice(0, indexFirstSlash);
+}
+
+function groupByNodeModules(duplication: ScriptDuplication): ScriptDuplication {
+  const groupedDuplication: ScriptDuplication = new Map();
+  for (const [source, data] of duplication) {
+    if (!source.includes('node_modules')) {
+      groupedDuplication.set(source, data);
+      continue;
+    }
+
+    const nodeModuleKey = 'node_modules/' + getNodeModuleName(source);
+    const aggregatedData = groupedDuplication.get(nodeModuleKey) ?? {
+      duplicates: [],
+      // This is calculated in normalizeDuplication.
+      estimatedDuplicateBytes: 0,
+    };
+    groupedDuplication.set(nodeModuleKey, aggregatedData);
+
+    for (const {script, attributedSize} of data.duplicates) {
+      let duplicate = aggregatedData.duplicates.find(d => d.script === script);
+      if (!duplicate) {
+        duplicate = {script, attributedSize: 0};
+        aggregatedData.duplicates.push(duplicate);
+      }
+      duplicate.attributedSize += attributedSize;
+    }
+  }
+
+  return groupedDuplication;
+}
+
+/**
+ * Sort by estimated savings.
+ */
+function sorted(duplication: ScriptDuplication): ScriptDuplication {
+  return new Map([...duplication].sort((a, b) => b[1].estimatedDuplicateBytes - a[1].estimatedDuplicateBytes));
+}
+
+/**
+ * Returns 2 @see ScriptDuplication for the given collection of script contents + source maps:
+ *
+ * 1. `duplication` keys correspond to authored files
+ * 2. `duplication` keys correspond to authored files, except all files within the same
+ *    node_module package are aggregated under the same entry.
+ */
+export function computeScriptDuplication(
+    scriptsData: Handlers.ModelHandlers.Scripts.ScriptsData, compressionRatios: Map<string, number>):
+    {duplication: ScriptDuplication, duplicationGroupedByNodeModules: ScriptDuplication} {
+  const sourceDatasMap = new Map<Handlers.ModelHandlers.Scripts.Script, SourceData[]>();
+
+  // Determine size of each `sources` entry.
+  for (const script of scriptsData.scripts) {
+    if (!script.content || !script.sourceMap) {
+      continue;
+    }
+
+    const sizes = Handlers.ModelHandlers.Scripts.getScriptGeneratedSizes(script);
+    if (!sizes) {
+      continue;
+    }
+
+    if ('errorMessage' in sizes) {
+      console.error(sizes.errorMessage);
+      continue;
+    }
+
+    const sourceDataArray: SourceData[] = [];
+    sourceDatasMap.set(script, sourceDataArray);
+
+    const sources = script.sourceMap.sourceURLs();
+    for (let i = 0; i < sources.length; i++) {
+      if (shouldIgnoreSource(sources[i])) {
+        continue;
+      }
+
+      const sourceSize = sizes.files[sources[i]];
+      sourceDataArray.push({
+        source: normalizeSource(sources[i]),
+        resourceSize: sourceSize,
+      });
+    }
+  }
+
+  const duplication: ScriptDuplication = new Map();
+  for (const [script, sourceDataArray] of sourceDatasMap) {
+    for (const sourceData of sourceDataArray) {
+      let data = duplication.get(sourceData.source);
+      if (!data) {
+        data = {estimatedDuplicateBytes: 0, duplicates: []};
+        duplication.set(sourceData.source, data);
+      }
+      const compressionRatio = script.request ? compressionRatios.get(script.request?.args.data.requestId) ?? 1 : 1;
+      const transferSize = Math.round(sourceData.resourceSize * compressionRatio);
+      data.duplicates.push({
+        script,
+        attributedSize: transferSize,
+      });
+    }
+  }
+
+  const duplicationGroupedByNodeModules = groupByNodeModules(duplication);
+
+  normalizeDuplication(duplication);
+  normalizeDuplication(duplicationGroupedByNodeModules);
+
+  return {
+    duplication: sorted(duplication),
+    duplicationGroupedByNodeModules: sorted(duplicationGroupedByNodeModules),
+  };
+}

package/lib/front_end/models/trace/extras/StackTraceForEvent.ts

@@ -0,0 +1,203 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Protocol from '../../../generated/protocol.js';
+import type * as Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+export const stackTraceForEventInTrace =
+    new Map<Handlers.Types.HandlerData, Map<Types.Events.Event, Protocol.Runtime.StackTrace>>();
+
+export function clearCacheForTrace(data: Handlers.Types.HandlerData): void {
+  stackTraceForEventInTrace.delete(data);
+}
+/**
+ * This util builds a stack trace that includes async calls for a given
+ * event. It leverages data we collect from sampling to deduce sync
+ * stacks and trace event instrumentation on the V8 debugger to stitch
+ * them together.
+ */
+export function get(event: Types.Events.Event, data: Handlers.Types.HandlerData): Protocol.Runtime.StackTrace|null {
+  let cacheForTrace = stackTraceForEventInTrace.get(data);
+  if (!cacheForTrace) {
+    cacheForTrace = new Map();
+    stackTraceForEventInTrace.set(data, cacheForTrace);
+  }
+  const resultFromCache = cacheForTrace.get(event);
+  if (resultFromCache) {
+    return resultFromCache;
+  }
+  let result: Protocol.Runtime.StackTrace|null = null;
+  if (Types.Extensions.isSyntheticExtensionEntry(event)) {
+    result = getForExtensionEntry(event, data);
+  } else if (Types.Events.isPerformanceMeasureBegin(event)) {
+    result = getForPerformanceMeasure(event, data);
+  } else {
+    result = getForEvent(event, data);
+    const payloadCallFrames =
+        getTraceEventPayloadStackAsProtocolCallFrame(event).filter(callFrame => !isNativeJSFunction(callFrame));
+    // If the event has a payload stack trace, replace the synchronous
+    // portion of the calculated stack with the payload's call frames.
+    // We do this because trace payload call frames contain call
+    // locations, unlike profile call frames obtained with getForEvent
+    // (which contain function declaration locations).
+    // This way the user knows which exact JS location triggered an
+    // event.
+    if (!result.callFrames.length) {
+      result.callFrames = payloadCallFrames;
+    } else {
+      for (let i = 0; i < payloadCallFrames.length && i < result.callFrames.length; i++) {
+        result.callFrames[i] = payloadCallFrames[i];
+      }
+    }
+  }
+  if (result) {
+    cacheForTrace.set(event, result);
+  }
+  return result;
+}
+
+/**
+ * Fallback method to obtain a stack trace using the parsed event tree
+ * hierarchy. This shouldn't be called outside of this file, use `get`
+ * instead to ensure the correct event in the tree hierarchy is used.
+ */
+function getForEvent(event: Types.Events.Event, data: Handlers.Types.HandlerData): Protocol.Runtime.StackTrace {
+  // When working with a CPU profile the renderer handler won't have
+  // entries in its tree.
+  const entryToNode = data.Renderer.entryToNode.size > 0 ? data.Renderer.entryToNode : data.Samples.entryToNode;
+  const topStackTrace: Protocol.Runtime.StackTrace = {callFrames: []};
+  let stackTrace: Protocol.Runtime.StackTrace = topStackTrace;
+  let currentEntry: Types.Events.SyntheticProfileCall;
+  let node: Helpers.TreeHelpers.TraceEntryNode|null|undefined = entryToNode.get(event);
+  const traceCache = stackTraceForEventInTrace.get(data) || new Map<Types.Events.Event, Protocol.Runtime.StackTrace>();
+  stackTraceForEventInTrace.set(data, traceCache);
+  // Move up this node's ancestor tree appending JS frames to its
+  // stack trace. If an async caller is detected, move up in the async
+  // stack instead.
+  while (node) {
+    if (!Types.Events.isProfileCall(node.entry)) {
+      const maybeAsyncParent = data.AsyncJSCalls.runEntryPointToScheduler.get(node.entry);
+      if (!maybeAsyncParent) {
+        node = node.parent;
+        continue;
+      }
+      const maybeAsyncParentNode = maybeAsyncParent && entryToNode.get(maybeAsyncParent.scheduler);
+      if (maybeAsyncParentNode) {
+        stackTrace = addAsyncParentToStack(stackTrace, maybeAsyncParent.taskName);
+        node = maybeAsyncParentNode;
+      }
+      continue;
+    }
+    currentEntry = node.entry;
+    // First check if this entry was processed before.
+    const stackTraceFromCache = traceCache.get(node.entry);
+    if (stackTraceFromCache) {
+      stackTrace.callFrames.push(...stackTraceFromCache.callFrames.filter(callFrame => !isNativeJSFunction(callFrame)));
+      stackTrace.parent = stackTraceFromCache.parent;
+      // Only set the description to the cache value if we didn't
+      // compute it in the previous iteration, since the async stack
+      // trace descriptions / taskNames is only extracted when jumping
+      // to the async parent, and that might not have happened when
+      // the cached value was computed (e.g. the cached value
+      // computation started at some point inside the parent stack
+      // trace).
+      stackTrace.description = stackTrace.description || stackTraceFromCache.description;
+      break;
+    }
+
+    if (!isNativeJSFunction(currentEntry.callFrame)) {
+      stackTrace.callFrames.push(currentEntry.callFrame);
+    }
+    const maybeAsyncParentEvent = data.AsyncJSCalls.asyncCallToScheduler.get(currentEntry);
+    const maybeAsyncParentNode = maybeAsyncParentEvent && entryToNode.get(maybeAsyncParentEvent.scheduler);
+    if (maybeAsyncParentNode) {
+      stackTrace = addAsyncParentToStack(stackTrace, maybeAsyncParentEvent.taskName);
+      node = maybeAsyncParentNode;
+      continue;
+    }
+    node = node.parent;
+  }
+  return topStackTrace;
+}
+
+function addAsyncParentToStack(stackTrace: Protocol.Runtime.StackTrace, taskName: string): Protocol.Runtime.StackTrace {
+  const parent: Protocol.Runtime.StackTrace = {callFrames: []};
+  // The Protocol.Runtime.StackTrace type is recursive, so we
+  // move one level deeper in it as we walk up the ancestor tree.
+  stackTrace.parent = parent;
+  // Note: this description effectively corresponds to the name
+  // of the task that scheduled the stack trace we are jumping
+  // FROM, so it would make sense that it was set to that stack
+  // trace instead of the one we are jumping TO. However, the
+  // JS presentation utils we use to present async stack traces
+  // assume the description is added to the stack trace that
+  // scheduled the async task, so we build the data that way.
+  parent.description = taskName;
+  return parent;
+}
+
+/**
+ * Finds the JS call in which an extension entry was injected (the
+ * code location that called the extension API), and returns its stack
+ * trace.
+ */
+function getForExtensionEntry(event: Types.Extensions.SyntheticExtensionEntry, data: Handlers.Types.HandlerData):
+    Protocol.Runtime.StackTrace|null {
+  const rawEvent: Types.Events.Event = event.rawSourceEvent;
+  if (Types.Events.isPerformanceMeasureBegin(rawEvent)) {
+    return getForPerformanceMeasure(rawEvent, data);
+  }
+  if (!rawEvent) {
+    return null;
+  }
+  return get(rawEvent, data);
+}
+
+/**
+ * Gets the raw event for a user timing and obtains its stack trace.
+ */
+function getForPerformanceMeasure(
+    event: Types.Events.PerformanceMeasureBegin, data: Handlers.Types.HandlerData): Protocol.Runtime.StackTrace|null {
+  let rawEvent: Types.Events.Event|undefined = event;
+  if (event.args.traceId === undefined) {
+    return null;
+  }
+  // performance.measure calls dispatch 2 events: one for the call
+  // itself and another to represent the measured entry in the trace
+  // timeline. They are connected via a common traceId. At this
+  // point `rawEvent` corresponds to the second case, we must
+  // encounter the event for the call itself to obtain its callstack.
+  rawEvent = data.UserTimings.measureTraceByTraceId.get(event.args.traceId);
+  if (!rawEvent) {
+    return null;
+  }
+  return get(rawEvent, data);
+}
+/**
+ * Determines if a function is a native JS API (like setTimeout,
+ * requestAnimationFrame, consoleTask.run. etc.). This is useful to
+ * discard stack frames corresponding to the JS scheduler function
+ * itself, since it's already being used as title of async stack traces
+ * taken from the async `taskName`. This is also consistent with the
+ * behaviour of the stack trace in the sources
+ * panel.
+ */
+function isNativeJSFunction({columnNumber, lineNumber, url, scriptId}: Protocol.Runtime.CallFrame): boolean {
+  return lineNumber === -1 && columnNumber === -1 && url === '' && scriptId === '0';
+}
+
+/**
+ * Converts a stack trace from a trace event's payload into an array of
+ * Protocol.Runtime.CallFrame.
+ */
+function getTraceEventPayloadStackAsProtocolCallFrame(event: Types.Events.Event): Protocol.Runtime.CallFrame[] {
+  const payloadCallStack = Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event) || [];
+  const callFrames: Protocol.Runtime.CallFrame[] = [];
+  for (const frame of payloadCallStack) {
+    callFrames.push({...frame, scriptId: String(frame.scriptId) as Protocol.Runtime.ScriptId});
+  }
+  return callFrames;
+}