lighthouse 9.5.0-dev.20220313 → 9.5.0-dev.20220316

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/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)$/);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220313",
+  "version": "9.5.0-dev.20220316",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/types/artifacts.d.ts

@@ -147,8 +147,9 @@ export interface GathererArtifacts extends PublicGathererArtifacts,LegacyBaseArt
   GlobalListeners: Array<Artifacts.GlobalListener>;
   /** The issues surfaced in the devtools Issues panel */
   InspectorIssues: Artifacts.InspectorIssues;
-  /** JS coverage information for code used during page load. Keyed by network URL. */
-  JsUsage: Record<string, Array<Omit<LH.Crdp.Profiler.ScriptCoverage, 'url'>>>;
+  /** JS coverage information for code used during audit. Keyed by script id. */
+  // 'url' is excluded because it can be overriden by a magic sourceURL= comment, which makes keeping it a dangerous footgun!
+  JsUsage: Record<string, Omit<LH.Crdp.Profiler.ScriptCoverage, 'url'>>;
   /** Parsed version of the page's Web App Manifest, or null if none found. */
   Manifest: Artifacts.Manifest | null;
   /** The URL loaded with interception */
@@ -161,6 +162,8 @@ export interface GathererArtifacts extends PublicGathererArtifacts,LegacyBaseArt
   ResponseCompression: {requestId: string, url: string, mimeType: string, transferSize: number, resourceSize: number, gzipSize?: number}[];
   /** Information on fetching and the content of the /robots.txt file. */
   RobotsTxt: {status: number|null, content: string|null, errorMessage?: string};
+  /** Information on all scripts in the page. */
+  Scripts: Artifacts.Script[];
   /** Version information for all ServiceWorkers active after the first page load. */
   ServiceWorker: {versions: LH.Crdp.ServiceWorker.ServiceWorkerVersion[], registrations: LH.Crdp.ServiceWorker.ServiceWorkerRegistration[]};
   /** Source maps of scripts executed in the page. */
@@ -287,6 +290,16 @@ declare module Artifacts {
 
   interface PasswordInputsWithPreventedPaste {node: NodeDetails}
 
+  interface Script extends Omit<LH.Crdp.Debugger.ScriptParsedEvent, 'url'|'embedderName'> {
+    /**
+     * Set by a sourceURL= magic comment if present, otherwise this is the same as the URL.
+     * Use this field for presentational purposes only.
+     */
+    name: string;
+    url: string;
+    content?: string;
+  }
+  
   interface ScriptElement {
     type: string | null
     src: string | null
@@ -298,10 +311,6 @@ declare module Artifacts {
     node: NodeDetails | null
     /** Where the script was discovered, either in the head, the body, or network records. */
     source: 'head'|'body'|'network'
-    /** The content of the inline script or the network record with the matching URL, null if the script had a src and no network record could be found. */
-    content: string | null
-    /** The ID of the network request that matched the URL of the src or the main document if inline, null if no request could be found. */
-    requestId: string | null
   }
 
   /** @see https://sourcemaps.info/spec.html#h.qz3o9nc69um5 */
@@ -333,6 +342,8 @@ declare module Artifacts {
    * parsing the map, errorMessage will be defined instead of map.
    */
   type SourceMap = {
+    /** The DevTools protocol script identifier. */
+    scriptId: string;
     /** URL of code that source map applies to. */
     scriptUrl: string
     /** URL of the source map. undefined if from data URL. */
@@ -340,6 +351,8 @@ declare module Artifacts {
     /** Source map data structure. */
     map: RawSourceMap
   } | {
+    /** The DevTools protocol script identifier. */
+    scriptId: string;
     /** URL of code that source map applies to. */
     scriptUrl: string
     /** URL of the source map. undefined if from data URL. */
@@ -352,7 +365,7 @@ declare module Artifacts {
 
   interface Bundle {
     rawMap: RawSourceMap;
-    script: ScriptElement;
+    script: LH.Artifacts.Script;
     map: TextSourceMap;
     sizes: {
       // TODO(cjamcl): Rename to `sources`.
@@ -848,6 +861,8 @@ declare module Artifacts {
     stackTrace?: LH.Crdp.Runtime.StackTrace;
     /** The URL of the log/exception, if known. */
     url?: string;
+    /** The script id of the log/exception, if known. */
+    scriptId?: string;
     /** Line number in the script (0-indexed), if known. */
     lineNumber?: number;
     /** Column number in the script (0-indexed), if known. */