feat: export console issues

scripts/post-build.ts

@@ -63,7 +63,7 @@ export const i18n = {
     return str;
   },
   lockedLazyString: () => {},
-  getLazilyComputedLocalizedString: () => {},
+  getLazilyComputedLocalizedString: () => ()=>{},
 };
 
 // TODO(jacktfranklin): once the DocumentLatency insight does not depend on
@@ -169,6 +169,19 @@ export const hostConfig = {};
   fs.copyFileSync(devtoolsLicenseFileSource, devtoolsLicenseFileDestination);
 
   copyThirdPartyLicenseFiles();
+  copyDevToolsDescriptionFiles();
+}
+
+function copyDevToolsDescriptionFiles() {
+  const sourceDir = path.join(
+   process.cwd(),
+   'node_modules/chrome-devtools-frontend/front_end/models/issues_manager/descriptions',
+    );
+   const destDir = path.join(
+    BUILD_DIR,
+    'node_modules/chrome-devtools-frontend/front_end/models/issues_manager/descriptions',
+    );
+    fs.cpSync(sourceDir, destDir, {recursive: true});
 }
 
 main();

src/DevtoolsUtils.ts

@@ -3,6 +3,13 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+
+import {
+  type Issue,
+  type IssuesManager,
+  Common
+} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+
 export function extractUrlLikeFromDevToolsTitle(
   title: string,
 ): string | undefined {
@@ -49,3 +56,13 @@
 
   return result;
 }
+
+/**
+ * A mock implementation of an issues manager that only implements the methods
+ * that are actually used by the IssuesAggregator
+ */
+export class FakeIssuesManager extends Common.ObjectWrapper.ObjectWrapper<IssuesManager.EventTypes> {
+  issues(): Issue.Issue[] {
+    return [];
+  }
+}

src/McpContext.ts

@@ -7,6 +7,8 @@
 import os from 'node:os';
 import path from 'node:path';
 
+import {type AggregatedIssue} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+
 import {extractUrlLikeFromDevToolsTitle, urlsEqual} from './DevtoolsUtils.js';
 import type {ListenerMap} from './PageCollector.js';
 import {NetworkCollector, PageCollector} from './PageCollector.js';
@@ -29,6 +31,8 @@
 import type {TraceResult} from './trace-processing/parse.js';
 import {WaitForHelper} from './WaitForHelper.js';
 
+
+
 export interface TextSnapshotNode extends SerializedAXNode {
   id: string;
   backendNodeId?: number;
@@ -90,7 +94,7 @@
   // The most recent snapshot.
   #textSnapshot: TextSnapshot | null = null;
   #networkCollector: NetworkCollector;
-  #consoleCollector: PageCollector<ConsoleMessage | Error>;
+  #consoleCollector: PageCollector<ConsoleMessage | Error | AggregatedIssue>;
 
   #isRunningTrace = false;
   #networkConditionsMap = new WeakMap<Page, string>();
@@ -130,6 +134,9 @@
             collect(error);
           }
         },
+        issue: issue => {
+          collect(issue);
+        },
       } as ListenerMap;
     });
   }
@@ -196,25 +203,25 @@
 
   getConsoleData(
     includePreservedMessages?: boolean,
-  ): Array<ConsoleMessage | Error> {
+  ): Array<ConsoleMessage | Error | AggregatedIssue> {
     const page = this.getSelectedPage();
     return this.#consoleCollector.getData(page, includePreservedMessages);
   }
 
-  getConsoleMessageStableId(message: ConsoleMessage | Error): number {
+  getConsoleMessageStableId(message: ConsoleMessage | Error | AggregatedIssue): number {
     return this.#consoleCollector.getIdForResource(message);
   }
 
-  getConsoleMessageById(id: number): ConsoleMessage | Error {
+  getConsoleMessageById(id: number): ConsoleMessage | Error | AggregatedIssue {
     return this.#consoleCollector.getById(this.getSelectedPage(), id);
   }
 
   async newPage(): Promise<Page> {
     const page = await this.browser.newPage();
     const pages = await this.createPagesSnapshot();
     this.setSelectedPageIdx(pages.indexOf(page));
-    this.#networkCollector.addPage(page);
-    this.#consoleCollector.addPage(page);
+    await this.#networkCollector.addPage(page);
+    await this.#consoleCollector.addPage(page);
     return page;
   }
   async closePage(pageIdx: number): Promise<void> {

src/McpResponse.ts

@@ -3,6 +3,10 @@
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import {
+  AggregatedIssue, Marked, MarkdownIssueDescription
+} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+
 import type {ConsoleMessageData} from './formatters/consoleFormatter.js';
 import {
   formatConsoleEventShort,
@@ -16,6 +20,7 @@
   getStatusFromRequest,
 } from './formatters/networkFormatter.js';
 import {formatSnapshotNode} from './formatters/snapshotFormatter.js';
+import {getIssueDescription} from './issue-descriptions.js';
 import type {McpContext} from './McpContext.js';
 import type {
   ConsoleMessage,
@@ -269,6 +274,9 @@
           if ('type' in message) {
             return normalizedTypes.has(message.type());
           }
+          if (message instanceof AggregatedIssue) {
+            return normalizedTypes.has('issue');
+          }
           return normalizedTypes.has('error');
         });
       }
@@ -295,6 +303,29 @@
               ),
             };
           }
+          if (item instanceof AggregatedIssue) {
+            const count = item.getAggregatedIssuesCount();
+            const filename = item.getDescription()?.file;
+            const rawMarkdown = filename
+              ? getIssueDescription(filename)
+              : null;
+            if (!rawMarkdown) {
+            return {
+              consoleMessageStableId,
+              type: 'issue',
+              message: `${item.code()} (count: ${count})`,
+              args: [],
+            };
+            }
+            const markdownAst = Marked.Marked.lexer(rawMarkdown);
+            const title = MarkdownIssueDescription.findTitleFromMarkdownAst(markdownAst);
+            return {
+              consoleMessageStableId,
+              type: 'issue',
+              message: `${title} (count: ${count})`,
+              args: [],
+            };
+          }
           return {
             consoleMessageStableId,
             type: 'error',

src/PageCollector.ts

@@ -4,15 +4,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {
+  type AggregatedIssue,
+  AggregatorEvents,
+  IssuesManager,
+  IssueAggregator,
+} from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+
+import {FakeIssuesManager} from './DevtoolsUtils.js';
 import {
   type Browser,
   type Frame,
   type Handler,
   type HTTPRequest,
   type Page,
-  type PageEvents,
+  type PageEvents as PuppeteerPageEvents,
 } from './third_party/index.js';
 
+interface PageEvents extends PuppeteerPageEvents {
+  issue: AggregatedIssue;
+}
+
 export type ListenerMap<EventMap extends PageEvents = PageEvents> = {
   [K in keyof EventMap]?: (event: EventMap[K]) => void;
 };
@@ -38,13 +50,13 @@
     collector: (item: T) => void,
   ) => ListenerMap<PageEvents>;
   #listeners = new WeakMap<Page, ListenerMap>();
+  #seenIssueKeys = new WeakMap<Page, Set<string>>();
   #maxNavigationSaved = 3;
 
-  /**
-   * This maps a Page to a list of navigations with a sub-list
-   * of all collected resources.
-   * The newer navigations come first.
-   */
+  // Store an aggregator and a mock manager for each page.
+  #issuesAggregators = new WeakMap<Page, IssueAggregator>();
+  #mockIssuesManagers = new WeakMap<Page, FakeIssuesManager>();
+
   protected storage = new WeakMap<Page, Array<Array<WithSymbolId<T>>>>();
 
   constructor(
@@ -58,15 +70,15 @@
   async init() {
     const pages = await this.#browser.pages();
     for (const page of pages) {
-      this.#initializePage(page);
+      await this.addPage(page);
     }
 
     this.#browser.on('targetcreated', async target => {
       const page = await target.page();
       if (!page) {
         return;
       }
-      this.#initializePage(page);
+      await this.addPage(page);
     });
     this.#browser.on('targetdestroyed', async target => {
       const page = await target.page();
@@ -77,26 +89,39 @@
     });
   }
 
-  public addPage(page: Page) {
-    this.#initializePage(page);
-  }
-
-  #initializePage(page: Page) {
+  public async addPage(page: Page) {
     if (this.storage.has(page)) {
       return;
     }
+    await this.#initializePage(page);
+  }
 
+  async #initializePage(page: Page) {
     const idGenerator = createIdGenerator();
     const storedLists: Array<Array<WithSymbolId<T>>> = [[]];
     this.storage.set(page, storedLists);
 
-    const listeners = this.#listenersInitializer(value => {
+    // This is the single function responsible for adding items to storage.
+    const collector = (value: T) => {
       const withId = value as WithSymbolId<T>;
-      withId[stableIdSymbol] = idGenerator();
+      // Assign an ID only if it's a new item.
+      if (!withId[stableIdSymbol]) {
+        withId[stableIdSymbol] = idGenerator();
+      }
 
       const navigations = this.storage.get(page) ?? [[]];
-      navigations[0].push(withId);
-    });
+      const currentNavigation = navigations[0];
+
+      // The aggregator sends the same object instance for updates, so we just
+      // need to ensure it's in the list.
+      if (!currentNavigation.includes(withId)) {
+        currentNavigation.push(withId);
+      }
+    };
+
+    await this.subscribeForIssues(page);
+
+    const listeners = this.#listenersInitializer(collector);
 
     listeners['framenavigated'] = (frame: Frame) => {
       // Only split the storage on main frame navigation
@@ -113,12 +138,54 @@
     this.#listeners.set(page, listeners);
   }
 
+  protected async subscribeForIssues(page: Page) {
+    if (this instanceof NetworkCollector) {
+      return;
+    }
+    if (!this.#seenIssueKeys.has(page)) {
+      this.#seenIssueKeys.set(page, new Set());
+    }
+
+    const mockManager = new FakeIssuesManager();
+    // @ts-expect-error Aggregator receives partial IssuesManager
+    const aggregator = new IssueAggregator(mockManager);
+    this.#mockIssuesManagers.set(page, mockManager);
+    this.#issuesAggregators.set(page, aggregator);
+
+    aggregator.addEventListener(
+      AggregatorEvents.AGGREGATED_ISSUE_UPDATED,
+      event => {
+        page.emit('issue', event.data);
+      },
+    );
+
+    const session = await page.createCDPSession();
+    session.on('Audits.issueAdded', data => {
+      // @ts-expect-error Types of protocol from Puppeteer and CDP are incopatible for Issues but it's the same type
+      const issue = IssuesManager.createIssuesFromProtocolIssue(null,data.issue,)[0];
+      if (!issue) {
+        return;
+      }
+      const seenKeys = this.#seenIssueKeys.get(page)!;
+      const primaryKey = issue.primaryKey();
+      if (seenKeys.has(primaryKey)) return;
+      seenKeys.add(primaryKey);
+
+      // Trigger the aggregator via our mock manager. Do NOT call collector() here.
+      const mockManager = this.#mockIssuesManagers.get(page);
+      if (mockManager) {
+        // @ts-expect-error we don't care about issies model being null
+        mockManager.dispatchEventToListeners(IssuesManager.Events.ISSUE_ADDED, {issue, issuesModel: null});
+      }
+    });
+    await session.send('Audits.enable');
+  }
+
   protected splitAfterNavigation(page: Page) {
     const navigations = this.storage.get(page);
     if (!navigations) {
       return;
     }
-    // Add the latest navigation first
     navigations.unshift([]);
     navigations.splice(this.#maxNavigationSaved);
   }
@@ -131,6 +198,9 @@
       }
     }
     this.storage.delete(page);
+    this.#seenIssueKeys.delete(page);
+    this.#issuesAggregators.delete(page);
+    this.#mockIssuesManagers.delete(page);
   }
 
   getData(page: Page, includePreservedData?: boolean): T[] {
@@ -144,7 +214,6 @@
     }
 
     const data: T[] = [];
-
     for (let index = this.#maxNavigationSaved; index >= 0; index--) {
       if (navigations[index]) {
         data.push(...navigations[index]);
@@ -220,14 +289,11 @@
         : false;
     });
 
-    // Keep all requests since the last navigation request including that
-    // navigation request itself.
-    // Keep the reference
     if (lastRequestIdx !== -1) {
       const fromCurrentNavigation = requests.splice(lastRequestIdx);
       navigations.unshift(fromCurrentNavigation);
     } else {
       navigations.unshift([]);
     }
   }
-}
+}