chrome-devtools-frontend 1.0.1706026 → 1.0.1708524

package/front_end/models/extensions/LanguageExtensionEndpoint.ts

@@ -10,6 +10,76 @@ import type * as Bindings from '../bindings/bindings.js';
 import {PrivateAPI} from './ExtensionAPI.js';
 import {ExtensionEndpoint} from './ExtensionEndpoint.js';
 
+const isObject = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null;
+const isString = (value: unknown): value is string => typeof value === 'string';
+const isNumber = (value: unknown): value is number => typeof value === 'number';
+const isBoolean = (value: unknown): value is boolean => typeof value === 'boolean';
+const isStringArray = (value: unknown): value is string[] => Array.isArray(value) && value.every(isString);
+const isNumberArray = (value: unknown): value is number[] => Array.isArray(value) && value.every(isNumber);
+
+const isRawLocationRange = (value: unknown): value is Chrome.DevTools.RawLocationRange => {
+  return isObject(value) && isString(value.rawModuleId) && isNumber(value.startOffset) && isNumber(value.endOffset);
+};
+
+const isSourceLocation = (value: unknown): value is Chrome.DevTools.SourceLocation => {
+  return isObject(value) && isString(value.rawModuleId) && isString(value.sourceFileURL) &&
+      isNumber(value.lineNumber) && isNumber(value.columnNumber);
+};
+
+const isVariable = (value: unknown): value is Chrome.DevTools.Variable => {
+  return isObject(value) && isString(value.scope) && isString(value.name) && isString(value.type) &&
+      (value.nestedName === undefined || isStringArray(value.nestedName));
+};
+
+const isScopeInfo = (value: unknown): value is Chrome.DevTools.ScopeInfo => {
+  return isObject(value) && isString(value.type) && isString(value.typeName) &&
+      (value.icon === undefined || isString(value.icon));
+};
+
+const isFunctionInfo = (value: unknown): value is Chrome.DevTools.FunctionInfo => {
+  return isObject(value) && isString(value.name);
+};
+
+const isForeignObject = (value: unknown): value is Chrome.DevTools.ForeignObject => {
+  return isObject(value) && value.type === 'reftype' &&
+      (value.valueClass === 'local' || value.valueClass === 'global' || value.valueClass === 'operand') &&
+      isNumber(value.index);
+};
+
+const isRemoteObject = (value: unknown): value is Chrome.DevTools.RemoteObject => {
+  return isObject(value) &&
+      (value.type === 'object' || value.type === 'undefined' || value.type === 'string' || value.type === 'number' ||
+       value.type === 'boolean' || value.type === 'bigint' || value.type === 'array' || value.type === 'null') &&
+      isBoolean(value.hasChildren) && (value.className === undefined || isString(value.className)) &&
+      (value.description === undefined || isString(value.description)) &&
+      (value.objectId === undefined || isString(value.objectId)) &&
+      (value.linearMemoryAddress === undefined || isNumber(value.linearMemoryAddress)) &&
+      (value.linearMemorySize === undefined || isNumber(value.linearMemorySize));
+};
+
+const isPropertyDescriptor = (value: unknown): value is Chrome.DevTools.PropertyDescriptor => {
+  return isObject(value) && isString(value.name) && (isRemoteObject(value.value) || isForeignObject(value.value));
+};
+
+const isAddRawModuleResult = (value: unknown): value is string[]|{missingSymbolFiles: string[]} => {
+  return isStringArray(value) || (isObject(value) && isStringArray(value.missingSymbolFiles));
+};
+
+const isGetFunctionInfoResult =
+    (value: unknown): value is {frames: Chrome.DevTools.FunctionInfo[], missingSymbolFiles: string[]}|
+    {missingSymbolFiles: string[]}|{frames: Chrome.DevTools.FunctionInfo[]} => {
+      if (!isObject(value)) {
+        return false;
+      }
+      if ('frames' in value && (!Array.isArray(value.frames) || !value.frames.every(isFunctionInfo))) {
+        return false;
+      }
+      if ('missingSymbolFiles' in value && !isStringArray(value.missingSymbolFiles)) {
+        return false;
+      }
+      return 'frames' in value || 'missingSymbolFiles' in value;
+    };
+
 class LanguageExtensionEndpointImpl extends ExtensionEndpoint {
   private plugin: LanguageExtensionEndpoint;
   #pluginManager: Bindings.DebuggerLanguagePlugins.DebuggerLanguagePluginManager;
@@ -90,12 +160,13 @@ export class LanguageExtensionEndpoint implements Bindings.DebuggerLanguagePlugi
   /**
    * Notify the plugin about a new script
    */
-  addRawModule(rawModuleId: string, symbolsURL: string, rawModule: Chrome.DevTools.RawModule): Promise<string[]> {
+  addRawModule(rawModuleId: string, symbolsURL: string,
+               rawModule: Chrome.DevTools.RawModule): Promise<string[]|{missingSymbolFiles: string[]}> {
     if (!this.canAccessURL(symbolsURL) || !this.canAccessURL(rawModule.url)) {
       return Promise.resolve([]);
     }
-    return this.endpoint.sendRequest(
-        PrivateAPI.LanguageExtensionPluginCommands.AddRawModule, {rawModuleId, symbolsURL, rawModule});
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.AddRawModule,
+                                     {rawModuleId, symbolsURL, rawModule}, isAddRawModuleResult);
   }
 
   /**
@@ -110,8 +181,10 @@ export class LanguageExtensionEndpoint implements Bindings.DebuggerLanguagePlugi
    */
   sourceLocationToRawLocation(sourceLocation: Chrome.DevTools.SourceLocation):
       Promise<Chrome.DevTools.RawLocationRange[]> {
-    return this.endpoint.sendRequest(
-        PrivateAPI.LanguageExtensionPluginCommands.SourceLocationToRawLocation, {sourceLocation});
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.SourceLocationToRawLocation,
+                                     {sourceLocation},
+                                     (value): value is Chrome.DevTools.RawLocationRange[] =>
+                                         Array.isArray(value) && value.every(isRawLocationRange));
   }
 
   /**
@@ -119,27 +192,31 @@ export class LanguageExtensionEndpoint implements Bindings.DebuggerLanguagePlugi
    */
   rawLocationToSourceLocation(rawLocation: Chrome.DevTools.RawLocation): Promise<Chrome.DevTools.SourceLocation[]> {
     return this.endpoint.sendRequest(
-        PrivateAPI.LanguageExtensionPluginCommands.RawLocationToSourceLocation, {rawLocation});
+        PrivateAPI.LanguageExtensionPluginCommands.RawLocationToSourceLocation, {rawLocation},
+        (value): value is Chrome.DevTools.SourceLocation[] => Array.isArray(value) && value.every(isSourceLocation));
   }
 
   getScopeInfo(type: string): Promise<Chrome.DevTools.ScopeInfo> {
-    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetScopeInfo, {type});
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetScopeInfo, {type}, isScopeInfo);
   }
 
   /**
    * List all variables in lexical scope at a given location in a raw module
    */
   listVariablesInScope(rawLocation: Chrome.DevTools.RawLocation): Promise<Chrome.DevTools.Variable[]> {
-    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.ListVariablesInScope, {rawLocation});
+    return this.endpoint.sendRequest(
+        PrivateAPI.LanguageExtensionPluginCommands.ListVariablesInScope, {rawLocation},
+        (value): value is Chrome.DevTools.Variable[] => Array.isArray(value) && value.every(isVariable));
   }
 
   /**
    * List all function names (including inlined frames) at location
    */
-  getFunctionInfo(rawLocation: Chrome.DevTools.RawLocation): Promise<{
-    frames: Chrome.DevTools.FunctionInfo[],
-  }> {
-    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetFunctionInfo, {rawLocation});
+  getFunctionInfo(rawLocation: Chrome.DevTools.RawLocation):
+      Promise<{frames: Chrome.DevTools.FunctionInfo[], missingSymbolFiles: string[]}|{missingSymbolFiles: string[]}|
+              {frames: Chrome.DevTools.FunctionInfo[]}> {
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetFunctionInfo, {rawLocation},
+                                     isGetFunctionInfoResult);
   }
 
   /**
@@ -147,8 +224,9 @@ export class LanguageExtensionEndpoint implements Bindings.DebuggerLanguagePlugi
    *  that rawLocation is in.
    */
   getInlinedFunctionRanges(rawLocation: Chrome.DevTools.RawLocation): Promise<Chrome.DevTools.RawLocationRange[]> {
-    return this.endpoint.sendRequest(
-        PrivateAPI.LanguageExtensionPluginCommands.GetInlinedFunctionRanges, {rawLocation});
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetInlinedFunctionRanges, {rawLocation},
+                                     (value): value is Chrome.DevTools.RawLocationRange[] =>
+                                         Array.isArray(value) && value.every(isRawLocationRange));
   }
 
   /**
@@ -156,22 +234,29 @@ export class LanguageExtensionEndpoint implements Bindings.DebuggerLanguagePlugi
    *  called by the function or inline frame that rawLocation is in.
    */
   getInlinedCalleesRanges(rawLocation: Chrome.DevTools.RawLocation): Promise<Chrome.DevTools.RawLocationRange[]> {
-    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetInlinedCalleesRanges, {rawLocation});
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetInlinedCalleesRanges, {rawLocation},
+                                     (value): value is Chrome.DevTools.RawLocationRange[] =>
+                                         Array.isArray(value) && value.every(isRawLocationRange));
   }
 
   async getMappedLines(rawModuleId: string, sourceFileURL: string): Promise<number[]|undefined> {
     return await this.endpoint.sendRequest(
-        PrivateAPI.LanguageExtensionPluginCommands.GetMappedLines, {rawModuleId, sourceFileURL});
+        PrivateAPI.LanguageExtensionPluginCommands.GetMappedLines, {rawModuleId, sourceFileURL},
+        (value): value is number[]|undefined => value === undefined || isNumberArray(value));
   }
 
-  async evaluate(expression: string, context: Chrome.DevTools.RawLocation, stopId: number):
-      Promise<Chrome.DevTools.RemoteObject> {
-    return await this.endpoint.sendRequest(
-        PrivateAPI.LanguageExtensionPluginCommands.FormatValue, {expression, context, stopId});
+  async evaluate(expression: string, context: Chrome.DevTools.RawLocation,
+                 stopId: number): Promise<Chrome.DevTools.RemoteObject|Chrome.DevTools.ForeignObject|null> {
+    return await this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.FormatValue,
+                                           {expression, context, stopId},
+                                           (value): value is Chrome.DevTools.RemoteObject|Chrome.DevTools.ForeignObject|
+                                           null => value === null || isRemoteObject(value) || isForeignObject(value));
   }
 
   getProperties(objectId: Chrome.DevTools.RemoteObjectId): Promise<Chrome.DevTools.PropertyDescriptor[]> {
-    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetProperties, {objectId});
+    return this.endpoint.sendRequest(PrivateAPI.LanguageExtensionPluginCommands.GetProperties, {objectId},
+                                     (value): value is Chrome.DevTools.PropertyDescriptor[] =>
+                                         Array.isArray(value) && value.every(isPropertyDescriptor));
   }
 
   releaseObject(objectId: Chrome.DevTools.RemoteObjectId): Promise<void> {

package/front_end/models/extensions/RecorderExtensionEndpoint.ts

@@ -8,6 +8,8 @@ import {PrivateAPI} from './ExtensionAPI.js';
 import {ExtensionEndpoint} from './ExtensionEndpoint.js';
 import type {RecorderPluginManager} from './RecorderPluginManager.js';
 
+const isString = (value: unknown): value is string => typeof value === 'string';
+
 export class RecorderExtensionEndpoint extends ExtensionEndpoint {
   private readonly name: string;
   private readonly mediaType?: string;
@@ -63,7 +65,7 @@ export class RecorderExtensionEndpoint extends ExtensionEndpoint {
    * [1]: https://github.com/puppeteer/replay/blob/main/src/Schema.ts#L245
    */
   stringify(recording: Object): Promise<string> {
-    return this.sendRequest(PrivateAPI.RecorderExtensionPluginCommands.Stringify, {recording});
+    return this.sendRequest(PrivateAPI.RecorderExtensionPluginCommands.Stringify, {recording}, isString);
   }
 
   /**
@@ -74,7 +76,7 @@ export class RecorderExtensionEndpoint extends ExtensionEndpoint {
    * [1]: https://github.com/puppeteer/replay/blob/main/src/Schema.ts#L243
    */
   stringifyStep(step: Object): Promise<string> {
-    return this.sendRequest(PrivateAPI.RecorderExtensionPluginCommands.StringifyStep, {step});
+    return this.sendRequest(PrivateAPI.RecorderExtensionPluginCommands.StringifyStep, {step}, isString);
   }
 
   /**

package/front_end/models/javascript_metadata/NativeFunctions.ts

@@ -2035,7 +2035,7 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   },
   {
     name: "read",
-    signatures: [["?options"]],
+    signatures: [["?formats"]],
     receivers: ["Clipboard"]
   },
   {
@@ -3220,7 +3220,7 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   {
     name: "focus",
     signatures: [["?options"]],
-    receivers: ["HTMLOrSVGElement","SVGElement","MathMLElement","HTMLElement"]
+    receivers: ["HTMLOrSVGElement","SVGElement","MathMLElement","HTMLElement","CSSPseudoElement","Focusable"]
   },
   {
     name: "assign",
@@ -9167,6 +9167,10 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "scrollIntoViewIfNeeded",
     signatures: [["?centerIfNeeded"]]
   },
+  {
+    name: "Focusable",
+    signatures: [["target"]]
+  },
   {
     name: "getBoxQuads",
     signatures: [["?options"]]

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -579,13 +579,14 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
 
   static isForbiddenNetworkUrl(urlString: Platform.DevToolsPath.UrlString): boolean {
     const trimmedUrl = urlString.trim().toLowerCase();
-    if (trimmedUrl.startsWith('data:') || trimmedUrl.startsWith('blob:') || trimmedUrl.startsWith('javascript:') ||
-        trimmedUrl.startsWith('about:') || trimmedUrl.startsWith('mailto:') || trimmedUrl.startsWith('vbscript:')) {
+    if (trimmedUrl.startsWith('chrome:') || trimmedUrl.startsWith('data:') || trimmedUrl.startsWith('blob:') ||
+        trimmedUrl.startsWith('javascript:') || trimmedUrl.startsWith('about:') || trimmedUrl.startsWith('mailto:') ||
+        trimmedUrl.startsWith('vbscript:')) {
       return true;
     }
     const url = Common.ParsedURL.ParsedURL.fromString(urlString);
     if (!url) {
-      return false;
+      return true;
     }
     if ((url.scheme === 'http' || url.scheme === 'https') && (!url.host || url.host === '.' || url.host === '..')) {
       return true;

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -820,14 +820,6 @@ async function getFunctionNameFromScopeStart(script: SDK.Script.Script, rawLineN
   return name;
 }
 
-export async function resolveDebuggerFrameFunctionName(frame: SDK.DebuggerModel.CallFrame): Promise<string|null> {
-  const startLocation = frame.localScope()?.range()?.start;
-  if (!startLocation) {
-    return null;
-  }
-  return await getFunctionNameFromScopeStart(frame.script, startLocation.lineNumber, startLocation.columnNumber);
-}
-
 export async function resolveProfileFrameFunctionName(
     {scriptId, lineNumber, columnNumber}: Partial<Protocol.Runtime.CallFrame>, target: SDK.Target.Target|null,
     debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): Promise<string|null> {

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -8,7 +8,7 @@ import type * as Workspace from '../workspace/workspace.js';
 
 // eslint-disable-next-line @devtools/es-modules-import
 import type * as StackTrace from './stack_trace.js';
-import type {EvalOrigin, FrameNode, ParsedFrameInfo} from './Trie.js';
+import {type EvalOrigin, FrameKind, type FrameNode, type ParsedFrameInfo} from './Trie.js';
 
 export type AnyStackTraceImpl = StackTraceImpl<FragmentImpl|DebuggableFragmentImpl|ParsedErrorStackFragmentImpl>;
 
@@ -57,17 +57,7 @@ export class FragmentImpl implements StackTrace.StackTrace.Fragment {
   }
 
   get frames(): FrameImpl[] {
-    if (!this.node) {
-      return [];
-    }
-
-    const frames: FrameImpl[] = [];
-
-    for (const node of this.node.getCallStack()) {
-      frames.push(...node.frames);
-    }
-
-    return frames;
+    return this.node ? consolidate([...this.node.getCallStack()]).map(({frame}) => frame) : [];
   }
 }
 
@@ -108,6 +98,90 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
   }
 }
 
+/** A frame of a fragment after outlined frames were merged with their callers. */
+export interface LogicalFrame {
+  /** Node frame for non-merged groups (same identity as `node.frames[inlineIndex]`), a fresh copy for merged groups. */
+  readonly frame: FrameImpl;
+  /** The node this frame was translated from. */
+  readonly node: FrameNode;
+  /** Index of `node` in the call stack (0 = top). Equals the index into `DebuggerPausedDetails.callFrames`. */
+  readonly nodeIndex: number;
+  /** Index of `frame` in `node.frames`. Equals `CallFrame.inlineFrameIndex`. */
+  readonly inlineIndex: number;
+  /** Set only on the last frame of a group: the node that physically invoked this logical frame. */
+  readonly invocationNode?: FrameNode;
+}
+
+/**
+ * Drops HIDDEN nodes and merges each OUTLINED node with its callers into one group of logical frames.
+ *
+ * The chain continues with callers whose `functionKeys.top` equals the previous member's `functionKeys.bottom`,
+ * skipping HIDDEN and not-authored nodes. It ends with the first VISIBLE member (the terminator), or before a
+ * non-matching caller.
+ */
+export function consolidate(callStack: readonly FrameNode[]): LogicalFrame[] {
+  const result: LogicalFrame[] = [];
+  for (let i = 0; i < callStack.length; ++i) {
+    const node = callStack[i];
+    if (node.kind === FrameKind.HIDDEN) {
+      continue;
+    }
+    if (node.kind === FrameKind.VISIBLE || !node.functionKeys) {
+      node.frames.forEach((frame, inlineIndex) => result.push({
+        frame,
+        node,
+        nodeIndex: i,
+        inlineIndex,
+        invocationNode: inlineIndex === node.frames.length - 1 ? node : undefined,
+      }));
+      continue;
+    }
+
+    // `node` is OUTLINED: start a chain.
+    const group = node.frames.map((frame, inlineIndex) => ({frame, node, nodeIndex: i, inlineIndex}));
+    let bottom = node.functionKeys.bottom;
+    let terminator: FrameNode|undefined;
+    let lastConsumed = i;
+    for (let j = i + 1; j < callStack.length && !terminator; ++j) {
+      const caller = callStack[j];
+      if (caller.kind === FrameKind.HIDDEN || isNotAuthored(caller)) {
+        continue;
+      }
+      if (!caller.functionKeys || caller.functionKeys.top !== bottom) {
+        break;
+      }
+      // Skip `caller.frames[0]`: it's the same logical frame as the previous member's bottom frame.
+      for (let k = 1; k < caller.frames.length; ++k) {
+        group.push({frame: caller.frames[k], node: caller, nodeIndex: j, inlineIndex: k});
+      }
+      bottom = caller.functionKeys.bottom;
+      terminator = caller.kind === FrameKind.VISIBLE ? caller : undefined;
+      lastConsumed = j;
+    }
+    // HIDDEN and not-authored nodes after the last chain member are processed by the outer loop.
+    i = lastConsumed;
+
+    const rawName = terminator?.rawFrame.functionName;
+    group.forEach(({frame: f, ...rest}, idx) => result.push({
+      ...rest,
+      frame: new FrameImpl(f.url, f.uiSourceCode, f.name, f.line, f.column, f.missingDebugInfo, rawName, f.isWasm,
+                           idx < group.length - 1),
+      invocationNode: idx === group.length - 1 ? terminator : undefined,
+    }));
+  }
+  return result;
+}
+
+/**
+ * Frames that the authored function can't have called directly (e.g. `Array.prototype.forEach` calling an outlined
+ * callback, or an unmapped runtime helper). A chain looks past them.
+ *
+ * Builtins are unmapped like any other frame without authored code, see `TranslatedRawFrame.unmapped`.
+ */
+function isNotAuthored(node: FrameNode): boolean {
+  return node.kind === FrameKind.VISIBLE && !node.functionKeys && node.isUnmapped;
+}
+
 /**
  * Converts the internal recursive `EvalOrigin` trie representation into the public-facing
  * linear `ParsedErrorStackFrameImpl` representation.
@@ -125,9 +199,10 @@ function createParsedErrorStackFrameImplFromEvalOrigin(
     return undefined;
   }
   const frame = evalOrigin.frames[0];
-  const nestedOrigin = createParsedErrorStackFrameImplFromEvalOrigin(
-      evalOrigin.evalOrigin, parsedFrameInfo?.evalOrigin?.parsedFrameInfo);
-  return new ParsedErrorStackFrameImpl(frame, parsedFrameInfo?.evalOrigin?.parsedFrameInfo, nestedOrigin);
+  const info = parsedFrameInfo?.evalOrigin?.parsedFrameInfo;
+  const nestedOrigin = createParsedErrorStackFrameImplFromEvalOrigin(evalOrigin.evalOrigin, info);
+  // An eval origin is a single location that is also its own invocation.
+  return new ParsedErrorStackFrameImpl(frame, info, info, nestedOrigin);
 }
 
 export class ParsedErrorStackFragmentImpl implements StackTrace.StackTrace.ParsedErrorStackFragment {
@@ -139,27 +214,33 @@ export class ParsedErrorStackFragmentImpl implements StackTrace.StackTrace.Parse
       return [];
     }
 
-    const frames: ParsedErrorStackFrameImpl[] = [];
-
-    for (const node of this.fragment.node.getCallStack()) {
-      const evalOrigin = createParsedErrorStackFrameImplFromEvalOrigin(node.evalOrigin, node.parsedFrameInfo);
-      for (const frame of node.frames) {
-        frames.push(new ParsedErrorStackFrameImpl(frame, node.parsedFrameInfo, evalOrigin));
+    const evalOrigins = new Map<FrameNode, ParsedErrorStackFrameImpl|undefined>();
+    return consolidate([...this.fragment.node.getCallStack()]).map(({frame, node, invocationNode}) => {
+      if (!evalOrigins.has(node)) {
+        evalOrigins.set(node, createParsedErrorStackFrameImplFromEvalOrigin(node.evalOrigin, node.parsedFrameInfo));
       }
-    }
-
-    return frames;
+      return new ParsedErrorStackFrameImpl(frame, node.parsedFrameInfo, invocationNode?.parsedFrameInfo,
+                                           evalOrigins.get(node));
+    });
   }
 }
 
+/**
+ * Location properties (e.g. `isAsync`) describe where execution is, and come from the node a frame was translated
+ * from. Invocation properties (e.g. `isConstructor`) describe how the physical function was called, and only exist
+ * on the last frame of a group of inlined or merged frames.
+ */
 export class ParsedErrorStackFrameImpl implements StackTrace.StackTrace.ParsedErrorStackFrame {
   readonly #frame: FrameImpl;
-  readonly #parsedFrameInfo?: ParsedFrameInfo;
+  readonly #locationInfo?: ParsedFrameInfo;
+  readonly #invocationInfo?: ParsedFrameInfo;
   readonly #evalOrigin?: ParsedErrorStackFrameImpl;
 
-  constructor(frame: FrameImpl, parsedFrameInfo?: ParsedFrameInfo, evalOrigin?: ParsedErrorStackFrameImpl) {
+  constructor(frame: FrameImpl, locationInfo?: ParsedFrameInfo, invocationInfo?: ParsedFrameInfo,
+              evalOrigin?: ParsedErrorStackFrameImpl) {
     this.#frame = frame;
-    this.#parsedFrameInfo = parsedFrameInfo;
+    this.#locationInfo = locationInfo;
+    this.#invocationInfo = invocationInfo;
     this.#evalOrigin = evalOrigin;
   }
 
@@ -186,13 +267,13 @@ export class ParsedErrorStackFrameImpl implements StackTrace.StackTrace.ParsedEr
   }
 
   get isAsync(): boolean|undefined {
-    return this.#parsedFrameInfo?.isAsync;
+    return this.#locationInfo?.isAsync;
   }
   get isConstructor(): boolean|undefined {
-    return this.#parsedFrameInfo?.isConstructor;
+    return this.#invocationInfo?.isConstructor;
   }
   get isEval(): boolean|undefined {
-    return this.#parsedFrameInfo?.isEval;
+    return this.#locationInfo?.isEval;
   }
   get evalOrigin(): ParsedErrorStackFrameImpl|undefined {
     return this.#evalOrigin;
@@ -204,19 +285,19 @@ export class ParsedErrorStackFrameImpl implements StackTrace.StackTrace.ParsedEr
     return this.#frame.isInline;
   }
   get wasmModuleName(): string|undefined {
-    return this.#parsedFrameInfo?.wasmModuleName;
+    return this.#locationInfo?.wasmModuleName;
   }
   get wasmFunctionIndex(): number|undefined {
-    return this.#parsedFrameInfo?.wasmFunctionIndex;
+    return this.#locationInfo?.wasmFunctionIndex;
   }
   get typeName(): string|undefined {
-    return this.#parsedFrameInfo?.typeName;
+    return this.#invocationInfo?.typeName;
   }
   get methodName(): string|undefined {
-    return this.#parsedFrameInfo?.methodName;
+    return this.#invocationInfo?.methodName;
   }
   get promiseIndex(): number|undefined {
-    return this.#parsedFrameInfo?.promiseIndex;
+    return this.#locationInfo?.promiseIndex;
   }
 }
 
@@ -226,6 +307,12 @@ export class ParsedErrorStackFrameImpl implements StackTrace.StackTrace.ParsedEr
  * FragmentImpl will stay the same.
  */
 export class DebuggableFragmentImpl implements StackTrace.StackTrace.DebuggableFragment {
+  /**
+   * Virtual call frames for inlined frames, so that reading `frames` repeatedly (e.g. after `UPDATED`) yields
+   * identical `sdkFrame`s. A new DebuggableFragmentImpl is created per pause, so this lives as long as `callFrames`.
+   */
+  readonly #virtualCallFrames = new Map<string, SDK.DebuggerModel.CallFrame>();
+
   constructor(readonly fragment: FragmentImpl, private readonly callFrames: SDK.DebuggerModel.CallFrame[]) {
   }
 
@@ -234,20 +321,24 @@ export class DebuggableFragmentImpl implements StackTrace.StackTrace.DebuggableF
       return [];
     }
 
-    const frames: DebuggableFrameImpl[] = [];
+    return consolidate([...this.fragment.node.getCallStack()]).map(({frame, nodeIndex, inlineIndex}) => {
+      return new DebuggableFrameImpl(frame, this.#sdkFrameFor(nodeIndex, inlineIndex, frame.name ?? ''));
+    });
+  }
 
-    let index = 0;
-    for (const node of this.fragment.node.getCallStack()) {
-      for (const [inlineIdx, frame] of node.frames.entries()) {
-        // Create virtual frames for inlined frames.
-        const sdkFrame = inlineIdx === 0 ? this.callFrames[index] :
-                                           this.callFrames[index].createVirtualCallFrame(inlineIdx, frame.name ?? '');
-        frames.push(new DebuggableFrameImpl(frame, sdkFrame));
-      }
-      index++;
+  #sdkFrameFor(nodeIndex: number, inlineIndex: number, name: string): SDK.DebuggerModel.CallFrame {
+    const physical = this.callFrames[nodeIndex];
+    if (inlineIndex === 0) {
+      return physical;
     }
-
-    return frames;
+    // The name is part of the key, as a re-translation can change the name at the same indices.
+    const key = `${nodeIndex}:${inlineIndex}:${name}`;
+    let frame = this.#virtualCallFrames.get(key);
+    if (!frame) {
+      frame = physical.createVirtualCallFrame(inlineIndex, name);
+      this.#virtualCallFrames.set(key, frame);
+    }
+    return frame;
   }
 }