lighthouse 9.5.0-dev.20220314 → 9.5.0-dev.20220317

package/lighthouse-core/computed/js-bundles.js

@@ -12,14 +12,15 @@ const SDK = require('../lib/cdt/SDK.js');
 /**
  * Calculate the number of bytes contributed by each source file
  * @param {LH.Artifacts.Bundle['map']} map
+ * @param {number} contentLength
  * @param {string} content
  * @return {LH.Artifacts.Bundle['sizes']}
  */
-function computeGeneratedFileSizes(map, content) {
+function computeGeneratedFileSizes(map, contentLength, content) {
   const lines = content.split('\n');
   /** @type {Record<string, number>} */
   const files = {};
-  const totalBytes = content.length;
+  const totalBytes = contentLength;
   let unmappedBytes = totalBytes;
 
   // @ts-expect-error: This function is added in SDK.js. This will eventually be added to CDT.
@@ -78,10 +79,10 @@ function computeGeneratedFileSizes(map, content) {
 
 class JSBundles {
   /**
-   * @param {Pick<LH.Artifacts, 'SourceMaps'|'ScriptElements'>} artifacts
+   * @param {Pick<LH.Artifacts, 'SourceMaps'|'Scripts'>} artifacts
    */
   static async compute_(artifacts) {
-    const {SourceMaps, ScriptElements} = artifacts;
+    const {SourceMaps, Scripts} = artifacts;
 
     /** @type {LH.Artifacts.Bundle[]} */
     const bundles = [];
@@ -89,23 +90,22 @@ class JSBundles {
     // Collate map and script, compute file sizes.
     for (const SourceMap of SourceMaps) {
       if (!SourceMap.map) continue;
-      const {scriptUrl, map: rawMap} = SourceMap;
+      const {scriptId, map: rawMap} = SourceMap;
 
       if (!rawMap.mappings) continue;
 
-      const scriptElement = ScriptElements.find(s => s.src === scriptUrl);
-      if (!scriptElement) continue;
+      const script = Scripts.find(s => s.scriptId === scriptId);
+      if (!script) continue;
 
       const compiledUrl = SourceMap.scriptUrl || 'compiled.js';
       const mapUrl = SourceMap.sourceMapUrl || 'compiled.js.map';
       const map = new SDK.TextSourceMap(compiledUrl, mapUrl, rawMap);
 
-      const content = scriptElement?.content ? scriptElement.content : '';
-      const sizes = computeGeneratedFileSizes(map, content);
+      const sizes = computeGeneratedFileSizes(map, script.length || 0, script.content || '');
 
       const bundle = {
         rawMap,
-        script: scriptElement,
+        script,
         map,
         sizes,
       };
@@ -116,4 +116,4 @@ class JSBundles {
   }
 }
 
-module.exports = makeComputedArtifact(JSBundles, ['ScriptElements', 'SourceMaps']);
+module.exports = makeComputedArtifact(JSBundles, ['Scripts', 'SourceMaps']);

package/lighthouse-core/computed/module-duplication.js

@@ -43,7 +43,7 @@ class ModuleDuplication {
   }
 
   /**
-   * @param {Map<string, Array<{scriptUrl: string, resourceSize: number}>>} moduleNameToSourceData
+   * @param {Map<string, Array<{scriptId: string, resourceSize: number}>>} moduleNameToSourceData
    */
   static _normalizeAggregatedData(moduleNameToSourceData) {
     for (const [key, originalSourceData] of moduleNameToSourceData.entries()) {
@@ -74,7 +74,7 @@ class ModuleDuplication {
   }
 
   /**
-   * @param {Pick<LH.Artifacts, 'ScriptElements'|'SourceMaps'>} artifacts
+   * @param {Pick<LH.Artifacts, 'Scripts'|'SourceMaps'>} artifacts
    * @param {LH.Artifacts.ComputedContext} context
    */
   static async compute_(artifacts, context) {
@@ -109,7 +109,7 @@ class ModuleDuplication {
       }
     }
 
-    /** @type {Map<string, Array<{scriptUrl: string, resourceSize: number}>>} */
+    /** @type {Map<string, Array<{scriptId: string, scriptUrl: string, resourceSize: number}>>} */
     const moduleNameToSourceData = new Map();
     for (const {rawMap, script} of bundles) {
       const sourceDataArray = sourceDatasMap.get(rawMap);
@@ -122,7 +122,8 @@ class ModuleDuplication {
           moduleNameToSourceData.set(sourceData.source, data);
         }
         data.push({
-          scriptUrl: script.src || '',
+          scriptId: script.scriptId,
+          scriptUrl: script.url,
           resourceSize: sourceData.resourceSize,
         });
       }
@@ -133,4 +134,4 @@ class ModuleDuplication {
   }
 }
 
-module.exports = makeComputedArtifact(ModuleDuplication, ['ScriptElements', 'SourceMaps']);
+module.exports = makeComputedArtifact(ModuleDuplication, ['Scripts', 'SourceMaps']);

package/lighthouse-core/computed/unused-javascript-summary.js

@@ -16,14 +16,14 @@ const makeComputedArtifact = require('./computed-artifact.js');
 
 /**
  * @typedef ComputeInput
- * @property {string} url
- * @property {Array<Omit<LH.Crdp.Profiler.ScriptCoverage, 'url'>>} scriptCoverages
+ * @property {string} scriptId
+ * @property {Omit<LH.Crdp.Profiler.ScriptCoverage, 'url'>} scriptCoverage
  * @property {LH.Artifacts.Bundle=} bundle
  */
 
 /**
  * @typedef Summary
- * @property {string} url
+ * @property {string} scriptId
  * @property {number} wastedBytes
  * @property {number} totalBytes
  * @property {number} wastedBytes
@@ -68,43 +68,24 @@ class UnusedJavascriptSummary {
   }
 
   /**
-   * @param {string} url
-   * @param {ReturnType<typeof UnusedJavascriptSummary.determineLengths>} lengths
+   * @param {string} scriptId
+   * @param {WasteData} wasteData
    * @return {Summary}
    */
-  static createItem(url, lengths) {
-    const wastedRatio = (lengths.unused / lengths.content) || 0;
-    const wastedBytes = Math.round(lengths.content * wastedRatio);
+  static createItem(scriptId, wasteData) {
+    const wastedRatio = (wasteData.unusedLength / wasteData.contentLength) || 0;
+    const wastedBytes = Math.round(wasteData.contentLength * wastedRatio);
 
     return {
-      url,
-      totalBytes: lengths.content,
+      scriptId,
+      totalBytes: wasteData.contentLength,
       wastedBytes,
       wastedPercent: 100 * wastedRatio,
     };
   }
 
   /**
-   * @param {WasteData[]} wasteData
-   */
-  static determineLengths(wasteData) {
-    let unused = 0;
-    let content = 0;
-    // TODO: this is right for multiple script tags in an HTML document,
-    // but may be wrong for multiple frames using the same script resource.
-    for (const usage of wasteData) {
-      unused += usage.unusedLength;
-      content += usage.contentLength;
-    }
-
-    return {
-      content,
-      unused,
-    };
-  }
-
-  /**
-   * @param {WasteData[]} wasteData
+   * @param {WasteData} wasteData
    * @param {LH.Artifacts.Bundle} bundle
    */
   static createSourceWastedBytes(wasteData, bundle) {
@@ -131,7 +112,7 @@ class UnusedJavascriptSummary {
         mapping.lastColumnNumber - 1 :
         lineLengths[mapping.lineNumber];
       for (let i = mapping.columnNumber; i <= lastColumnOfMapping; i++) {
-        if (wasteData.every(data => data.unusedByIndex[offset] === 1)) {
+        if (wasteData.unusedByIndex[offset] === 1) {
           const key = mapping.sourceURL || '(unmapped)';
           files[key] = (files[key] || 0) + 1;
         }
@@ -155,11 +136,10 @@ class UnusedJavascriptSummary {
    * @return {Promise<Summary>}
    */
   static async compute_(data) {
-    const {url, scriptCoverages, bundle} = data;
+    const {scriptId, scriptCoverage, bundle} = data;
 
-    const wasteData = scriptCoverages.map(UnusedJavascriptSummary.computeWaste);
-    const lengths = UnusedJavascriptSummary.determineLengths(wasteData);
-    const item = UnusedJavascriptSummary.createItem(url, lengths);
+    const wasteData = UnusedJavascriptSummary.computeWaste(scriptCoverage);
+    const item = UnusedJavascriptSummary.createItem(scriptId, wasteData);
     if (!bundle) return item;
 
     return {
@@ -171,5 +151,5 @@ class UnusedJavascriptSummary {
 
 module.exports = makeComputedArtifact(
   UnusedJavascriptSummary,
-  ['bundle', 'scriptCoverages', 'url']
+  ['bundle', 'scriptCoverage', 'scriptId']
 );

package/lighthouse-core/config/default-config.js

@@ -143,6 +143,7 @@ const defaultConfig = {
       'link-elements',
       'meta-elements',
       'script-elements',
+      'scripts',
       'iframe-elements',
       'inputs',
       'main-document-content',

package/lighthouse-core/fraggle-rock/config/default-config.js

@@ -64,6 +64,7 @@ const artifacts = {
   RobotsTxt: '',
   ServiceWorker: '',
   ScriptElements: '',
+  Scripts: '',
   SourceMaps: '',
   Stacks: '',
   TagsBlockingFirstPaint: '',
@@ -114,6 +115,7 @@ const defaultConfig = {
     {id: artifacts.RobotsTxt, gatherer: 'seo/robots-txt'},
     {id: artifacts.ServiceWorker, gatherer: 'service-worker'},
     {id: artifacts.ScriptElements, gatherer: 'script-elements'},
+    {id: artifacts.Scripts, gatherer: 'scripts'},
     {id: artifacts.SourceMaps, gatherer: 'source-maps'},
     {id: artifacts.Stacks, gatherer: 'stacks'},
     {id: artifacts.TagsBlockingFirstPaint, gatherer: 'dobetterweb/tags-blocking-first-paint'},
@@ -165,6 +167,7 @@ const defaultConfig = {
         artifacts.RobotsTxt,
         artifacts.ServiceWorker,
         artifacts.ScriptElements,
+        artifacts.Scripts,
         artifacts.SourceMaps,
         artifacts.Stacks,
         artifacts.TagsBlockingFirstPaint,

package/lighthouse-core/gather/gatherers/console-messages.js

@@ -101,6 +101,7 @@ class ConsoleMessages extends FRGatherer {
       stackTrace: event.exceptionDetails.stackTrace,
       timestamp: event.timestamp,
       url: event.exceptionDetails.url,
+      scriptId: event.exceptionDetails.scriptId,
       lineNumber: event.exceptionDetails.lineNumber,
       columnNumber: event.exceptionDetails.columnNumber,
     };
@@ -117,7 +118,7 @@ class ConsoleMessages extends FRGatherer {
 
     // JS events have a stack trace, which we use to get the column.
     // CSS/HTML events only expose a line number.
-    const {columnNumber} = event.entry.stackTrace?.callFrames[0] || {};
+    const firstStackFrame = event.entry.stackTrace?.callFrames[0];
 
     this._logEntries.push({
       eventType: 'protocolLog',
@@ -127,8 +128,9 @@ class ConsoleMessages extends FRGatherer {
       stackTrace,
       timestamp,
       url,
+      scriptId: firstStackFrame?.scriptId,
       lineNumber,
-      columnNumber,
+      columnNumber: firstStackFrame?.columnNumber,
     });
   }
 

package/lighthouse-core/gather/gatherers/js-usage.js

@@ -73,72 +73,26 @@ class JsUsage extends FRGatherer {
   }
 
   /**
-   * Usages alone do not always generate an exhaustive list of scripts in timespan and snapshot.
-   * For audits which use this for url/scriptId mappings, we can include an empty usage object.
-   *
-   * @param {Record<string, Array<LH.Crdp.Profiler.ScriptCoverage>>} usageByUrl
-   */
-  _addMissingScriptIds(usageByUrl) {
-    for (const scriptParsedEvent of this._scriptParsedEvents) {
-      const url = scriptParsedEvent.embedderName;
-      if (!url) continue;
-
-      const scripts = usageByUrl[url] || [];
-      if (!scripts.find(s => s.scriptId === scriptParsedEvent.scriptId)) {
-        scripts.push({
-          url,
-          scriptId: scriptParsedEvent.scriptId,
-          functions: [],
-        });
-      }
-      usageByUrl[url] = scripts;
-    }
-  }
-
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} context
    * @return {Promise<LH.Artifacts['JsUsage']>}
    */
-  async getArtifact(context) {
-    /** @type {Record<string, Array<LH.Crdp.Profiler.ScriptCoverage>>} */
-    const usageByUrl = {};
-
-    // Force `Debugger.scriptParsed` events for url to scriptId mappings in snapshot mode.
-    if (context.gatherMode === 'snapshot') {
-      await this.startSensitiveInstrumentation(context);
-      await this.stopSensitiveInstrumentation(context);
-    }
+  async getArtifact() {
+    /** @type {Record<string, LH.Crdp.Profiler.ScriptCoverage>} */
+    const usageByScriptId = {};
 
     for (const scriptUsage of this._scriptUsages) {
-      // `ScriptCoverage.url` can be overridden by a magic sourceURL comment.
-      // Get the associated ScriptParsedEvent and use embedderName, which is the original url.
-      // See https://chromium-review.googlesource.com/c/v8/v8/+/2317310
-      let url = scriptUsage.url;
-      const scriptParsedEvent =
-        this._scriptParsedEvents.find(e => e.scriptId === scriptUsage.scriptId);
-      if (scriptParsedEvent?.embedderName) {
-        url = scriptParsedEvent.embedderName;
-      }
-
       // If `url` is blank, that means the script was anonymous (eval, new Function, onload, ...).
       // Or, it's because it was code Lighthouse over the protocol via `Runtime.evaluate`.
       // We currently don't consider coverage of anonymous scripts, and we definitely don't want
       // coverage of code Lighthouse ran to inspect the page, so we ignore this ScriptCoverage if
       // url is blank.
-      if (scriptUsage.url === '' || (scriptParsedEvent && scriptParsedEvent.embedderName === '')) {
+      if (scriptUsage.url === '') {
         continue;
       }
 
-      const scripts = usageByUrl[url] || [];
-      scripts.push(scriptUsage);
-      usageByUrl[url] = scripts;
-    }
-
-    if (context.gatherMode !== 'navigation') {
-      this._addMissingScriptIds(usageByUrl);
+      usageByScriptId[scriptUsage.scriptId] = scriptUsage;
     }
 
-    return usageByUrl;
+    return usageByScriptId;
   }
 }
 

package/lighthouse-core/gather/gatherers/script-elements.js

@@ -7,10 +7,8 @@
 
 const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
 const NetworkRecords = require('../../computed/network-records.js');
-const NetworkAnalyzer = require('../../lib/dependency-graph/simulator/network-analyzer.js');
 const NetworkRequest = require('../../lib/network-request.js');
 const pageFunctions = require('../../lib/page-functions.js');
-const {fetchResponseBodyFromCache} = require('../driver/network.js');
 const DevtoolsLog = require('./devtools-log.js');
 
 /* global getNodeDetails */
@@ -32,8 +30,6 @@ function collectAllScriptElements() {
       async: script.async,
       defer: script.defer,
       source: script.closest('head') ? 'head' : 'body',
-      content: script.src ? null : script.text,
-      requestId: null,
       // @ts-expect-error - getNodeDetails put into scope via stringification
       node: getNodeDetails(script),
     };
@@ -41,27 +37,6 @@ function collectAllScriptElements() {
 }
 /* c8 ignore stop */
 
-/**
- * @template T, U
- * @param {Array<T>} values
- * @param {(value: T) => Promise<U>} promiseMapper
- * @param {boolean} runInSeries
- * @return {Promise<Array<U>>}
- */
-async function runInSeriesOrParallel(values, promiseMapper, runInSeries) {
-  if (runInSeries) {
-    const results = [];
-    for (const value of values) {
-      const result = await promiseMapper(value);
-      results.push(result);
-    }
-    return results;
-  } else {
-    const promises = values.map(promiseMapper);
-    return await Promise.all(promises);
-  }
-}
-
 /**
  * @fileoverview Gets JavaScript file contents.
  */
@@ -75,13 +50,10 @@ class ScriptElements extends FRGatherer {
   /**
    * @param {LH.Gatherer.FRTransitionalContext} context
    * @param {LH.Artifacts.NetworkRequest[]} networkRecords
-   * @param {LH.Artifacts['HostFormFactor']} formFactor
    * @return {Promise<LH.Artifacts['ScriptElements']>}
    */
-  async _getArtifact(context, networkRecords, formFactor) {
-    const session = context.driver.defaultSession;
+  async _getArtifact(context, networkRecords) {
     const executionContext = context.driver.executionContext;
-    const mainResource = NetworkAnalyzer.findOptionalMainDocument(networkRecords, context.url);
 
     const scripts = await executionContext.evaluate(collectAllScriptElements, {
       args: [],
@@ -92,34 +64,16 @@ class ScriptElements extends FRGatherer {
       ],
     });
 
-    for (const script of scripts) {
-      if (mainResource && script.content) script.requestId = mainResource.requestId;
-    }
-
     const scriptRecords = networkRecords
+      .filter(record => record.resourceType === NetworkRequest.TYPES.Script)
       // Ignore records from OOPIFs
-      .filter(record => !record.sessionId)
-      // Only get the content of script requests
-      .filter(record => record.resourceType === NetworkRequest.TYPES.Script);
-
-    // If run on a mobile device, be sensitive to memory limitations and only request one
-    // record at a time.
-    const scriptRecordContents = await runInSeriesOrParallel(
-      scriptRecords,
-      record => fetchResponseBodyFromCache(session, record.requestId).catch(() => ''),
-      formFactor === 'mobile' /* runInSeries */
-    );
+      .filter(record => !record.sessionId);
 
     for (let i = 0; i < scriptRecords.length; i++) {
       const record = scriptRecords[i];
-      const content = scriptRecordContents[i];
-      if (!content) continue;
 
       const matchedScriptElement = scripts.find(script => script.src === record.url);
-      if (matchedScriptElement) {
-        matchedScriptElement.requestId = record.requestId;
-        matchedScriptElement.content = content;
-      } else {
+      if (!matchedScriptElement) {
         scripts.push({
           type: null,
           src: record.url,
@@ -127,12 +81,11 @@ class ScriptElements extends FRGatherer {
           async: false,
           defer: false,
           source: 'network',
-          requestId: record.requestId,
-          content,
           node: null,
         });
       }
     }
+
     return scripts;
   }
 
@@ -141,9 +94,8 @@ class ScriptElements extends FRGatherer {
    */
   async getArtifact(context) {
     const devtoolsLog = context.dependencies.DevtoolsLog;
-    const formFactor = context.baseArtifacts.HostFormFactor;
     const networkRecords = await NetworkRecords.request(devtoolsLog, context);
-    return this._getArtifact(context, networkRecords, formFactor);
+    return this._getArtifact(context, networkRecords);
   }
 
   /**
@@ -152,8 +104,7 @@ class ScriptElements extends FRGatherer {
    */
   async afterPass(passContext, loadData) {
     const networkRecords = loadData.networkRecords;
-    const formFactor = passContext.baseArtifacts.HostFormFactor;
-    return this._getArtifact({...passContext, dependencies: {}}, networkRecords, formFactor);
+    return this._getArtifact({...passContext, dependencies: {}}, networkRecords);
   }
 }
 

package/lighthouse-core/gather/gatherers/scripts.js

@@ -0,0 +1,136 @@
+/**
+ * @license Copyright 2022 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.
+ */
+'use strict';
+
+const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
+
+/**
+ * @template T, U
+ * @param {Array<T>} values
+ * @param {(value: T) => Promise<U>} promiseMapper
+ * @param {boolean} runInSeries
+ * @return {Promise<Array<U>>}
+ */
+async function runInSeriesOrParallel(values, promiseMapper, runInSeries) {
+  if (runInSeries) {
+    const results = [];
+    for (const value of values) {
+      const result = await promiseMapper(value);
+      results.push(result);
+    }
+    return results;
+  } else {
+    const promises = values.map(promiseMapper);
+    return await Promise.all(promises);
+  }
+}
+
+/**
+ * @fileoverview Gets JavaScript file contents.
+ */
+class Scripts extends FRGatherer {
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['timespan', 'navigation'],
+  };
+
+  /** @type {LH.Crdp.Debugger.ScriptParsedEvent[]} */
+  _scriptParsedEvents = [];
+
+  /** @type {Array<string | undefined>} */
+  _scriptContents = [];
+
+  /** @type {string|null|undefined} */
+  _mainSessionId = null;
+
+  constructor() {
+    super();
+    this.onProtocolMessage = this.onProtocolMessage.bind(this);
+  }
+
+  /**
+   * @param {LH.Protocol.RawEventMessage} event
+   */
+  onProtocolMessage(event) {
+    // Go read the comments in network-recorder.js _findRealRequestAndSetSession.
+    let sessionId = event.sessionId;
+    if (this._mainSessionId === null) {
+      this._mainSessionId = sessionId;
+    }
+    if (this._mainSessionId === sessionId) {
+      sessionId = undefined;
+    }
+
+    // We want to ignore scripts from OOPIFs. In reality, this does more than block just OOPIFs,
+    // it also blocks scripts from the same origin but that happen to run in a different process,
+    // like a worker.
+    if (event.method === 'Debugger.scriptParsed' && !sessionId) {
+      // Events without an embedderName (read: a url) are for JS that we ran over the protocol.
+      if (event.params.embedderName) this._scriptParsedEvents.push(event.params);
+    }
+  }
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   */
+  async startInstrumentation(context) {
+    const session = context.driver.defaultSession;
+    session.addProtocolMessageListener(this.onProtocolMessage);
+    await session.sendCommand('Debugger.enable');
+  }
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   */
+  async stopInstrumentation(context) {
+    const session = context.driver.defaultSession;
+    const formFactor = context.baseArtifacts.HostFormFactor;
+
+    session.removeProtocolMessageListener(this.onProtocolMessage);
+
+    // 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(
+      this._scriptParsedEvents,
+      ({scriptId}) => {
+        return session.sendCommand('Debugger.getScriptSource', {scriptId})
+          .then((resp) => resp.scriptSource)
+          .catch(() => undefined);
+      },
+      formFactor === 'mobile' /* runInSeries */
+    );
+    await session.sendCommand('Debugger.disable');
+  }
+
+  async getArtifact() {
+    /** @type {LH.Artifacts['Scripts']} */
+    const scripts = this._scriptParsedEvents.map((event, i) => {
+      // 'embedderName' and 'url' are confusingly named, so we rewrite them here.
+      // On the protocol, 'embedderName' always refers to the URL of the script (or HTML if inline).
+      // Same for 'url' ... except, magic "sourceURL=" comments will override the value.
+      // It's nice to display the user-provided value in Lighthouse, so we add a field 'name'
+      // to make it clear this is for presentational purposes.
+      // See https://chromium-review.googlesource.com/c/v8/v8/+/2317310
+      return {
+        name: event.url,
+        ...event,
+        // embedderName is optional on the protocol because backends like Node may not set it.
+        // For our purposes, it is always set. But just in case it isn't... fallback to the url.
+        url: event.embedderName || event.url,
+        content: this._scriptContents[i],
+      };
+    });
+
+    return scripts;
+  }
+}
+
+module.exports = Scripts;

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

@@ -88,6 +88,7 @@ class SourceMaps extends FRGatherer {
 
     if (!rawSourceMapUrl) {
       return {
+        scriptId: event.scriptId,
         scriptUrl,
         errorMessage: `Could not resolve map url: ${event.sourceMapURL}`,
       };
@@ -104,12 +105,14 @@ class SourceMaps extends FRGatherer {
         map.sections = map.sections.filter(section => section.map);
       }
       return {
+        scriptId: event.scriptId,
         scriptUrl,
         sourceMapUrl,
         map,
       };
     } catch (err) {
       return {
+        scriptId: event.scriptId,
         scriptUrl,
         sourceMapUrl,
         errorMessage: err.toString(),

package/lighthouse-core/lib/script-helpers.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright 2022 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.
+ */
+'use strict';
+
+/**
+ * @param {LH.Artifacts.NetworkRequest[]} networkRecords
+ * @param {LH.Artifacts.Script|undefined} script
+ * @return {LH.Artifacts.NetworkRequest|undefined}
+ */
+function getRequestForScript(networkRecords, script) {
+  if (!script) return;
+  let networkRequest = networkRecords.find(request => request.url === script.url);
+  while (networkRequest?.redirectDestination) {
+    networkRequest = networkRequest.redirectDestination;
+  }
+  return networkRequest;
+}
+
+module.exports = {getRequestForScript};

package/lighthouse-core/lib/url-shim.js

@@ -236,9 +236,9 @@ class URLShim extends URL {
     }
 
     if (url.protocol === 'data:') {
-      const match = url.pathname.match(/image\/(png|jpeg|svg\+xml|webp|gif|avif)(?=;)/);
+      const match = url.pathname.match(/^(image\/(png|jpeg|svg\+xml|webp|gif|avif))[;,]/);
       if (!match) return undefined;
-      return match[0];
+      return match[1];
     }
 
     const match = url.pathname.toLowerCase().match(/\.(png|jpeg|jpg|svg|webp|gif|avif)$/);