chrome-devtools-frontend 1.0.1697998 → 1.0.1699061

package/front_end/core/sdk/SourceMapManager.ts

@@ -7,13 +7,13 @@ import * as Platform from '../platform/platform.js';
 
 import type {FrameAssociated} from './FrameAssociated.js';
 import {PageResourceLoader, type PageResourceLoadInitiator, type ResourceLoader} from './PageResourceLoader.js';
-import {type DebugId, parseSourceMap, SourceMap, type SourceMapV3} from './SourceMap.js';
+import {type DebugId, parseSourceMap, SourceMap, type SourceMapProvenance, type SourceMapV3} from './SourceMap.js';
 import {SourceMapCache} from './SourceMapCache.js';
 import {type Target, Type} from './Target.js';
 
 export type SourceMapFactory<T> =
     (compiledURL: Platform.DevToolsPath.UrlString, sourceMappingURL: Platform.DevToolsPath.UrlString,
-     payload: SourceMapV3, client: T) => SourceMap;
+     payload: SourceMapV3, client: T, provenance: SourceMapProvenance) => SourceMap;
 
 export const lazyLoadingSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
   name: 'source-maps-lazy-loading',
@@ -37,8 +37,8 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
 
     this.#target = target;
     this.#factory = factory ??
-        ((compiledURL, sourceMappingURL, payload) =>
-             new SourceMap(compiledURL, sourceMappingURL, payload, this.#target.targetManager().getConsole()));
+        ((compiledURL, sourceMappingURL, payload, _client, provenance) => new SourceMap(
+             compiledURL, sourceMappingURL, payload, this.#target.targetManager().getConsole(), undefined, provenance));
     const settings = target.targetManager().settings;
     this.#lazyLoadingSetting = settings.resolve(lazyLoadingSettingDescriptor);
   }
@@ -60,8 +60,8 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
       this.detachSourceMap(client);
     }
     this.#isEnabled = isEnabled;
-    for (const [client, {relativeSourceURL, relativeSourceMapURL}] of clientData) {
-      this.attachSourceMap(client, relativeSourceURL, relativeSourceMapURL);
+    for (const [client, {relativeSourceURL, relativeSourceMapURL, provenance}] of clientData) {
+      this.attachSourceMap(client, relativeSourceURL, relativeSourceMapURL, provenance);
     }
   }
 
@@ -97,8 +97,8 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   }
 
   // TODO(bmeurer): We are lying about the type of |relativeSourceURL| here.
-  attachSourceMap(
-      client: T, relativeSourceURL: Platform.DevToolsPath.UrlString, relativeSourceMapURL: string|undefined): void {
+  attachSourceMap(client: T, relativeSourceURL: Platform.DevToolsPath.UrlString, relativeSourceMapURL: string|undefined,
+                  provenance: SourceMapProvenance): void {
     if (this.#clientData.has(client)) {
       throw new Error('SourceMap is already attached or being attached to client');
     }
@@ -109,6 +109,7 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
     const clientData: ClientData = {
       relativeSourceURL,
       relativeSourceMapURL,
+      provenance,
       getSourceMap: () => Promise.resolve(undefined),
     };
     this.#clientData.set(client, clientData);
@@ -142,7 +143,7 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
                   loadSourceMap(resourceLoader, this.#sourceMapCache, sourceMapURL, client.debugId(), initiator)
                       .then(
                           payload => {
-                            const sourceMap = this.#factory(sourceURL, sourceMapURL, payload, client);
+                            const sourceMap = this.#factory(sourceURL, sourceMapURL, payload, client, provenance);
                             if (this.#clientData.get(client) === clientData) {
                               clientData.sourceMap = sourceMap;
                               this.#sourceMaps.set(sourceMap, client);
@@ -257,6 +258,7 @@ interface ClientData {
   // Stores the raw sourceMappingURL as provided by V8. These are not guaranteed to
   // be valid URLs and will be checked and resolved once `attachSourceMap` is called.
   relativeSourceMapURL: string;
+  provenance: SourceMapProvenance;
   sourceMap?: SourceMap;
   getSourceMap: () => Promise<SourceMap|undefined>;
 }

package/front_end/core/sdk/SourceMapScopeChainEntry.ts

@@ -27,6 +27,10 @@ const UIStrings = {
    * @description Title of a section in the debugger showing JavaScript variables from the global scope.
    */
   global: 'Global',
+  /**
+   * @description Text in Scope Chain section of the Sources panel.
+   */
+  exception: 'Exception',
   /**
    * @description Text in Scope Chain section of the Sources panel.
    */
@@ -42,6 +46,7 @@ export class SourceMapScopeChainEntry implements ScopeChainEntry {
   readonly #isInnerMostFunction: boolean;
   readonly #returnValue?: RemoteObject;
   readonly #scopeNumber?: number;
+  #object?: SourceMapScopeRemoteObject;
 
   /**
    * @param isInnerMostFunction If `scope` is the innermost 'function' scope. Only used for labeling as we name the
@@ -59,13 +64,23 @@ export class SourceMapScopeChainEntry implements ScopeChainEntry {
     this.#scopeNumber = scopeNumber;
   }
 
+  originalScope(): ScopesCodec.OriginalScope {
+    return this.#scope;
+  }
+
   extraProperties(): RemoteObjectProperty[] {
+    const extraProperties = [];
+    if (this.#isInnerMostFunction && this.#callFrame.exception) {
+      extraProperties.push(new RemoteObjectProperty(i18nString(UIStrings.exception), this.#callFrame.exception,
+                                                    undefined, undefined, undefined, undefined, undefined,
+                                                    /* synthetic */ true));
+    }
     if (this.#returnValue) {
-      return [new RemoteObjectProperty(
+      extraProperties.push(new RemoteObjectProperty(
           i18nString(UIStrings.returnValue), this.#returnValue, undefined, undefined, undefined, undefined, undefined,
-          /* synthetic */ true)];
+          /* synthetic */ true, this.#callFrame.setReturnValue.bind(this.#callFrame)));
     }
-    return [];
+    return extraProperties;
   }
 
   callFrame(): CallFrame {
@@ -108,7 +123,10 @@ export class SourceMapScopeChainEntry implements ScopeChainEntry {
   }
 
   object(): RemoteObject {
-    return new SourceMapScopeRemoteObject(this.#callFrame, this.#scope, this.#range, this.#scopeNumber);
+    if (!this.#object) {
+      this.#object = new SourceMapScopeRemoteObject(this.#callFrame, this.#scope, this.#range, this.#scopeNumber);
+    }
+    return this.#object;
   }
 
   description(): string {
@@ -125,6 +143,8 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
   readonly #scope: ScopesCodec.OriginalScope;
   readonly #range?: ScopesCodec.GeneratedRange;
   readonly #scopeNumber?: number;
+  #propertiesPromise?: Promise<GetPropertiesResult>;
+  #cachedWithPreview = false;
 
   constructor(callFrame: CallFrame, scope: ScopesCodec.OriginalScope, range: ScopesCodec.GeneratedRange|undefined,
               scopeNumber: number|undefined) {
@@ -143,12 +163,89 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
     if (accessorPropertiesOnly) {
       return {properties: [], internalProperties: []};
     }
+    if (!this.#propertiesPromise || (generatePreview && !this.#cachedWithPreview)) {
+      this.#cachedWithPreview = generatePreview;
+      this.#propertiesPromise = this.#evaluateProperties(generatePreview);
+    }
+    return await this.#propertiesPromise;
+  }
+
+  async #evaluateProperties(generatePreview: boolean): Promise<GetPropertiesResult> {
+    if (this.#scope.variables.length === 0) {
+      return {properties: [], internalProperties: []};
+    }
+    const expressions = this.#scope.variables.map((_, index) => this.#findExpression(index));
+    const values = await this.#evaluateAsBatch(expressions, generatePreview) ??
+        await this.#evaluateSeparately(expressions, generatePreview);
+
+    const properties = this.#scope.variables.map((variable, index) => {
+      const value = values[index];
+      if (value === null) {
+        return SourceMapScopeRemoteObject.#unavailableProperty(variable);
+      }
+      return new RemoteObjectProperty(variable, value, /* enumerable */ false, /* writable */ false, /* isOwn */ true,
+                                      /* wasThrown */ false);
+    });
+
+    return {properties, internalProperties: []};
+  }
 
-    const properties: RemoteObjectProperty[] = [];
-    for (const [index, variable] of this.#scope.variables.entries()) {
-      const expression = this.#findExpression(index);
+  /**
+   * Evaluates all binding expressions of this scope with a single `evaluateOnCallFrame` call.
+   *
+   * We build an object literal that spreads in one `{index: value}` object per binding, each produced by
+   * its own arrow function wrapped in `try`/`catch`. A binding that throws contributes nothing, which is
+   * how we tell it apart from one that legitimately evaluates to `undefined`, and it doesn't take the
+   * rest of the scope down with it.
+   *
+   * The expressions are inlined rather than passed to `eval`. `eval` in the evaluated code is the page's
+   * `eval`, which a `script-src` CSP without `'unsafe-eval'` blocks. `Runtime.evaluate` can opt out of
+   * that via `allowUnsafeEvalBlockedByCSP`, but `Debugger.evaluateOnCallFrame` has no such option.
+   * Inlining also means we don't introduce bindings of our own that could shadow the names a binding
+   * expression refers to, and arrow functions keep `this` pointing at the paused frame's receiver.
+   *
+   * @returns The value for each expression, or null if the batch failed as a whole. The latter happens
+   *          when a binding expression doesn't parse, since that takes out the entire object literal.
+   */
+  async #evaluateAsBatch(expressions: Array<string|null>,
+                         generatePreview: boolean): Promise<Array<RemoteObject|null>|null> {
+    const spreads: string[] = [];
+    for (const [index, expression] of expressions.entries()) {
+      if (expression !== null) {
+        spreads.push(`...(() => { try { return {${index}: (${expression})}; } catch {} })()`);
+      }
+    }
+    if (spreads.length === 0) {
+      return expressions.map(() => null);
+    }
+
+    const result = await this.#callFrame.evaluate({
+      expression: `({__proto__: null, ${spreads.join(', ')}})`,
+      // The wrapper object is a throw-away. We only need previews for the values inside of it.
+      generatePreview: false,
+      scopeNumber: this.#scopeNumber,
+    });
+    if ('error' in result || result.exceptionDetails || !result.object) {
+      return null;
+    }
+
+    const {properties} = await result.object.getOwnProperties(generatePreview);
+    result.object.release();
+
+    const valueByIndex = new Map(properties?.map(({name, value}) => [name, value] as const));
+    return expressions.map((_, index) => valueByIndex.get(String(index)) ?? null);
+  }
+
+  /**
+   * Fallback for when {@link #evaluateAsBatch} fails as a whole, so that a single binding expression
+   * that doesn't parse only costs us that one variable.
+   */
+  async #evaluateSeparately(expressions: Array<string|null>,
+                            generatePreview: boolean): Promise<Array<RemoteObject|null>> {
+    const values: Array<RemoteObject|null> = [];
+    for (const expression of expressions) {
       if (expression === null) {
-        properties.push(SourceMapScopeRemoteObject.#unavailableProperty(variable));
+        values.push(null);
         continue;
       }
 
@@ -156,15 +253,12 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
       if ('error' in result || result.exceptionDetails) {
         // TODO(crbug.com/40277685): Make these errors user-visible to aid tooling developers.
         //         E.g. show the error on hover or expose it in the developer resources panel.
-        properties.push(SourceMapScopeRemoteObject.#unavailableProperty(variable));
+        values.push(null);
       } else {
-        properties.push(new RemoteObjectProperty(
-            variable, result.object, /* enumerable */ false, /* writable */ false, /* isOwn */ true,
-            /* wasThrown */ false));
+        values.push(result.object);
       }
     }
-
-    return {properties, internalProperties: []};
+    return values;
   }
 
   /** @returns null if the variable is unavailable at the current paused location */
@@ -177,7 +271,7 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
     if (typeof expressionOrSubRanges === 'string') {
       return expressionOrSubRanges;
     }
-    if (expressionOrSubRanges === null) {
+    if (!expressionOrSubRanges) {
       return null;
     }
 

package/front_end/core/sdk/SourceMapScopesInfo.ts

@@ -355,9 +355,10 @@ export class SourceMapScopesInfo {
     //         w.r.t. each other.
 
     let seenFunctionScope = false;
-    const result: SourceMapScopeChainEntry[] = [];
+    const result: ScopeChainEntry[] = [];
     // Walk the original scope chain outwards and try to find the corresponding generated range along the way.
-    for (let originalScope = rangeChain.at(-1)?.originalScope; originalScope; originalScope = originalScope.parent) {
+    for (let originalScope: ScopesCodec.OriginalScope|null|undefined = innerMostOriginalScope; originalScope;
+         originalScope = originalScope.parent) {
       const range = rangeChain.findLast(r => r.originalScope === originalScope);
       // `kind` is just a label for scope UI views and has no semantic significance, so `isStackFrame`
       // decides whether this scope is a function scope.
@@ -370,6 +371,11 @@ export class SourceMapScopesInfo {
       seenFunctionScope ||= isFunctionScope;
     }
 
+    const globalScope = callFrame.scopeChain()?.find(s => s.type() === Protocol.Debugger.ScopeType.Global);
+    if (globalScope) {
+      result.push(globalScope);
+    }
+
     // If we are paused on a return statement, we need to drop inner block scopes. This is because V8 only emits a
     // single return bytecode and "gotos" at the functions' end, where we are now paused.
     if (callFrame.returnValue() !== null) {