lighthouse 10.4.0-dev.20230719 → 10.4.0-dev.20230721

package/cli/test/smokehouse/lighthouse-runners/bundle.js

@@ -17,7 +17,7 @@ import {Worker, isMainThread, parentPort, workerData} from 'worker_threads';
 import {once} from 'events';
 
 import puppeteer from 'puppeteer-core';
-import ChromeLauncher from 'chrome-launcher';
+import * as ChromeLauncher from 'chrome-launcher';
 
 import {LH_ROOT} from '../../../../root.js';
 import {loadArtifacts, saveArtifacts} from '../../../../core/lib/asset-saver.js';

package/cli/test/smokehouse/lighthouse-runners/cli.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../../../../types/internal/lighthouse-logger.d.ts" />
 /**
  * Launch Chrome and do a full Lighthouse run via the Lighthouse CLI.
  * @param {string} url

package/cli/test/smokehouse/report-assert.d.ts

@@ -1,4 +1,3 @@
-/// <reference path="../../../../../types/internal/lighthouse-logger.d.ts" />
 export type Difference = {
     path: string;
     actual: any;

package/core/computed/processed-navigation.d.ts

@@ -1,6 +1,6 @@
 export { ProcessedNavigationComputed as ProcessedNavigation };
 declare const ProcessedNavigationComputed: typeof ProcessedNavigation & {
-    request: (dependencies: import("../index.js").Trace | import("../index.js").Artifacts.ProcessedTrace, context: import("../../types/utility-types.js").default.ImmutableObject<{
+    request: (dependencies: import("../index.js").Artifacts.ProcessedTrace | import("../index.js").Trace, context: import("../../types/utility-types.js").default.ImmutableObject<{
         computedCache: Map<string, import("../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
     }>) => Promise<import("../index.js").Artifacts.ProcessedNavigation>;
 };

package/core/config/constants.js

@@ -17,7 +17,7 @@ const throttling = {
   DEVTOOLS_RTT_ADJUSTMENT_FACTOR,
   DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR,
   // These values align with WebPageTest's definition of "Fast 3G"
-  // But offer similar charateristics to roughly the 75th percentile of 4G connections.
+  // But offer similar characteristics to roughly the 75th percentile of 4G connections.
   mobileSlow4G: {
     rttMs: 150,
     throughputKbps: 1.6 * 1024,

package/core/gather/driver/execution-context.js

@@ -108,7 +108,7 @@ class ExecutionContext {
         ${ExecutionContext._cachedNativesPreamble};
         globalThis.__lighthouseExecutionContextUniqueIdentifier =
           ${uniqueExecutionContextIdentifier};
-        ${pageFunctions.esbuildFunctionNameStubString}
+        ${pageFunctions.esbuildFunctionWrapperString}
         return new Promise(function (resolve) {
           return Promise.resolve()
             .then(_ => ${expression})
@@ -277,13 +277,20 @@ class ExecutionContext {
    * @return {string}
    */
   static serializeDeps(deps) {
-    deps = [pageFunctions.esbuildFunctionNameStubString, ...deps || []];
+    deps = [pageFunctions.esbuildFunctionWrapperString, ...deps || []];
     return deps.map(dep => {
       if (typeof dep === 'function') {
         // esbuild will change the actual function name (ie. function actualName() {})
-        // always, despite minification settings, but preserve the real name in `actualName.name`
-        // (see esbuildFunctionNameStubString).
-        return `const ${dep.name} = ${dep}`;
+        // always, and preserve the real name in `actualName.name`.
+        // See esbuildFunctionWrapperString.
+        const output = dep.toString();
+        const runtimeName = pageFunctions.getRuntimeFunctionName(dep);
+        if (runtimeName !== dep.name) {
+          // In addition to exposing the mangled name, also expose the original as an alias.
+          return `${output}; const ${dep.name} = ${runtimeName};`;
+        } else {
+          return output;
+        }
       } else {
         return dep;
       }

package/core/gather/driver/navigation.js

@@ -6,7 +6,6 @@
 
 import log from 'lighthouse-logger';
 
-import {NetworkMonitor} from './network-monitor.js';
 import {waitForFullyLoaded, waitForFrameNavigated, waitForUserToContinue} from './wait-for-condition.js'; // eslint-disable-line max-len
 import * as constants from '../../config/constants.js';
 import * as i18n from '../../lib/i18n/i18n.js';
@@ -89,10 +88,9 @@ async function gotoURL(driver, requestor, options) {
   log.time(status);
 
   const session = driver.defaultSession;
-  const networkMonitor = new NetworkMonitor(driver.targetManager);
+  const networkMonitor = driver.networkMonitor;
 
   // Enable the events and network monitor needed to track navigation progress.
-  await networkMonitor.enable();
   await session.sendCommand('Page.enable');
   await session.sendCommand('Page.setLifecycleEventsEnabled', {enabled: true});
 
@@ -144,7 +142,6 @@ async function gotoURL(driver, requestor, options) {
 
   // Bring `Page.navigate` errors back into the promise chain. See https://github.com/GoogleChrome/lighthouse/pull/6739.
   await waitForNavigationTriggered;
-  await networkMonitor.disable();
 
   if (options.debugNavigation) {
     await waitForUserToContinue(driver);

package/core/gather/driver/network-monitor.d.ts

@@ -76,6 +76,7 @@ export class NetworkMonitor extends NetworkMonitor_base {
      */
     _emitNetworkStatus(): void;
 }
+import * as LH from '../../../types/lh.js';
 import { NetworkRecorder } from '../../lib/network-recorder.js';
 import { NetworkRequest } from '../../lib/network-request.js';
 export {};

package/core/gather/driver/network-monitor.js

@@ -13,6 +13,7 @@ import {EventEmitter} from 'events';
 
 import log from 'lighthouse-logger';
 
+import * as LH from '../../../types/lh.js';
 import {NetworkRecorder} from '../../lib/network-recorder.js';
 import {NetworkRequest} from '../../lib/network-request.js';
 import UrlUtils from '../../lib/url-utils.js';

package/core/gather/driver.d.ts

@@ -7,6 +7,8 @@ export class Driver implements LH.Gatherer.Driver {
     _page: import("../../types/puppeteer.js").default.Page;
     /** @type {TargetManager|undefined} */
     _targetManager: TargetManager | undefined;
+    /** @type {NetworkMonitor|undefined} */
+    _networkMonitor: NetworkMonitor | undefined;
     /** @type {ExecutionContext|undefined} */
     _executionContext: ExecutionContext | undefined;
     /** @type {Fetcher|undefined} */
@@ -14,9 +16,9 @@ export class Driver implements LH.Gatherer.Driver {
     defaultSession: import("../../types/gatherer.js").default.ProtocolSession;
     /** @return {LH.Gatherer.Driver['executionContext']} */
     get executionContext(): ExecutionContext;
-    /** @return {Fetcher} */
-    get fetcher(): Fetcher;
+    get fetcher(): any;
     get targetManager(): any;
+    get networkMonitor(): any;
     /** @return {Promise<string>} */
     url(): Promise<string>;
     /** @return {Promise<void>} */
@@ -25,6 +27,7 @@ export class Driver implements LH.Gatherer.Driver {
     disconnect(): Promise<void>;
 }
 import { TargetManager } from './driver/target-manager.js';
+import { NetworkMonitor } from './driver/network-monitor.js';
 import { ExecutionContext } from './driver/execution-context.js';
 import { Fetcher } from './fetcher.js';
 //# sourceMappingURL=driver.d.ts.map

package/core/gather/driver.js

@@ -9,6 +9,7 @@ import log from 'lighthouse-logger';
 import {ExecutionContext} from './driver/execution-context.js';
 import {TargetManager} from './driver/target-manager.js';
 import {Fetcher} from './fetcher.js';
+import {NetworkMonitor} from './driver/network-monitor.js';
 
 /** @return {*} */
 const throwNotConnectedFn = () => {
@@ -37,6 +38,8 @@ class Driver {
     this._page = page;
     /** @type {TargetManager|undefined} */
     this._targetManager = undefined;
+    /** @type {NetworkMonitor|undefined} */
+    this._networkMonitor = undefined;
     /** @type {ExecutionContext|undefined} */
     this._executionContext = undefined;
     /** @type {Fetcher|undefined} */
@@ -51,7 +54,6 @@ class Driver {
     return this._executionContext;
   }
 
-  /** @return {Fetcher} */
   get fetcher() {
     if (!this._fetcher) return throwNotConnectedFn();
     return this._fetcher;
@@ -62,6 +64,11 @@ class Driver {
     return this._targetManager;
   }
 
+  get networkMonitor() {
+    if (!this._networkMonitor) return throwNotConnectedFn();
+    return this._networkMonitor;
+  }
+
   /** @return {Promise<string>} */
   async url() {
     return this._page.url();
@@ -75,6 +82,8 @@ class Driver {
     const cdpSession = await this._page.target().createCDPSession();
     this._targetManager = new TargetManager(cdpSession);
     await this._targetManager.enable();
+    this._networkMonitor = new NetworkMonitor(this._targetManager);
+    await this._networkMonitor.enable();
     this.defaultSession = this._targetManager.rootSession();
     this._executionContext = new ExecutionContext(this.defaultSession);
     this._fetcher = new Fetcher(this.defaultSession);
@@ -85,6 +94,7 @@ class Driver {
   async disconnect() {
     if (this.defaultSession === throwingSession) return;
     await this._targetManager?.disable();
+    await this._networkMonitor?.disable();
     await this.defaultSession.dispose();
   }
 }

package/core/gather/gatherers/full-page-screenshot.js

@@ -9,7 +9,6 @@
 import BaseGatherer from '../base-gatherer.js';
 import * as emulation from '../../lib/emulation.js';
 import {pageFunctions} from '../../lib/page-functions.js';
-import {NetworkMonitor} from '../driver/network-monitor.js';
 import {waitForNetworkIdle} from '../driver/wait-for-condition.js';
 
 // JPEG quality setting
@@ -89,7 +88,7 @@ class FullPageScreenshot extends BaseGatherer {
     const height = Math.min(fullHeight, MAX_WEBP_SIZE);
 
     // Setup network monitor before we change the viewport.
-    const networkMonitor = new NetworkMonitor(context.driver.targetManager);
+    const networkMonitor = context.driver.networkMonitor;
     const waitForNetworkIdleResult = waitForNetworkIdle(session, networkMonitor, {
       pretendDCLAlreadyFired: true,
       networkQuietThresholdMs: 1000,
@@ -97,7 +96,6 @@ class FullPageScreenshot extends BaseGatherer {
       idleEvent: 'network-critical-idle',
       isIdle: recorder => recorder.isCriticalIdle(),
     });
-    await networkMonitor.enable();
 
     await session.sendCommand('Emulation.setDeviceMetricsOverride', {
       mobile: deviceMetrics.mobile,
@@ -113,7 +111,6 @@ class FullPageScreenshot extends BaseGatherer {
       waitForNetworkIdleResult.promise,
     ]);
     waitForNetworkIdleResult.cancel();
-    await networkMonitor.disable();
 
     // Now that new resources are (probably) fetched, wait long enough for a layout.
     await context.driver.executionContext.evaluate(waitForDoubleRaf, {args: []});

package/core/gather/gatherers/scripts.d.ts

@@ -3,6 +3,7 @@ export default Scripts;
  * @fileoverview Gets JavaScript file contents.
  */
 declare class Scripts extends BaseGatherer {
+    static symbol: symbol;
     /** @type {LH.Crdp.Debugger.ScriptParsedEvent[]} */
     _scriptParsedEvents: LH.Crdp.Debugger.ScriptParsedEvent[];
     /** @type {Array<string | undefined>} */

package/core/gather/gatherers/scripts.js

@@ -48,8 +48,11 @@ function isLighthouseRuntimeEvaluateScript(script) {
  * @fileoverview Gets JavaScript file contents.
  */
 class Scripts extends BaseGatherer {
+  static symbol = Symbol('Scripts');
+
   /** @type {LH.Gatherer.GathererMeta} */
   meta = {
+    symbol: Scripts.symbol,
     supportedModes: ['timespan', 'navigation'],
   };
 
@@ -91,11 +94,6 @@ class Scripts extends BaseGatherer {
 
     session.off('Debugger.scriptParsed', this.onScriptParsed);
 
-    // Without this line the Debugger domain will be off in FR runner,
-    // because only the legacy gatherer has special handling for multiple,
-    // overlapped enabled/disable calls.
-    await session.sendCommand('Debugger.enable');
-
     // If run on a mobile device, be sensitive to memory limitations and only
     // request one at a time.
     this._scriptContents = await runInSeriesOrParallel(

package/core/gather/gatherers/source-maps.d.ts

@@ -3,12 +3,8 @@ export default SourceMaps;
  * @fileoverview Gets JavaScript source maps.
  */
 declare class SourceMaps extends BaseGatherer {
-    /** @type {LH.Crdp.Debugger.ScriptParsedEvent[]} */
-    _scriptParsedEvents: LH.Crdp.Debugger.ScriptParsedEvent[];
-    /**
-     * @param {LH.Crdp.Debugger.ScriptParsedEvent} event
-     */
-    onScriptParsed(event: LH.Crdp.Debugger.ScriptParsedEvent): void;
+    /** @type {LH.Gatherer.GathererMeta<'Scripts'>} */
+    meta: LH.Gatherer.GathererMeta<'Scripts'>;
     /**
      * @param {LH.Gatherer.Driver} driver
      * @param {string} sourceMapUrl
@@ -28,23 +24,15 @@ declare class SourceMaps extends BaseGatherer {
     _resolveUrl(url: string, base: string): string | undefined;
     /**
      * @param {LH.Gatherer.Driver} driver
-     * @param {LH.Crdp.Debugger.ScriptParsedEvent} event
+     * @param {LH.Artifacts.Script} script
      * @return {Promise<LH.Artifacts.SourceMap>}
      */
-    _retrieveMapFromScriptParsedEvent(driver: LH.Gatherer.Driver, event: LH.Crdp.Debugger.ScriptParsedEvent): Promise<LH.Artifacts.SourceMap>;
-    /**
-     * @param {LH.Gatherer.Context} context
-     */
-    startSensitiveInstrumentation(context: LH.Gatherer.Context): Promise<void>;
-    /**
-     * @param {LH.Gatherer.Context} context
-     */
-    stopSensitiveInstrumentation(context: LH.Gatherer.Context): Promise<void>;
+    _retrieveMapFromScript(driver: LH.Gatherer.Driver, script: LH.Artifacts.Script): Promise<LH.Artifacts.SourceMap>;
     /**
-     * @param {LH.Gatherer.Context} context
+     * @param {LH.Gatherer.Context<'Scripts'>} context
      * @return {Promise<LH.Artifacts['SourceMaps']>}
      */
-    getArtifact(context: LH.Gatherer.Context): Promise<LH.Artifacts['SourceMaps']>;
+    getArtifact(context: LH.Gatherer.Context<'Scripts'>): Promise<LH.Artifacts['SourceMaps']>;
 }
 import BaseGatherer from '../base-gatherer.js';
 //# sourceMappingURL=source-maps.d.ts.map

package/core/gather/gatherers/source-maps.js

@@ -6,23 +6,18 @@
 
 import SDK from '../../lib/cdt/SDK.js';
 import BaseGatherer from '../base-gatherer.js';
+import Scripts from './scripts.js';
 
 /**
  * @fileoverview Gets JavaScript source maps.
  */
 class SourceMaps extends BaseGatherer {
-  /** @type {LH.Gatherer.GathererMeta} */
+  /** @type {LH.Gatherer.GathererMeta<'Scripts'>} */
   meta = {
     supportedModes: ['timespan', 'navigation'],
+    dependencies: {Scripts: Scripts.symbol},
   };
 
-  constructor() {
-    super();
-    /** @type {LH.Crdp.Debugger.ScriptParsedEvent[]} */
-    this._scriptParsedEvents = [];
-    this.onScriptParsed = this.onScriptParsed.bind(this);
-  }
-
   /**
    * @param {LH.Gatherer.Driver} driver
    * @param {string} sourceMapUrl
@@ -45,15 +40,6 @@ class SourceMaps extends BaseGatherer {
     return SDK.SourceMap.parseSourceMap(buffer.toString());
   }
 
-  /**
-   * @param {LH.Crdp.Debugger.ScriptParsedEvent} event
-   */
-  onScriptParsed(event) {
-    if (event.sourceMapURL) {
-      this._scriptParsedEvents.push(event);
-    }
-  }
-
   /**
    * @param {string} url
    * @param {string} base
@@ -69,27 +55,27 @@ class SourceMaps extends BaseGatherer {
 
   /**
    * @param {LH.Gatherer.Driver} driver
-   * @param {LH.Crdp.Debugger.ScriptParsedEvent} event
+   * @param {LH.Artifacts.Script} script
    * @return {Promise<LH.Artifacts.SourceMap>}
    */
-  async _retrieveMapFromScriptParsedEvent(driver, event) {
-    if (!event.sourceMapURL) {
+  async _retrieveMapFromScript(driver, script) {
+    if (!script.sourceMapURL) {
       throw new Error('precondition failed: event.sourceMapURL should exist');
     }
 
     // `sourceMapURL` is simply the URL found in either a magic comment or an x-sourcemap header.
     // It has not been resolved to a base url.
-    const isSourceMapADataUri = event.sourceMapURL.startsWith('data:');
-    const scriptUrl = event.url;
+    const isSourceMapADataUri = script.sourceMapURL.startsWith('data:');
+    const scriptUrl = script.name;
     const rawSourceMapUrl = isSourceMapADataUri ?
-        event.sourceMapURL :
-        this._resolveUrl(event.sourceMapURL, event.url);
+        script.sourceMapURL :
+        this._resolveUrl(script.sourceMapURL, script.name);
 
     if (!rawSourceMapUrl) {
       return {
-        scriptId: event.scriptId,
+        scriptId: script.scriptId,
         scriptUrl,
-        errorMessage: `Could not resolve map url: ${event.sourceMapURL}`,
+        errorMessage: `Could not resolve map url: ${script.sourceMapURL}`,
       };
     }
 
@@ -109,14 +95,14 @@ class SourceMaps extends BaseGatherer {
         map.sections = map.sections.filter(section => section.map);
       }
       return {
-        scriptId: event.scriptId,
+        scriptId: script.scriptId,
         scriptUrl,
         sourceMapUrl,
         map,
       };
     } catch (err) {
       return {
-        scriptId: event.scriptId,
+        scriptId: script.scriptId,
         scriptUrl,
         sourceMapUrl,
         errorMessage: err.toString(),
@@ -125,30 +111,13 @@ class SourceMaps extends BaseGatherer {
   }
 
   /**
-   * @param {LH.Gatherer.Context} context
-   */
-  async startSensitiveInstrumentation(context) {
-    const session = context.driver.defaultSession;
-    session.on('Debugger.scriptParsed', this.onScriptParsed);
-    await session.sendCommand('Debugger.enable');
-  }
-
-  /**
-   * @param {LH.Gatherer.Context} context
-   */
-  async stopSensitiveInstrumentation(context) {
-    const session = context.driver.defaultSession;
-    await session.sendCommand('Debugger.disable');
-    session.off('Debugger.scriptParsed', this.onScriptParsed);
-  }
-
-  /**
-   * @param {LH.Gatherer.Context} context
+   * @param {LH.Gatherer.Context<'Scripts'>} context
    * @return {Promise<LH.Artifacts['SourceMaps']>}
    */
   async getArtifact(context) {
-    const eventProcessPromises = this._scriptParsedEvents
-      .map((event) => this._retrieveMapFromScriptParsedEvent(context.driver, event));
+    const eventProcessPromises = context.dependencies.Scripts
+      .filter(script => script.sourceMapURL)
+      .map(script => this._retrieveMapFromScript(context.driver, script));
     return Promise.all(eventProcessPromises);
   }
 }

package/core/gather/gatherers/trace-elements.js

@@ -23,6 +23,7 @@ import {ProcessedNavigation} from '../../computed/processed-navigation.js';
 import {LighthouseError} from '../../lib/lh-error.js';
 import {Responsiveness} from '../../computed/metrics/responsiveness.js';
 import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
+import {ExecutionContext} from '../driver/execution-context.js';
 
 /** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[], type?: string}} TraceElementData */
 
@@ -284,12 +285,15 @@ class TraceElements extends BaseGatherer {
         try {
           const objectId = await resolveNodeIdToObjectId(session, backendNodeId);
           if (!objectId) continue;
+
+          const deps = ExecutionContext.serializeDeps([
+            pageFunctions.getNodeDetails,
+            getNodeDetailsData,
+          ]);
           response = await session.sendCommand('Runtime.callFunctionOn', {
             objectId,
             functionDeclaration: `function () {
-              ${pageFunctions.esbuildFunctionNameStubString}
-              ${getNodeDetailsData.toString()};
-              ${pageFunctions.getNodeDetails};
+              ${deps}
               return getNodeDetailsData.call(this);
             }`,
             returnByValue: true,

package/core/lib/network-recorder.d.ts

@@ -17,7 +17,7 @@ export class NetworkRecorder extends NetworkRecorder_base {
      * @param {LH.DevtoolsLog} devtoolsLog
      * @return {Array<LH.Artifacts.NetworkRequest>}
      */
-    static recordsFromLogs(devtoolsLog: import("../index.js").DevtoolsLog): Array<LH.Artifacts.NetworkRequest>;
+    static recordsFromLogs(devtoolsLog: LH.DevtoolsLog): Array<LH.Artifacts.NetworkRequest>;
     /** @type {NetworkRequest[]} */
     _records: NetworkRequest[];
     /** @type {Map<string, NetworkRequest>} */
@@ -117,5 +117,6 @@ export class NetworkRecorder extends NetworkRecorder_base {
     _findRealRequestAndSetSession(requestId: string, targetType: LH.Protocol.TargetType, sessionId: string | undefined): NetworkRequest | undefined;
 }
 import { NetworkRequest } from './network-request.js';
+import * as LH from '../../types/lh.js';
 export {};
 //# sourceMappingURL=network-recorder.d.ts.map

package/core/lib/network-recorder.js

@@ -8,6 +8,7 @@ import {EventEmitter} from 'events';
 
 import log from 'lighthouse-logger';
 
+import * as LH from '../../types/lh.js';
 import {NetworkRequest} from './network-request.js';
 import {PageDependencyGraph} from '../computed/page-dependency-graph.js';
 

package/core/lib/page-functions.d.ts

@@ -11,7 +11,8 @@ export namespace pageFunctions {
     export { wrapRequestIdleCallback };
     export { getBoundingClientRect };
     export { truncate };
-    export { esbuildFunctionNameStubString };
+    export { esbuildFunctionWrapperString };
+    export { getRuntimeFunctionName };
 }
 /**
  * `typed-query-selector`'s CSS selector parser.
@@ -50,11 +51,11 @@ declare function wrapRuntimeEvalErrorInBrowser(err?: string | Error | undefined)
 };
 /**
  * @template {string} T
- * @param {T} selector Optional simple CSS selector to filter nodes on.
+ * @param {T=} selector Optional simple CSS selector to filter nodes on.
  *     Combinators are not supported.
  * @return {Array<ParseSelector<T>>}
  */
-declare function getElementsInDocument<T extends string>(selector: T): import("typed-query-selector/parser").ParseSelector<T, Element>[];
+declare function getElementsInDocument<T extends string>(selector?: T | undefined): import("typed-query-selector/parser").ParseSelector<T, Element>[];
 /**
  * Gets the opening tag text of the given node.
  * @param {Element|ShadowRoot} element
@@ -158,6 +159,11 @@ declare function truncate(string: string, characterLimit: number): string;
 declare namespace truncate {
     function toString(): string;
 }
-declare const esbuildFunctionNameStubString: "var __name=(fn)=>fn;";
+declare const esbuildFunctionWrapperString: string;
+/**
+ * @param {Function} fn
+ * @return {string}
+ */
+declare function getRuntimeFunctionName(fn: Function): string;
 export {};
 //# sourceMappingURL=page-functions.d.ts.map

package/core/lib/page-functions.js

@@ -4,6 +4,8 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
+import {createRequire} from 'module';
+
 import {Util} from '../../shared/util.js';
 
 /**
@@ -50,7 +52,7 @@ function wrapRuntimeEvalErrorInBrowser(err) {
 
 /**
  * @template {string} T
- * @param {T} selector Optional simple CSS selector to filter nodes on.
+ * @param {T=} selector Optional simple CSS selector to filter nodes on.
  *     Combinators are not supported.
  * @return {Array<ParseSelector<T>>}
  */
@@ -513,24 +515,89 @@ function truncate(string, characterLimit) {
   return Util.truncate(string, characterLimit);
 }
 
+function isBundledEnvironment() {
+  // If we're in DevTools or LightRider, we are definitely bundled.
+  // TODO: refactor and delete `global.isDevtools`.
+  if (global.isDevtools || global.isLightrider) return true;
+
+  const require = createRequire(import.meta.url);
+
+  try {
+    // Not foolproof, but `lighthouse-logger` is a dependency of lighthouse that should always be resolvable.
+    // `require.resolve` will only throw in atypical/bundled environments.
+    require.resolve('lighthouse-logger');
+    return false;
+  } catch (err) {
+    return true;
+  }
+}
+
 // This is to support bundled lighthouse.
 // esbuild calls every function with a builtin `__name` (since we set keepNames: true),
 // whose purpose is to store the real name of the function so that esbuild can rename it to avoid
 // collisions. Anywhere we inject dynamically generated code at runtime for the browser to process,
 // we must manually include this function (because esbuild only does so once at the top scope of
 // the bundle, which is irrelevant for code executed in the browser).
-const esbuildFunctionNameStubString = 'var __name=(fn)=>fn;';
+// When minified, esbuild will mangle the name of this wrapper function, so we need to determine what it
+// is at runtime in order to recreate it within the page.
+const esbuildFunctionWrapperString = createEsbuildFunctionWrapper();
 
-/** @type {string} */
-const truncateRawString = truncate.toString();
-truncate.toString = () => `function truncate(string, characterLimit) {
+function createEsbuildFunctionWrapper() {
+  if (!isBundledEnvironment()) {
+    return '';
+  }
+
+  const functionAsString = (()=>{
+    // eslint-disable-next-line no-unused-vars
+    const a = ()=>{};
+  }).toString()
+    // When not minified, esbuild annotates the call to this function wrapper with PURE.
+    // We know further that the name of the wrapper function should be `__name`, but let's not
+    // hardcode that. Remove the PURE annotation to simplify the regex.
+    .replace('/* @__PURE__ */', '');
+  const functionStringMatch = functionAsString.match(/=\s*([\w_]+)\(/);
+  if (!functionStringMatch) {
+    throw new Error('Could not determine esbuild function wrapper name');
+  }
+
+  /**
+   * @param {Function} fn
+   * @param {string} value
+   */
+  const esbuildFunctionWrapper = (fn, value) =>
+    Object.defineProperty(fn, 'name', {value, configurable: true});
+  const wrapperFnName = functionStringMatch[1];
+  return `let ${wrapperFnName}=${esbuildFunctionWrapper}`;
+}
+
+/**
+ * @param {Function} fn
+ * @return {string}
+ */
+function getRuntimeFunctionName(fn) {
+  const match = fn.toString().match(/function ([\w$]+)/);
+  if (!match) throw new Error(`could not find function name for: ${fn}`);
+  return match[1];
+}
+
+// We setup a number of our page functions to automatically include their dependencies.
+// Because of esbuild bundling, we must refer to the actual (mangled) runtime function name.
+/** @type {Record<string, string>} */
+const names = {
+  truncate: getRuntimeFunctionName(truncate),
+  getNodeLabel: getRuntimeFunctionName(getNodeLabel),
+  getOuterHTMLSnippet: getRuntimeFunctionName(getOuterHTMLSnippet),
+  getNodeDetails: getRuntimeFunctionName(getNodeDetails),
+};
+
+truncate.toString = () => `function ${names.truncate}(string, characterLimit) {
   const Util = { ${Util.truncate} };
-  return (${truncateRawString})(string, characterLimit);
+  return Util.truncate(string, characterLimit);
 }`;
 
 /** @type {string} */
 const getNodeLabelRawString = getNodeLabel.toString();
-getNodeLabel.toString = () => `function getNodeLabel(element) {
+getNodeLabel.toString = () => `function ${names.getNodeLabel}(element) {
   ${truncate};
   return (${getNodeLabelRawString})(element);
 }`;
@@ -538,14 +605,14 @@ getNodeLabel.toString = () => `function getNodeLabel(element) {
 /** @type {string} */
 const getOuterHTMLSnippetRawString = getOuterHTMLSnippet.toString();
 // eslint-disable-next-line max-len
-getOuterHTMLSnippet.toString = () => `function getOuterHTMLSnippet(element, ignoreAttrs = [], snippetCharacterLimit = 500) {
+getOuterHTMLSnippet.toString = () => `function ${names.getOuterHTMLSnippet}(element, ignoreAttrs = [], snippetCharacterLimit = 500) {
   ${truncate};
   return (${getOuterHTMLSnippetRawString})(element, ignoreAttrs, snippetCharacterLimit);
 }`;
 
 /** @type {string} */
 const getNodeDetailsRawString = getNodeDetails.toString();
-getNodeDetails.toString = () => `function getNodeDetails(element) {
+getNodeDetails.toString = () => `function ${names.getNodeDetails}(element) {
   ${truncate};
   ${getNodePath};
   ${getNodeSelector};
@@ -568,5 +635,6 @@ export const pageFunctions = {
   wrapRequestIdleCallback,
   getBoundingClientRect,
   truncate,
-  esbuildFunctionNameStubString,
+  esbuildFunctionWrapperString,
+  getRuntimeFunctionName,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.4.0-dev.20230719",
+  "version": "10.4.0-dev.20230721",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -181,7 +181,7 @@
   "dependencies": {
     "@sentry/node": "^6.17.4",
     "axe-core": "4.7.2",
-    "chrome-launcher": "^0.15.2",
+    "chrome-launcher": "^1.0.0",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
     "devtools-protocol": "0.0.1155343",
@@ -190,7 +190,7 @@
     "intl-messageformat": "^4.4.0",
     "jpeg-js": "^0.4.4",
     "js-library-detector": "^6.6.0",
-    "lighthouse-logger": "^1.4.1",
+    "lighthouse-logger": "^2.0.1",
     "lighthouse-stack-packs": "1.11.0",
     "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",

package/readme.md

@@ -337,6 +337,8 @@ This section details services that have integrated Lighthouse data. If you're wo
 
 * **[Treo](https://treo.sh)** - Treo is Lighthouse as a Service. It provides regression testing, geographical regions, custom networks, and integrations with GitHub & Slack. Treo is a paid product with plans for solo-developers and teams.
 
+* **[PageVitals](https://pagevitals.com)** - PageVitals combines Lighthouse, CrUX and real-user monitoring data to monitor the performance of websites. See how your website performs over time and get alerted if it gets too slow. Drill down and find the real cause of any performance issue. PageVitals is a paid product with a free 14-day trial.
+
 * **[Alertdesk](https://www.alertdesk.com/)** - Alertdesk is based on Lighthouse and helps you to keep track of your site’s quality & performance. Run daily quality & performance tests from both Mobile and Desktop and dive into the powerful & intuitive reports. You can also monitor your uptime (every minute - 24/7) & domain health. Alertdesk is a paid product with a free 14-day trial.
 
 * **[Screpy](https://screpy.com)** - Screpy is a web analysis tool that can analyze all pages of your websites in one dashboard and monitor them with your team. It's powered by Lighthouse and it also includes some different analysis tools (SERP, W3C, Uptime, etc). Screpy has free and paid plans.

package/types/gatherer.d.ts

@@ -11,6 +11,7 @@ import {NetworkNode as _NetworkNode} from '../core/lib/dependency-graph/network-
 import {CPUNode as _CPUNode} from '../core/lib/dependency-graph/cpu-node.js';
 import {Simulator as _Simulator} from '../core/lib/dependency-graph/simulator/simulator.js';
 import {ExecutionContext} from '../core/gather/driver/execution-context.js';
+import {NetworkMonitor} from '../core/gather/driver/network-monitor.js';
 import {Fetcher} from '../core/gather/fetcher.js';
 import {ArbitraryEqualityMap} from '../core/lib/arbitrary-equality-map.js';
 
@@ -48,6 +49,7 @@ declare module Gatherer {
       on(event: 'protocolevent', callback: (payload: Protocol.RawEventMessage) => void): void
       off(event: 'protocolevent', callback: (payload: Protocol.RawEventMessage) => void): void
     };
+    networkMonitor: NetworkMonitor;
   }
 
   interface Context<TDependencies extends DependencyKey = DefaultDependenciesKey> {

package/types/internal/lighthouse-logger.d.ts

@@ -1,34 +0,0 @@
-/**
- * @license Copyright 2017 The Lighthouse Authors. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
- */
-
-declare module 'lighthouse-logger' {
-  interface Status {
-    msg: string;
-    id: string;
-    args?: any[];
-  }
-  export function setLevel(level: string): void;
-  export function isVerbose(): boolean;
-  export function formatProtocol(prefix: string, data: Object, level?: string): void;
-  export function log(title: string, ...args: any[]): void;
-  export function warn(title: string, ...args: any[]): void;
-  export function error(title: string, ...args: any[]): void;
-  export function verbose(title: string, ...args: any[]): void;
-  export function time(status: Status, level?: string): void;
-  export function timeEnd(status: Status, level?: string): void;
-  export function reset(): string;
-  export const cross: string;
-  export const dim: string;
-  export const tick: string;
-  export const bold: string;
-  export const purple: string;
-  export function redify(message: any): string;
-  export function greenify(message: any): string;
-  /** Retrieves and clears all stored time entries */
-  export function takeTimeEntries(): PerformanceEntry[];
-  export function getTimeEntries(): PerformanceEntry[];
-  export const events: import('events').EventEmitter;
-}