feat: include stack trace in 'get_console_message' tool

This is the stack trace of the console message itself. If the
argument is an Error object or an "Error.stack" like string we
don't do anything special (yet).

The stack trace is source mapped if source maps are available.

For now, this only works for console messages of the main page
target as puppeteer doesn't tell us yet from which target a
console message is coming from.

Author: szuend

src/McpContext.ts

@@ -8,7 +8,7 @@ import fs from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
 
-import {extractUrlLikeFromDevToolsTitle, urlsEqual} from './DevtoolsUtils.js';
+import {extractUrlLikeFromDevToolsTitle, TargetUniverse, UniverseManager, urlsEqual} from './DevtoolsUtils.js';
 import type {ListenerMap} from './PageCollector.js';
 import {NetworkCollector, ConsoleCollector} from './PageCollector.js';
 import {Locator} from './third_party/index.js';
@@ -104,6 +104,7 @@ export class McpContext implements Context {
   #textSnapshot: TextSnapshot | null = null;
   #networkCollector: NetworkCollector;
   #consoleCollector: ConsoleCollector;
+  #devtoolsUniverseManager: UniverseManager;
 
   #isRunningTrace = false;
   #networkConditionsMap = new WeakMap<Page, string>();
@@ -149,17 +150,20 @@ export class McpContext implements Context {
         },
       } as ListenerMap;
     });
+    this.#devtoolsUniverseManager = new UniverseManager(this.browser);
   }
 
   async #init() {
     const pages = await this.createPagesSnapshot();
     await this.#networkCollector.init(pages);
     await this.#consoleCollector.init(pages);
+    await this.#devtoolsUniverseManager.init(pages);
   }
 
   dispose() {
     this.#networkCollector.dispose();
     this.#consoleCollector.dispose();
+    this.#devtoolsUniverseManager.dispose();
   }
 
   static async from(
@@ -226,6 +230,10 @@ export class McpContext implements Context {
     return this.#consoleCollector.getData(page, includePreservedMessages);
   }
 
+  getDevToolsUniverse(): TargetUniverse | null {
+    return this.#devtoolsUniverseManager.get(this.getSelectedPage());
+  }
+
   getConsoleMessageStableId(
     message: ConsoleMessage | Error | DevTools.AggregatedIssue,
   ): number {

src/McpResponse.ts

@@ -235,6 +235,19 @@ export class McpResponse implements Response {
       const consoleMessageStableId = this.#attachedConsoleMessageId;
       if ('args' in message) {
         const consoleMessage = message as ConsoleMessage;
+
+        let stackTrace = undefined;
+        if ((consoleMessage as any)._rawStackTrace()) {
+          const devTools = context.getDevToolsUniverse();
+          if (devTools) {
+            // TODO: We use the default page target at the moment but really puppeteer should attach the target ID to the
+            //       console message and we resolve that via the universes' TargetManager.
+            const {universe, target} = devTools;
+            const binding = universe.context.get(DevTools.DebuggerWorkspaceBinding);
+            stackTrace = await binding.createStackTraceFromProtocolRuntime((consoleMessage as any)._rawStackTrace(), target);
+          }
+        }
+
         consoleData = {
           consoleMessageStableId,
           type: consoleMessage.type(),
@@ -249,6 +262,7 @@ export class McpResponse implements Response {
                 : String(stringArg);
             }),
           ),
+          stackTrace,
         };
       } else if (message instanceof DevTools.AggregatedIssue) {
         const mappedIssueMessage = mapIssueToMessageObject(message);
@@ -296,6 +310,18 @@ export class McpResponse implements Response {
               context.getConsoleMessageStableId(item);
             if ('args' in item) {
               const consoleMessage = item as ConsoleMessage;
+
+              let stackTrace = undefined;
+              if ((consoleMessage as any)._rawStackTrace()) {
+                  const devTools = context.getDevToolsUniverse();
+                  if (devTools) {
+                    // TODO: We use the default page target at the moment but really puppeteer should attach the target ID to the
+                    //       console message and we resolve that via the universes' TargetManager.
+                    const {universe, target} = devTools;
+                    const binding = universe.context.get(DevTools.DebuggerWorkspaceBinding);
+                    stackTrace = await binding.createStackTraceFromProtocolRuntime((consoleMessage as any)._rawStackTrace(), target);
+                  }
+              }
               return {
                 consoleMessageStableId,
                 type: consoleMessage.type(),
@@ -310,6 +336,7 @@ export class McpResponse implements Response {
                       : String(stringArg);
                   }),
                 ),
+                stackTrace,
               };
             }
             if (item instanceof DevTools.AggregatedIssue) {

src/third_party/devtools.ts

@@ -29,4 +29,5 @@ export {
   IssuesManagerEvents,
   createIssuesFromProtocolIssue,
   IssueAggregator,
+  DebuggerWorkspaceBinding,
 } from '../../node_modules/chrome-devtools-frontend/mcp/mcp.js';

tests/tools/console.test.js.snapshot

@@ -1,3 +1,16 @@
+exports[`console > get_console_message > applies source maps to stack traces of console messages 1`] = `
+# test response
+ID: 1
+Message: warn> hello world
+### Arguments
+Arg #0: hello world
+### Stack trace
+at bar (main.js:2:10)
+at foo (main.js:6:2)
+at Iife (main.js:10:2)
+at <anonymous> (main.js:9:0)
+`;
+
 exports[`console > get_console_message > issues type > gets issue details with node id parsing 1`] = `
 # test response
 ID: 1

tests/tools/console.test.ts

@@ -15,7 +15,7 @@ import {
   listConsoleMessages,
 } from '../../src/tools/console.js';
 import {serverHooks} from '../server.js';
-import {getTextContent, withMcpContext} from '../utils.js';
+import {getTextContent, withBrowser, withMcpContext} from '../utils.js';
 
 describe('console', () => {
   before(async () => {
@@ -120,6 +120,8 @@ describe('console', () => {
   });
 
   describe('get_console_message', () => {
+    const server = serverHooks();
+
     it('gets a specific console message', async () => {
       await withMcpContext(async (response, context) => {
         const page = await context.newPage();
@@ -143,8 +145,6 @@ describe('console', () => {
     });
 
     describe('issues type', () => {
-      const server = serverHooks();
-
       it('gets issue details with node id parsing', async t => {
         await withMcpContext(async (response, context) => {
           const page = await context.newPage();
@@ -228,5 +228,31 @@ describe('console', () => {
         });
       });
     });
+
+    it('applies source maps to stack traces of console messages', async t => {
+      server.addRoute('/main.min.js', (_req, res) => {
+        res.setHeader('Content-Type', 'text/javascript');
+        res.statusCode = 200;
+        res.end(`function n(){console.warn("hello world")}function o(){n()}(function n(){o()})();
+          //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJiYXIiLCJjb25zb2xlIiwid2FybiIsImZvbyIsIklpZmUiXSwic291cmNlcyI6WyIuL21haW4uanMiXSwic291cmNlc0NvbnRlbnQiOlsiXG5mdW5jdGlvbiBiYXIoKSB7XG4gIGNvbnNvbGUud2FybignaGVsbG8gd29ybGQnKTtcbn1cblxuZnVuY3Rpb24gZm9vKCkge1xuICBiYXIoKTtcbn1cblxuKGZ1bmN0aW9uIElpZmUoKSB7XG4gIGZvbygpO1xufSkoKTtcblxuIl0sIm1hcHBpbmdzIjoiQUFDQSxTQUFTQSxJQUNQQyxRQUFRQyxLQUFLLGNBQ2YsQ0FFQSxTQUFTQyxJQUNQSCxHQUNGLEVBRUEsU0FBVUksSUFDUkQsR0FDRCxFQUZEIiwiaWdub3JlTGlzdCI6W119
+          `);
+        });
+      server.addHtmlRoute('/index.html', `<script src="${server.getRoute('/main.min.js')}"></script>`);
+
+      await withMcpContext(async (response, context) => {
+        const page = await context.newPage();
+        await page.goto(server.getRoute('/index.html'));
+
+        await getConsoleMessage.handler(
+          {params: {msgid: 1}},
+          response,
+          context,
+        );
+        const formattedResponse = await response.handle('test', context);
+        const rawText = getTextContent(formattedResponse[0]);
+
+        t.assert.snapshot?.(rawText);
+      });
+    });
   });
 });

tsconfig.json

@@ -33,6 +33,7 @@
     "node_modules/chrome-devtools-frontend/front_end/core/protocol_client",
     "node_modules/chrome-devtools-frontend/front_end/core/root",
     "node_modules/chrome-devtools-frontend/front_end/core/sdk",
+    "node_modules/chrome-devtools-frontend/front_end/entrypoints/formatter_worker",
     "node_modules/chrome-devtools-frontend/front_end/foundation/foundation.ts",
     "node_modules/chrome-devtools-frontend/front_end/foundation/Universe.ts",
     "node_modules/chrome-devtools-frontend/front_end/generated",
@@ -60,6 +61,9 @@
     "node_modules/chrome-devtools-frontend/front_end/models/trace",
     "node_modules/chrome-devtools-frontend/front_end/models/workspace",
     "node_modules/chrome-devtools-frontend/front_end/panels/issues/IssueAggregator.ts",
+    "node_modules/chrome-devtools-frontend/front_end/third_party/acorn",
+    "node_modules/chrome-devtools-frontend/front_end/third_party/acorn/package/dist/acorn.mjs",
+    "node_modules/chrome-devtools-frontend/front_end/third_party/codemirror",
     "node_modules/chrome-devtools-frontend/front_end/third_party/i18n",
     "node_modules/chrome-devtools-frontend/front_end/third_party/intl-messageformat",
     "node_modules/chrome-devtools-frontend/front_end/third_party/legacy-javascript",