chrome-devtools-mcp 0.16.0 → 0.17.0

package/README.md

@@ -27,6 +27,12 @@ allowing them to inspect, debug, and modify any data in the browser or DevTools.
 Avoid sharing sensitive or personal information that you don't want to share with
 MCP clients.
 
+Performance tools may send trace URLs to the Google CrUX API to fetch real-user
+experience data. This helps provide a holistic performance picture by
+presenting field data alongside lab data. This data is collected by the [Chrome
+User Experience Report (CrUX)](https://developer.chrome.com/docs/crux). To disable
+this, run with the `--no-performance-crux` flag.
+
 ## **Usage statistics**
 
 Google collects usage statistics (such as tool invocation success rates, latency, and environment information) to improve the reliability and performance of Chrome DevTools MCP.
@@ -466,6 +472,11 @@ The Chrome DevTools MCP server supports the following configuration option:
   - **Type:** boolean
   - **Default:** `true`
 
+- **`--performanceCrux`/ `--performance-crux`**
+  Set to false to disable sending URLs from performance traces to CrUX API to get field performance data.
+  - **Type:** boolean
+  - **Default:** `true`
+
 - **`--usageStatistics`/ `--usage-statistics`**
   Set to false to opt-out of usage statistics collection. Google collects usage data to improve the tool, handled under the Google Privacy Policy (https://policies.google.com/privacy). This is independent from Chrome browser metrics. Disabled if CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS or CI env variables are set.
   - **Type:** boolean

package/build/src/DevtoolsUtils.js

@@ -169,6 +169,119 @@ const SKIP_ALL_PAUSES = {
         // Do nothing.
     },
 };
+/**
+ * Constructed from Runtime.ExceptionDetails of an uncaught error.
+ *
+ * TODO: Also construct from a RemoteObject of subtype 'error'.
+ *
+ * Consists of the message, a fully resolved stack trace and a fully resolved 'cause' chain.
+ */
+export class SymbolizedError {
+    message;
+    stackTrace;
+    cause;
+    constructor(message, stackTrace, cause) {
+        this.message = message;
+        this.stackTrace = stackTrace;
+        this.cause = cause;
+    }
+    static async fromDetails(opts) {
+        const message = SymbolizedError.#getMessage(opts.details);
+        if (!opts.includeStackAndCause || !opts.devTools) {
+            return new SymbolizedError(message, opts.resolvedStackTraceForTesting, opts.resolvedCauseForTesting);
+        }
+        let stackTrace;
+        if (opts.resolvedStackTraceForTesting) {
+            stackTrace = opts.resolvedStackTraceForTesting;
+        }
+        else if (opts.details.stackTrace) {
+            try {
+                stackTrace = await createStackTrace(opts.devTools, opts.details.stackTrace, opts.targetId);
+            }
+            catch {
+                // ignore
+            }
+        }
+        // TODO: Turn opts.details.exception into a JSHandle and retrieve the 'cause' property.
+        //       If its an Error, recursively create a SymbolizedError.
+        let cause;
+        if (opts.resolvedCauseForTesting) {
+            cause = opts.resolvedCauseForTesting;
+        }
+        else if (opts.details.exception) {
+            try {
+                const causeRemoteObj = await SymbolizedError.#lookupCause(opts.devTools, opts.details.exception, opts.targetId);
+                if (causeRemoteObj) {
+                    cause = await SymbolizedError.fromError({
+                        devTools: opts.devTools,
+                        error: causeRemoteObj,
+                        targetId: opts.targetId,
+                    });
+                }
+            }
+            catch {
+                // Ignore
+            }
+        }
+        return new SymbolizedError(message, stackTrace, cause);
+    }
+    static async fromError(opts) {
+        const details = await SymbolizedError.#getExceptionDetails(opts.devTools, opts.error, opts.targetId);
+        if (details) {
+            return SymbolizedError.fromDetails({
+                details,
+                devTools: opts.devTools,
+                targetId: opts.targetId,
+                includeStackAndCause: true,
+            });
+        }
+        return new SymbolizedError(SymbolizedError.#getMessageFromException(opts.error));
+    }
+    static #getMessage(details) {
+        // For Runtime.exceptionThrown with a present exception object, `details.text` will be "Uncaught" and
+        // we have to manually parse out the error text from the exception description.
+        // In the case of Runtime.getExceptionDetails, `details.text` has the Error.message.
+        if (details.text === 'Uncaught' && details.exception) {
+            return ('Uncaught ' +
+                SymbolizedError.#getMessageFromException(details.exception));
+        }
+        return details.text;
+    }
+    static #getMessageFromException(error) {
+        const messageWithRest = error.description?.split('\n    at ', 2) ?? [];
+        return messageWithRest[0] ?? '';
+    }
+    static async #getExceptionDetails(devTools, error, targetId) {
+        if (!devTools || (error.type !== 'object' && error.subtype !== 'error')) {
+            return null;
+        }
+        const targetManager = devTools.universe.context.get(DevTools.TargetManager);
+        const target = targetId
+            ? targetManager.targetById(targetId) || devTools.target
+            : devTools.target;
+        const model = target.model(DevTools.RuntimeModel);
+        return ((await model.getExceptionDetails(error.objectId)) ?? null);
+    }
+    static async #lookupCause(devTools, error, targetId) {
+        if (!devTools || (error.type !== 'object' && error.subtype !== 'error')) {
+            return null;
+        }
+        const targetManager = devTools.universe.context.get(DevTools.TargetManager);
+        const target = targetId
+            ? targetManager.targetById(targetId) || devTools.target
+            : devTools.target;
+        const properties = await target.runtimeAgent().invoke_getProperties({
+            objectId: error.objectId,
+        });
+        if (properties.getError()) {
+            return null;
+        }
+        return properties.result.find(prop => prop.name === 'cause')?.value ?? null;
+    }
+    static createForTesting(message, stackTrace, cause) {
+        return new SymbolizedError(message, stackTrace, cause);
+    }
+}
 export async function createStackTraceForConsoleMessage(devTools, consoleMessage) {
     const message = consoleMessage;
     const rawStackTrace = message._rawStackTrace();

package/build/src/McpContext.js

@@ -262,6 +262,9 @@ export class McpContext {
     isRunningPerformanceTrace() {
         return this.#isRunningTrace;
     }
+    isCruxEnabled() {
+        return this.#options.performanceCrux;
+    }
     getDialog() {
         return this.#dialog;
     }

package/build/src/McpResponse.js

@@ -194,11 +194,6 @@ export class McpResponse {
                 }
                 detailedConsoleMessage = formatter;
             }
-            else {
-                detailedConsoleMessage = await ConsoleFormatter.from(message, {
-                    id: consoleMessageStableId,
-                });
-            }
         }
         let extensions;
         if (this.#listExtensions) {
@@ -239,9 +234,7 @@ export class McpResponse {
                     }
                     return formatter;
                 }
-                return await ConsoleFormatter.from(item, {
-                    id: consoleMessageStableId,
-                });
+                return null;
             }))).filter(item => item !== null);
         }
         let networkRequests;

package/build/src/PageCollector.js

@@ -7,12 +7,10 @@ import { FakeIssuesManager } from './DevtoolsUtils.js';
 import { logger } from './logger.js';
 import { DevTools } from './third_party/index.js';
 export class UncaughtError {
-    message;
-    stackTrace;
+    details;
     targetId;
-    constructor(message, stackTrace, targetId) {
-        this.message = message;
-        this.stackTrace = stackTrace;
+    constructor(details, targetId) {
+        this.details = details;
         this.targetId = targetId;
     }
 }
@@ -238,10 +236,7 @@ class PageEventSubscriber {
         this.#page.emit('issue', event.data);
     };
     #onExceptionThrown = (event) => {
-        const { exception, text, stackTrace } = event.exceptionDetails;
-        const messageWithRest = exception?.description?.split('\n    at ', 2) ?? [];
-        const message = text + ' ' + (messageWithRest[0] ?? '');
-        this.#page.emit('uncaughtError', new UncaughtError(message, stackTrace, this.#targetId));
+        this.#page.emit('uncaughtError', new UncaughtError(event.exceptionDetails, this.#targetId));
     };
     // On navigation, we reset issue aggregation.
     #onFrameNavigated = (frame) => {

package/build/src/cli.js

@@ -188,6 +188,11 @@ export const cliOptions = {
         hidden: true,
         describe: 'Set to false to exclude tools related to extensions.',
     },
+    performanceCrux: {
+        type: 'boolean',
+        default: true,
+        describe: 'Set to false to disable sending URLs from performance traces to CrUX API to get field performance data.',
+    },
     usageStatistics: {
         type: 'boolean',
         default: true,
@@ -277,6 +282,10 @@ export function parseArguments(version, argv = process.argv) {
             '$0 --no-usage-statistics',
             'Do not send usage statistics https://github.com/ChromeDevTools/chrome-devtools-mcp#usage-statistics.',
         ],
+        [
+            '$0 --no-performance-crux',
+            'Disable CrUX (field data) integration in performance tools.',
+        ],
     ]);
     return yargsInstance
         .wrap(Math.min(120, yargsInstance.terminalWidth()))

package/build/src/formatters/ConsoleFormatter.js

@@ -3,35 +3,80 @@
  * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { createStackTraceForConsoleMessage, createStackTrace, } from '../DevtoolsUtils.js';
+var _a;
+import { createStackTraceForConsoleMessage, SymbolizedError, } from '../DevtoolsUtils.js';
+import { UncaughtError } from '../PageCollector.js';
+import * as DevTools from '../third_party/index.js';
 export class ConsoleFormatter {
-    #msg;
-    #resolvedArgs = [];
-    #resolvedStackTrace;
+    static #STACK_TRACE_MAX_LINES = 50;
     #id;
-    constructor(msg, options) {
-        this.#msg = msg;
-        this.#id = options?.id;
-        this.#resolvedStackTrace = options?.resolvedStackTraceForTesting;
+    #type;
+    #text;
+    #argCount;
+    #resolvedArgs;
+    #stack;
+    #cause;
+    #isIgnored;
+    constructor(params) {
+        this.#id = params.id;
+        this.#type = params.type;
+        this.#text = params.text;
+        this.#argCount = params.argCount ?? 0;
+        this.#resolvedArgs = params.resolvedArgs ?? [];
+        this.#stack = params.stack;
+        this.#cause = params.cause;
+        this.#isIgnored = params.isIgnored;
     }
     static async from(msg, options) {
-        const formatter = new ConsoleFormatter(msg, options);
-        if (options?.fetchDetailedData) {
-            await formatter.#loadDetailedData(options?.devTools);
+        const ignoreListManager = options?.devTools?.universe.context.get(DevTools.DevTools.IgnoreListManager);
+        const isIgnored = options.isIgnoredForTesting ||
+            (frame => {
+                if (!ignoreListManager) {
+                    return false;
+                }
+                if (frame.uiSourceCode) {
+                    return ignoreListManager.isUserOrSourceMapIgnoreListedUISourceCode(frame.uiSourceCode);
+                }
+                if (frame.url) {
+                    return ignoreListManager.isUserIgnoreListedURL(frame.url);
+                }
+                return false;
+            });
+        if (msg instanceof UncaughtError) {
+            const error = await SymbolizedError.fromDetails({
+                devTools: options?.devTools,
+                details: msg.details,
+                targetId: msg.targetId,
+                includeStackAndCause: options?.fetchDetailedData,
+                resolvedStackTraceForTesting: options?.resolvedStackTraceForTesting,
+                resolvedCauseForTesting: options?.resolvedCauseForTesting,
+            });
+            return new _a({
+                id: options.id,
+                type: 'error',
+                text: error.message,
+                stack: error.stackTrace,
+                cause: error.cause,
+                isIgnored,
+            });
         }
-        return formatter;
-    }
-    #isConsoleMessage(msg) {
-        // No `instanceof` as tests mock `ConsoleMessage`.
-        return 'args' in msg && typeof msg.args === 'function';
-    }
-    async #loadDetailedData(devTools) {
-        if (this.#msg instanceof Error) {
-            return;
+        let resolvedArgs = [];
+        if (options.resolvedArgsForTesting) {
+            resolvedArgs = options.resolvedArgsForTesting;
         }
-        if (this.#isConsoleMessage(this.#msg)) {
-            this.#resolvedArgs = await Promise.all(this.#msg.args().map(async (arg, i) => {
+        else if (options.fetchDetailedData) {
+            resolvedArgs = await Promise.all(msg.args().map(async (arg, i) => {
                 try {
+                    const remoteObject = arg.remoteObject();
+                    if (remoteObject.type === 'object' &&
+                        remoteObject.subtype === 'error') {
+                        return await SymbolizedError.fromError({
+                            devTools: options.devTools,
+                            error: remoteObject,
+                            // @ts-expect-error Internal ConsoleMessage API
+                            targetId: msg._targetId(),
+                        });
+                    }
                     return await arg.jsonValue();
                 }
                 catch {
@@ -39,71 +84,66 @@ export class ConsoleFormatter {
                 }
             }));
         }
-        if (devTools) {
+        let stack;
+        if (options.resolvedStackTraceForTesting) {
+            stack = options.resolvedStackTraceForTesting;
+        }
+        else if (options.fetchDetailedData && options.devTools) {
             try {
-                if (this.#isConsoleMessage(this.#msg)) {
-                    this.#resolvedStackTrace = await createStackTraceForConsoleMessage(devTools, this.#msg);
-                }
-                else if (this.#msg.stackTrace) {
-                    this.#resolvedStackTrace = await createStackTrace(devTools, this.#msg.stackTrace, this.#msg.targetId);
-                }
+                stack = await createStackTraceForConsoleMessage(options.devTools, msg);
             }
             catch {
                 // ignore
             }
         }
+        return new _a({
+            id: options.id,
+            type: msg.type(),
+            text: msg.text(),
+            argCount: resolvedArgs.length || msg.args().length,
+            resolvedArgs,
+            stack,
+            isIgnored,
+        });
     }
     // The short format for a console message.
     toString() {
-        const type = this.#getType();
-        const text = this.#getText();
-        const argsCount = this.#getArgsCount();
-        const idPart = this.#id !== undefined ? `msgid=${this.#id} ` : '';
-        return `${idPart}[${type}] ${text} (${argsCount} args)`;
+        return `msgid=${this.#id} [${this.#type}] ${this.#text} (${this.#argCount} args)`;
     }
     // The verbose format for a console message, including all details.
     toStringDetailed() {
         const result = [
-            this.#id !== undefined ? `ID: ${this.#id}` : '',
-            `Message: ${this.#getType()}> ${this.#getText()}`,
+            `ID: ${this.#id}`,
+            `Message: ${this.#type}> ${this.#text}`,
             this.#formatArgs(),
-            this.#formatStackTrace(this.#resolvedStackTrace),
+            this.#formatStackTrace(this.#stack, this.#cause, {
+                includeHeading: true,
+            }),
         ].filter(line => !!line);
         return result.join('\n');
     }
-    #getType() {
-        if (!this.#isConsoleMessage(this.#msg)) {
-            return 'error';
-        }
-        return this.#msg.type();
-    }
-    #getText() {
-        if (!this.#isConsoleMessage(this.#msg)) {
-            return this.#msg.message;
-        }
-        return this.#msg.text();
-    }
     #getArgs() {
-        if (!this.#isConsoleMessage(this.#msg)) {
-            return [];
-        }
         if (this.#resolvedArgs.length > 0) {
             const args = [...this.#resolvedArgs];
             // If there is no text, the first argument serves as text (see formatMessage).
-            if (!this.#msg.text()) {
+            if (!this.#text) {
                 args.shift();
             }
             return args;
         }
         return [];
     }
-    #getArgsCount() {
-        if (!this.#isConsoleMessage(this.#msg)) {
-            return 0;
-        }
-        return this.#resolvedArgs.length || this.#msg.args().length;
-    }
     #formatArg(arg) {
+        if (arg instanceof SymbolizedError) {
+            return [
+                arg.message,
+                this.#formatStackTrace(arg.stackTrace, arg.cause, {
+                    includeHeading: false,
+                }),
+            ]
+                .filter(line => !!line)
+                .join('\n');
+        }
         return typeof arg === 'object' ? JSON.stringify(arg) : String(arg);
     }
     #formatArgs() {
@@ -117,25 +157,47 @@ export class ConsoleFormatter {
         }
         return result.join('\n');
     }
-    #formatStackTrace(stackTrace) {
+    #formatStackTrace(stackTrace, cause, opts) {
         if (!stackTrace) {
             return '';
         }
+        const lines = this.#formatStackTraceInner(stackTrace, cause);
+        const includedLines = lines.slice(0, _a.#STACK_TRACE_MAX_LINES);
+        const reminderCount = lines.length - includedLines.length;
         return [
-            '### Stack trace',
-            this.#formatFragment(stackTrace.syncFragment),
-            ...stackTrace.asyncFragments.map(this.#formatAsyncFragment.bind(this)),
+            opts.includeHeading ? '### Stack trace' : '',
+            ...includedLines,
+            reminderCount > 0 ? `... and ${reminderCount} more frames` : '',
             'Note: line and column numbers use 1-based indexing',
-        ].join('\n');
+        ]
+            .filter(line => !!line)
+            .join('\n');
+    }
+    #formatStackTraceInner(stackTrace, cause) {
+        if (!stackTrace) {
+            return [];
+        }
+        return [
+            ...this.#formatFragment(stackTrace.syncFragment),
+            ...stackTrace.asyncFragments
+                .map(this.#formatAsyncFragment.bind(this))
+                .flat(),
+            ...this.#formatCause(cause),
+        ];
     }
     #formatFragment(fragment) {
-        return fragment.frames.map(this.#formatFrame.bind(this)).join('\n');
+        const frames = fragment.frames.filter(frame => !this.#isIgnored(frame));
+        return frames.map(this.#formatFrame.bind(this));
     }
     #formatAsyncFragment(fragment) {
+        const formattedFrames = this.#formatFragment(fragment);
+        if (formattedFrames.length === 0) {
+            return [];
+        }
         const separatorLineLength = 40;
         const prefix = `--- ${fragment.description || 'async'} `;
         const separator = prefix + '-'.repeat(separatorLineLength - prefix.length);
-        return separator + '\n' + this.#formatFragment(fragment);
+        return [separator, ...formattedFrames];
     }
     #formatFrame(frame) {
         let result = `at ${frame.name ?? '<anonymous>'}`;
@@ -148,21 +210,31 @@ export class ConsoleFormatter {
         }
         return result;
     }
+    #formatCause(cause) {
+        if (!cause) {
+            return [];
+        }
+        return [
+            `Caused by: ${cause.message}`,
+            ...this.#formatStackTraceInner(cause.stackTrace, cause.cause),
+        ];
+    }
     toJSON() {
         return {
-            type: this.#getType(),
-            text: this.#getText(),
-            argsCount: this.#getArgsCount(),
+            type: this.#type,
+            text: this.#text,
+            argsCount: this.#argCount,
             id: this.#id,
         };
     }
     toJSONDetailed() {
         return {
             id: this.#id,
-            type: this.#getType(),
-            text: this.#getText(),
+            type: this.#type,
+            text: this.#text,
             args: this.#getArgs().map(arg => typeof arg === 'object' ? arg : String(arg)),
-            stackTrace: this.#resolvedStackTrace,
+            stackTrace: this.#stack,
         };
     }
 }
+_a = ConsoleFormatter;

package/build/src/main.js

@@ -20,7 +20,7 @@ import { ToolCategory } from './tools/categories.js';
 import { tools } from './tools/tools.js';
 // If moved update release-please config
 // x-release-please-start-version
-const VERSION = '0.16.0';
+const VERSION = '0.17.0';
 // x-release-please-end
 export const args = parseArguments(VERSION);
 const logFile = args.logFile ? saveLogsToFile(args.logFile) : undefined;
@@ -87,6 +87,7 @@ async function getContext() {
         context = await McpContext.from(browser, logger, {
             experimentalDevToolsDebugging: devtools,
             experimentalIncludeAllPages: args.experimentalIncludeAllPages,
+            performanceCrux: args.performanceCrux,
         });
     }
     return context;
@@ -95,6 +96,9 @@ const logDisclaimers = () => {
     console.error(`chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect,
 debug, and modify any data in the browser or DevTools.
 Avoid sharing sensitive or personal information that you do not want to share with MCP clients.`);
+    if (args.performanceCrux) {
+        console.error(`Performance tools may send trace URLs to the Google CrUX API to fetch real-user experience data. To disable, run with --no-performance-crux.`);
+    }
     if (args.usageStatistics) {
         console.error(`
 Google collects usage statistics to improve Chrome DevTools MCP. To opt-out, run with --no-usage-statistics.

package/build/src/third_party/THIRD_PARTY_NOTICES

@@ -422,7 +422,7 @@ SOFTWARE.
 
 Name: @modelcontextprotocol/sdk
 URL: https://modelcontextprotocol.io
-Version: 1.25.3
+Version: 1.26.0
 License: MIT
 
 MIT License
@@ -452,7 +452,7 @@ SOFTWARE.
 
 Name: zod-to-json-schema
 URL: https://github.com/StefanTerdell/zod-to-json-schema
-Version: 3.25.0
+Version: 3.25.1
 License: ISC
 
 ISC License
@@ -636,14 +636,14 @@ SOFTWARE.
 
 Name: puppeteer-core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 24.36.1
+Version: 24.37.2
 License: Apache-2.0
 
 -------------------- DEPENDENCY DIVIDER --------------------
 
 Name: @puppeteer/browsers
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/browsers
-Version: 2.11.2
+Version: 2.12.0
 License: Apache-2.0
 
 -------------------- DEPENDENCY DIVIDER --------------------

package/build/src/third_party/bundled-packages.json

@@ -1,8 +1,8 @@
 {
-  "@modelcontextprotocol/sdk": "1.25.3",
-  "chrome-devtools-frontend": "1.0.1576915",
+  "@modelcontextprotocol/sdk": "1.26.0",
+  "chrome-devtools-frontend": "1.0.1581449",
   "core-js": "3.48.0",
   "debug": "4.4.3",
   "yargs": "18.0.0",
-  "puppeteer-core": "24.36.1"
+  "puppeteer-core": "24.37.2"
 }

package/build/src/third_party/devtools-formatter-worker.js

@@ -12447,7 +12447,6 @@ const UIStrings$2 = {
     networkPanel: 'Network panel',
     requestConditionsDrawer: 'Request conditions drawer',
     applicationPanel: 'Application panel',
-    securityPanel: 'Security panel',
     sourcesPanel: 'Sources panel',
     timelinePanel: 'Performance panel',
     memoryInspectorPanel: 'Memory inspector panel',
@@ -12467,7 +12466,6 @@ const i18nLazyString$1 = getLazilyComputedLocalizedString.bind(undefined, str_$2
     TIMELINE_PANEL: i18nLazyString$1(UIStrings$2.timelinePanel),
     APPLICATION_PANEL: i18nLazyString$1(UIStrings$2.applicationPanel),
     SOURCES_PANEL: i18nLazyString$1(UIStrings$2.sourcesPanel),
-    SECURITY_PANEL: i18nLazyString$1(UIStrings$2.securityPanel),
     MEMORY_INSPECTOR_PANEL: i18nLazyString$1(UIStrings$2.memoryInspectorPanel),
     ANIMATIONS_PANEL: i18nLazyString$1(UIStrings$2.animationsPanel),
 });