Update get_console_message with Issues details

Author: Natallia Harshunova

src/McpContext.ts

@@ -194,8 +194,13 @@ export class McpContext implements Context {
       this.logger('no cdpBackendNodeId');
       return;
     }
+    if (this.#textSnapshot === null)
+      throw new Error(
+        "The snapshot is not defined, can't resolve backendNodeId: " +
+          cdpBackendNodeId,
+      );
     // TODO: index by backendNodeId instead.
-    const queue = [this.#textSnapshot?.root];
+    const queue = [this.#textSnapshot.root];
     while (queue.length) {
       const current = queue.pop()!;
       if (current.backendNodeId === cdpBackendNodeId) {

src/McpResponse.ts

@@ -6,7 +6,7 @@
 import {
   AggregatedIssue,
   Marked,
-  findTitleFromMarkdownAst,
+  MarkdownIssueDescription,
 } from '../node_modules/chrome-devtools-frontend/mcp/mcp.js';
 
 import type {ConsoleMessageData} from './formatters/consoleFormatter.js';
@@ -255,6 +255,12 @@ export class McpResponse implements Response {
             }),
           ),
         };
+      } else if (message instanceof AggregatedIssue) {
+        const result = mapIssuesMessage(message);
+        consoleData = {
+          consoleMessageStableId,
+          ...result,
+        };
       } else {
         consoleData = {
           consoleMessageStableId,
@@ -308,28 +314,10 @@ export class McpResponse implements Response {
               };
             }
             if (item instanceof AggregatedIssue) {
-              const count = item.getAggregatedIssuesCount();
-              const filename = item.getDescription()?.file;
-              const rawMarkdown = filename
-                ? getIssueDescription(filename)
-                : null;
-              if (!rawMarkdown) {
-                logger(`no markdown ${filename} found for issue:` + item.code);
-                return null;
-              }
-              const markdownAst = Marked.Marked.lexer(rawMarkdown);
-              const title = findTitleFromMarkdownAst(markdownAst);
-              if (!title) {
-                logger('cannot read issue title from ' + filename);
-                return null;
-              }
+              const message = mapIssuesMessage(item);
               return {
                 consoleMessageStableId,
-                type: 'issue',
-                item,
-                message: title,
-                count,
-                args: [],
+                ...message,
               };
             }
             return {
@@ -584,3 +572,37 @@ Call ${handleDialog.name} to handle it before continuing.`);
     this.#textResponseLines = [];
   }
 }
+
+function mapIssuesMessage(
+  message: AggregatedIssue,
+): Omit<ConsoleMessageData, 'consoleMessageStableId'> | null {
+  const count = message.getAggregatedIssuesCount();
+  const markdownDescription = message.getDescription();
+  const filename = markdownDescription?.file;
+  if (!markdownDescription) {
+    logger(`no description found for issue:` + message.code);
+    return null;
+  }
+  const rawMarkdown = filename ? getIssueDescription(filename) : null;
+  if (!rawMarkdown) {
+    logger(`no markdown ${filename} found for issue:` + message.code);
+    return null;
+  }
+  const processedMarkdown = MarkdownIssueDescription.substitutePlaceholders(
+    rawMarkdown,
+    markdownDescription.substitutions,
+  );
+  const markdownAst = Marked.Marked.lexer(processedMarkdown);
+  const title = MarkdownIssueDescription.findTitleFromMarkdownAst(markdownAst);
+  if (!title) {
+    logger('cannot read issue title from ' + filename);
+    return null;
+  }
+  return {
+    type: 'issue',
+    item: message,
+    message: title,
+    count,
+    args: [],
+  };
+}

src/formatters/consoleFormatter.ts

@@ -4,6 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {
+  AggregatedIssue,
+  MarkdownIssueDescription,
+} from '../../node_modules/chrome-devtools-frontend/mcp/mcp.js';
+import {ISSUE_UTILS} from '../issue-descriptions.js';
+
 export interface ConsoleMessageData {
   consoleMessageStableId: number;
   type?: string;
@@ -34,12 +40,19 @@ function getArgs(msg: ConsoleMessageData) {
 
 // The verbose format for a console message, including all details.
 export function formatConsoleEventVerbose(msg: ConsoleMessageData): string {
+  if (msg.item instanceof AggregatedIssue) {
+    const result = [
+      `ID: ${msg.consoleMessageStableId}`,
+      `Message: ${msg.type}> ${formatIssue(msg.item)}`,
+    ];
+    return result.join('\n');
+  }
+
   const result = [
     `ID: ${msg.consoleMessageStableId}`,
     `Message: ${msg.type}> ${msg.message}`,
     formatArgs(msg),
   ].filter(line => !!line);
-
   return result.join('\n');
 }
 
@@ -62,3 +75,36 @@ function formatArgs(consoleData: ConsoleMessageData): string {
 
   return result.join('\n');
 }
+
+export function formatIssue(issue: AggregatedIssue): string {
+  const markdownDescription = issue.getDescription();
+  const filename = markdownDescription?.file;
+  const rawMarkdown = filename
+    ? ISSUE_UTILS.getIssueDescription(filename)
+    : null;
+  if (!markdownDescription || !rawMarkdown) {
+    throw new Error('Error parsing issue description ' + issue.code());
+  }
+  let processedMarkdown = MarkdownIssueDescription.substitutePlaceholders(
+    rawMarkdown,
+    markdownDescription.substitutions,
+  );
+
+  processedMarkdown = processedMarkdown.trim();
+  // Remove heading in order not to conflict with the result response markdown
+  if (processedMarkdown.startsWith('# ')) {
+    processedMarkdown = processedMarkdown.substring(2).trimStart();
+  }
+
+  const result: string[] = [processedMarkdown];
+  const links = markdownDescription.links;
+
+  if (links.length > 0) {
+    result.push('Learn more:');
+    for (const link of links) {
+      result.push(`[${link.linkTitle}](${link.link})`);
+    }
+  }
+
+  return result.join('\n');
+}

src/issue-descriptions.ts

@@ -47,3 +47,8 @@ export async function loadIssueDescriptions(): Promise<void> {
 export function getIssueDescription(fileName: string): string | null {
   return issueDescriptions[fileName] ?? null;
 }
+
+export const ISSUE_UTILS = {
+  loadIssueDescriptions,
+  getIssueDescription,
+};

tests/formatters/consoleFormatter.test.js.snapshot

@@ -34,3 +34,12 @@ Message: log> Processing file:
 ### Arguments
 Arg #0: file.txt
 `;
+
+exports[`consoleFormatter > formats a console.log message with issue type 1`] = `
+Mock Issue Title
+
+This is a mock issue description with a http://example.com/issue-detail.
+Learn more:
+[Learn more](http://example.com/learnmore)
+[Learn more 2](http://example.com/another-learnmore)
+`;

tests/formatters/consoleFormatter.test.ts

@@ -6,11 +6,16 @@
 
 import {describe, it} from 'node:test';
 
+import sinon from 'sinon';
+
+import type {AggregatedIssue} from '../../node_modules/chrome-devtools-frontend/mcp/mcp.js';
 import type {ConsoleMessageData} from '../../src/formatters/consoleFormatter.js';
 import {
   formatConsoleEventShort,
   formatConsoleEventVerbose,
+  formatIssue,
 } from '../../src/formatters/consoleFormatter.js';
+import {ISSUE_UTILS} from '../../src/issue-descriptions.js';
 
 describe('consoleFormatter', () => {
   describe('formatConsoleEventShort', () => {
@@ -92,4 +97,34 @@ describe('consoleFormatter', () => {
       t.assert.snapshot?.(result);
     });
   });
+
+  it('formats a console.log message with issue type', t => {
+    class MockAggregatedIssue {
+      getDescription() {
+        return {
+          file: 'mock-issue.md',
+          substitutions: new Map([
+            ['PLACEHOLDER_URL', 'http://example.com/issue-detail'],
+          ]),
+          links: [
+            {link: 'http://example.com/learnmore', linkTitle: 'Learn more'},
+            {link: 'http://example.com/another-learnmore', linkTitle: 'Learn more 2'},
+          ],
+        };
+      }
+    }
+    const mockAggregatedIssue = new MockAggregatedIssue();
+    const getIssueDescriptionStub = sinon.stub(
+      ISSUE_UTILS,
+      'getIssueDescription',
+    );
+
+    getIssueDescriptionStub
+      .withArgs('mock-issue.md')
+      .returns(
+        '# Mock Issue Title\n\nThis is a mock issue description with a {PLACEHOLDER_URL}.',
+      );
+    const result = formatIssue(mockAggregatedIssue as AggregatedIssue);
+    t.assert.snapshot?.(result);
+  });
 });

tests/tools/console.test.ts

@@ -128,6 +128,12 @@ describe('console', () => {
   });
 
   describe('get_console_message', () => {
+    beforeEach(() => {
+      setIssuesEnabled(true);
+    });
+    afterEach(() => {
+      setIssuesEnabled(false);
+    });
     it('gets a specific console message', async () => {
       await withBrowser(async (response, context) => {
         const page = await context.newPage();
@@ -149,5 +155,31 @@ describe('console', () => {
         );
       });
     });
+
+    it('lists issues', async () => {
+      await withBrowser(async (response, context) => {
+        const page = await context.newPage();
+        const issuePromise = new Promise<void>(resolve => {
+          page.once('issue', () => {
+            resolve();
+          });
+        });
+        await page.setContent('<input type="text" name="username" />');
+        await issuePromise;
+        await listConsoleMessages.handler({params: {}}, response, context);
+        await getConsoleMessage.handler(
+          {params: {msgid: 1}},
+          response,
+          context,
+        );
+        const formattedResponse = await response.handle('test', context);
+        const textContent = formattedResponse[0] as {text: string};
+        assert.ok(
+          textContent.text.includes(
+            "Message: issue> An element doesn't have an autocomplete attribute",
+          ),
+        );
+      });
+    });
   });
 });