report: use source maps to show original file name

lighthouse-core/audits/byte-efficiency/legacy-javascript.js

@@ -396,6 +396,23 @@ class LegacyJavascript extends ByteEfficiencyAudit {
     return transferRatio;
   }
 
+  /**
+   * @param {LH.Artifacts.Bundle} bundle
+   * @param {number} generatedLine
+   * @param {number} generatedColumn
+   * @return {LH.Audit.Details.SourceLocationValue['original']}
+   */
+  static _findOriginalLocation(bundle, generatedLine, generatedColumn) {
+    const entry = bundle && bundle.map.findEntry(generatedLine, generatedColumn);
+    if (!entry) return;
+
+    return {
+      file: entry.sourceURL,
+      line: entry.sourceLineNumber || 0,
+      column: entry.sourceColumnNumber || 0,
+    };
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
@@ -434,8 +451,11 @@ class LegacyJavascript extends ByteEfficiencyAudit {
         // Not needed, but keeps typescript happy.
         totalBytes: 0,
       };
+
+      const bundle = bundles.find(bundle => bundle.script.src === url);
       for (const match of matches) {
         const {name, line, column} = match;
+
         /** @type {SubItem} */
         const subItem = {
           signal: name,
@@ -444,6 +464,7 @@ class LegacyJavascript extends ByteEfficiencyAudit {
             url,
             line,
             column,
+            original: bundle && this._findOriginalLocation(bundle, line, column),
             urlProvider: 'network',
           },
         };

lighthouse-core/report/html/renderer/details-renderer.js

@@ -137,7 +137,7 @@ class DetailsRenderer {
 
   /**
    * @param {{text: string, url: string}} details
-   * @return {Element}
+   * @return {HTMLElement}
    */
   _renderLink(details) {
     const allowedProtocols = ['https:', 'http:'];
@@ -539,24 +539,57 @@ class DetailsRenderer {
       return null;
     }
 
+    /** @param {HTMLElement} el */
+    function addDevToolsData(el) {
+      el.classList.add('lh-source-location');
+      el.setAttribute('data-source-url', item.url);
+      // DevTools expects zero-indexed lines.
+      el.setAttribute('data-source-line', String(item.line));
+      el.setAttribute('data-source-column', String(item.column));
+      return el;
+    }
+
     // Lines are shown as one-indexed.
-    const line = item.line + 1;
-    const column = item.column;
+    const line = (item.original ? item.original.line : item.line) + 1;
+    const column = item.original ? item.original.column : item.column;
 
-    let element;
+    const file = item.original && item.original.file || '<unmapped>';
+    const originalLocation = item.original && `${file}:${line}:${column}`;
+    const generatedLocation = `${item.url}:${line}:${column}`;
+
+    // First two cases: url is from network.
     if (item.urlProvider === 'network') {
-      element = this.renderTextURL(item.url);
-      this._dom.find('a', element).textContent += `:${line}:${column}`;
+      let element;
+      if (originalLocation) {
+        element = this._renderLink({
+          url: item.url,
+          text: originalLocation,
+        });
+        element.title =
+          `Location ${generatedLocation} maps to original location ${originalLocation}`;
+      } else {
+        element = this.renderTextURL(item.url);
+        this._dom.find('a', element).textContent += `:${line}:${column}`;
+      }
+
+      return addDevToolsData(element);
+    }
+
+    // Two cases remain:
+    // 1) urlProvider === 'comment' && item.original
+    //    -> Show the source filename in text, source mapped URL in tooltip.
+    // 2) urlProvider === 'comment' && !item.original
+    //    -> Show the source mapped URL.
+
+    let element;
+    if (originalLocation) {
+      element = this._renderText(`${originalLocation} (from source map)`);
+      element.title = `${generatedLocation} (from sourceURL)`;
     } else {
-      element = this._renderText(`${item.url}:${line}:${column} (from sourceURL)`);
+      element = this._renderText(`${generatedLocation} (from sourceURL)`);
     }
 
-    element.classList.add('lh-source-location');
-    element.setAttribute('data-source-url', item.url);
-    // DevTools expects zero-indexed lines.
-    element.setAttribute('data-source-line', String(item.line));
-    element.setAttribute('data-source-column', String(item.column));
-    return element;
+    return addDevToolsData(element);
   }
 
   /**

lighthouse-core/test/audits/byte-efficiency/legacy-javascript-test.js

@@ -102,6 +102,7 @@ describe('LegacyJavaScript audit', () => {
               "location": Object {
                 "column": 0,
                 "line": 0,
+                "original": undefined,
                 "type": "source-location",
                 "url": "https://www.googletagmanager.com/a.js",
                 "urlProvider": "network",

types/audit-details.d.ts

@@ -224,6 +224,13 @@ declare global {
         urlProvider: 'network' | 'comment';
         line: number;
         column: number;
+        /** The original file location from the source map. */
+        original?: {
+          /** The associate file from the map's `sources` array. If missing, could not associate mapping with a specific file ("unmapped" in other tools). */
+          file?: string;
+          line: number;
+          column: number;
+        };
       }
 
       /**