@mcp-b/chrome-devtools-mcp 2.1.0 → 2.2.0

package/build/src/formatters/consoleFormatter.js

@@ -1,121 +1,241 @@
 /**
  * @license
- * Copyright 2025 Google LLC
+ * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-// The short format for a console message, based on a previous format.
-export function formatConsoleEventShort(msg) {
-    if (msg.type === 'issue') {
-        return `msgid=${msg.consoleMessageStableId} [${msg.type}] ${msg.message} (count: ${msg.count})`;
+import { createStackTraceForConsoleMessage, SymbolizedError, } from '../DevtoolsUtils.js';
+import { UncaughtError } from '../PageCollector.js';
+import * as DevTools from '../third_party/index.js';
+export class ConsoleFormatter {
+    #id;
+    #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;
     }
-    return `msgid=${msg.consoleMessageStableId} [${msg.type}] ${msg.message} (${msg.args?.length ?? 0} args)`;
-}
-function getArgs(msg) {
-    const args = [...(msg.args ?? [])];
-    // If there is no text, the first argument serves as text (see formatMessage).
-    if (!msg.message) {
-        args.shift();
+    static async from(msg, options) {
+        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 ConsoleFormatter({
+                id: options.id,
+                type: 'error',
+                text: error.message,
+                stack: error.stackTrace,
+                cause: error.cause,
+                isIgnored,
+            });
+        }
+        let resolvedArgs = [];
+        if (options.resolvedArgsForTesting) {
+            resolvedArgs = options.resolvedArgsForTesting;
+        }
+        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 {
+                    return `<error: Argument ${i} is no longer available>`;
+                }
+            }));
+        }
+        let stack;
+        if (options.resolvedStackTraceForTesting) {
+            stack = options.resolvedStackTraceForTesting;
+        }
+        else if (options.fetchDetailedData && options.devTools) {
+            try {
+                stack = await createStackTraceForConsoleMessage(options.devTools, msg);
+            }
+            catch {
+                // ignore
+            }
+        }
+        return new ConsoleFormatter({
+            id: options.id,
+            type: msg.type(),
+            text: msg.text(),
+            argCount: resolvedArgs.length || msg.args().length,
+            resolvedArgs,
+            stack,
+            isIgnored,
+        });
     }
-    return args;
+    // The short format for a console message.
+    toString() {
+        return convertConsoleMessageConciseToString(this.toJSON());
+    }
+    // The verbose format for a console message, including all details.
+    toStringDetailed() {
+        return convertConsoleMessageConciseDetailedToString(this.toJSONDetailed());
+    }
+    #getArgs() {
+        if (this.#resolvedArgs.length > 0) {
+            const args = [...this.#resolvedArgs];
+            // If there is no text, the first argument serves as text (see formatMessage).
+            if (!this.#text) {
+                args.shift();
+            }
+            return args;
+        }
+        return [];
+    }
+    toJSON() {
+        return {
+            type: this.#type,
+            text: this.#text,
+            argsCount: this.#argCount,
+            id: this.#id,
+        };
+    }
+    toJSONDetailed() {
+        return {
+            id: this.#id,
+            type: this.#type,
+            text: this.#text,
+            argsCount: this.#argCount,
+            args: this.#getArgs().map(arg => formatArg(arg, this)),
+            stackTrace: this.#stack
+                ? formatStackTrace(this.#stack, this.#cause, this)
+                : undefined,
+        };
+    }
+}
+function convertConsoleMessageConciseToString(msg) {
+    return `msgid=${msg.id} [${msg.type}] ${msg.text} (${msg.argsCount} args)`;
 }
-// The verbose format for a console message, including all details.
-export function formatConsoleEventVerbose(msg, context) {
-    const aggregatedIssue = msg.item;
+function convertConsoleMessageConciseDetailedToString(msg) {
     const result = [
-        `ID: ${msg.consoleMessageStableId}`,
-        `Message: ${msg.type}> ${aggregatedIssue ? formatIssue(aggregatedIssue, msg.description, context) : msg.message}`,
-        aggregatedIssue ? undefined : formatArgs(msg),
+        `ID: ${msg.id}`,
+        `Message: ${msg.type}> ${msg.text}`,
+        formatArgs(msg),
+        ...(msg.stackTrace ? ['### Stack trace', msg.stackTrace] : []),
     ].filter(line => !!line);
     return result.join('\n');
 }
-function formatArg(arg) {
-    return typeof arg === 'object' ? JSON.stringify(arg) : String(arg);
-}
-function formatArgs(consoleData) {
-    const args = getArgs(consoleData);
+function formatArgs(msg) {
+    const args = msg.args;
     if (!args.length) {
         return '';
     }
     const result = ['### Arguments'];
     for (const [key, arg] of args.entries()) {
-        result.push(`Arg #${key}: ${formatArg(arg)}`);
+        result.push(`Arg #${key}: ${arg}`);
     }
     return result.join('\n');
 }
-export function formatIssue(issue, description, context) {
-    const result = [];
-    let processedMarkdown = description?.trim();
-    // Remove heading in order not to conflict with the whole console message response markdown
-    if (processedMarkdown?.startsWith('# ')) {
-        processedMarkdown = processedMarkdown.substring(2).trimStart();
+function formatArg(arg, formatter) {
+    if (arg instanceof SymbolizedError) {
+        return [
+            arg.message,
+            arg.stackTrace
+                ? formatStackTrace(arg.stackTrace, arg.cause, formatter)
+                : undefined,
+        ]
+            .filter(line => !!line)
+            .join('\n');
     }
-    if (processedMarkdown)
-        result.push(processedMarkdown);
-    const links = issue.getDescription()?.links;
-    if (links && links.length > 0) {
-        result.push('Learn more:');
-        for (const link of links) {
-            result.push(`[${link.linkTitle}](${link.link})`);
-        }
+    return typeof arg === 'object' ? JSON.stringify(arg) : String(arg);
+}
+const STACK_TRACE_MAX_LINES = 50;
+function formatStackTrace(stackTrace, cause, formatter) {
+    const lines = formatStackTraceInner(stackTrace, cause, formatter);
+    const includedLines = lines.slice(0, STACK_TRACE_MAX_LINES);
+    const reminderCount = lines.length - includedLines.length;
+    return [
+        ...includedLines,
+        reminderCount > 0 ? `... and ${reminderCount} more frames` : '',
+        'Note: line and column numbers use 1-based indexing',
+    ]
+        .filter(line => !!line)
+        .join('\n');
+}
+function formatStackTraceInner(stackTrace, cause, formatter) {
+    if (!stackTrace) {
+        return [];
     }
-    const issues = issue.getAllIssues();
-    const affectedResources = [];
-    for (const singleIssue of issues) {
-        const details = singleIssue.details();
-        if (!details)
-            continue;
-        // We send the remaining details as untyped JSON because the DevTools
-        // frontend code is currently not re-usable.
-        // eslint-disable-next-line
-        const data = structuredClone(details);
-        let uid;
-        let request;
-        if ('violatingNodeId' in details && details.violatingNodeId && context) {
-            uid = context.resolveCdpElementId(details.violatingNodeId);
-            delete data.violatingNodeId;
-        }
-        if ('nodeId' in details && details.nodeId && context) {
-            uid = context.resolveCdpElementId(details.nodeId);
-            delete data.nodeId;
-        }
-        if ('documentNodeId' in details && details.documentNodeId && context) {
-            uid = context.resolveCdpElementId(details.documentNodeId);
-            delete data.documentNodeId;
-        }
-        if ('request' in details && details.request) {
-            request = details.request.url;
-            if (details.request.requestId && context) {
-                const resolvedId = context.resolveCdpRequestId(details.request.requestId);
-                if (resolvedId) {
-                    request = resolvedId;
-                    delete data.request.requestId;
-                }
-            }
-        }
-        // These fields has no use for the MCP client (redundant or irrelevant).
-        delete data.errorType;
-        delete data.frameId;
-        affectedResources.push({
-            uid,
-            data: data,
-            request,
-        });
+    return [
+        ...formatFragment(stackTrace.syncFragment, formatter),
+        ...stackTrace.asyncFragments
+            .map(item => formatAsyncFragment(item, formatter))
+            .flat(),
+        ...formatCause(cause, formatter),
+    ];
+}
+function formatFragment(fragment, formatter) {
+    const frames = fragment.frames.filter(frame => !formatter.isIgnored(frame));
+    return frames.map(formatFrame);
+}
+function formatAsyncFragment(fragment, formatter) {
+    const formattedFrames = formatFragment(fragment, formatter);
+    if (formattedFrames.length === 0) {
+        return [];
+    }
+    const separatorLineLength = 40;
+    const prefix = `--- ${fragment.description || 'async'} `;
+    const separator = prefix + '-'.repeat(separatorLineLength - prefix.length);
+    return [separator, ...formattedFrames];
+}
+function formatFrame(frame) {
+    let result = `at ${frame.name ?? '<anonymous>'}`;
+    if (frame.uiSourceCode) {
+        const location = frame.uiSourceCode.uiLocation(frame.line, frame.column);
+        result += ` (${location.linkText(/* skipTrim */ false, /* showColumnNumber */ true)})`;
     }
-    if (affectedResources.length) {
-        result.push('### Affected resources');
+    else if (frame.url) {
+        result += ` (${frame.url}:${frame.line}:${frame.column})`;
     }
-    result.push(...affectedResources.map(item => {
-        const details = [];
-        if (item.uid)
-            details.push(`uid=${item.uid}`);
-        if (item.request) {
-            details.push((typeof item.request === 'number' ? `reqid=` : 'url=') + item.request);
-        }
-        if (item.data)
-            details.push(`data=${JSON.stringify(item.data)}`);
-        return details.join(' ');
-    }));
-    if (result.length === 0)
-        return 'No affected resources found';
-    return result.join('\n');
+    return result;
+}
+function formatCause(cause, formatter) {
+    if (!cause) {
+        return [];
+    }
+    return [
+        `Caused by: ${cause.message}`,
+        ...formatStackTraceInner(cause.stackTrace, cause.cause, formatter),
+    ];
 }

package/build/src/formatters/networkFormatter.js

@@ -2,76 +2,217 @@
  * @license
  * Copyright 2025 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */
+ * */
 import { isUtf8 } from 'node:buffer';
 const BODY_CONTEXT_SIZE_LIMIT = 10000;
-export function getShortDescriptionForRequest(request, id, selectedInDevToolsUI = false) {
-    // TODO truncate the URL
-    return `reqid=${id} ${request.method()} ${request.url()} ${getStatusFromRequest(request)}${selectedInDevToolsUI ? ` [selected in the DevTools Network panel]` : ''}`;
-}
-export function getStatusFromRequest(request) {
-    const httpResponse = request.response();
-    const failure = request.failure();
-    let status;
-    if (httpResponse) {
-        const responseStatus = httpResponse.status();
-        status =
-            responseStatus >= 200 && responseStatus <= 299
-                ? `[success - ${responseStatus}]`
-                : `[failed - ${responseStatus}]`;
-    }
-    else if (failure) {
-        status = `[failed - ${failure.errorText}]`;
-    }
-    else {
-        status = '[pending]';
-    }
-    return status;
-}
-export function getFormattedHeaderValue(headers) {
-    const response = [];
-    for (const [name, value] of Object.entries(headers)) {
-        response.push(`- ${name}:${value}`);
+export class NetworkFormatter {
+    #request;
+    #options;
+    #requestBody;
+    #responseBody;
+    #requestBodyFilePath;
+    #responseBodyFilePath;
+    constructor(request, options) {
+        this.#request = request;
+        this.#options = options;
     }
-    return response;
-}
-export async function getFormattedResponseBody(httpResponse, sizeLimit = BODY_CONTEXT_SIZE_LIMIT) {
-    try {
-        const responseBuffer = await httpResponse.buffer();
-        if (isUtf8(responseBuffer)) {
-            const responseAsTest = responseBuffer.toString('utf-8');
-            if (responseAsTest.length === 0) {
-                return `<empty response>`;
+    static async from(request, options) {
+        const instance = new NetworkFormatter(request, options);
+        if (options.fetchData) {
+            await instance.#loadDetailedData();
+        }
+        return instance;
+    }
+    async #loadDetailedData() {
+        // Load Request Body
+        if (this.#request.hasPostData()) {
+            let data;
+            try {
+                data =
+                    this.#request.postData() ?? (await this.#request.fetchPostData());
+            }
+            catch {
+                // Ignore parsing errors
+            }
+            const requestBodyNotAvailableMessage = '<Request body not available anymore>';
+            if (this.#options.requestFilePath) {
+                if (!this.#options.saveFile) {
+                    throw new Error('saveFile is not provided');
+                }
+                if (data) {
+                    await this.#options.saveFile(Buffer.from(data), this.#options.requestFilePath);
+                    this.#requestBodyFilePath = this.#options.requestFilePath;
+                }
+                else {
+                    this.#requestBody = requestBodyNotAvailableMessage;
+                }
+            }
+            else {
+                if (data) {
+                    this.#requestBody = getSizeLimitedString(data, BODY_CONTEXT_SIZE_LIMIT);
+                }
+                else {
+                    this.#requestBody = requestBodyNotAvailableMessage;
+                }
+            }
+        }
+        // Load Response Body
+        const response = this.#request.response();
+        if (response) {
+            const responseBodyNotAvailableMessage = '<Response body not available anymore>';
+            if (this.#options.responseFilePath) {
+                try {
+                    const buffer = await response.buffer();
+                    if (!this.#options.saveFile) {
+                        throw new Error('saveFile is not provided');
+                    }
+                    await this.#options.saveFile(buffer, this.#options.responseFilePath);
+                    this.#responseBodyFilePath = this.#options.responseFilePath;
+                }
+                catch {
+                    // Flatten error handling for buffer() failure and save failure
+                }
+                if (!this.#responseBodyFilePath) {
+                    this.#responseBody = responseBodyNotAvailableMessage;
+                }
+            }
+            else {
+                this.#responseBody = await this.#getFormattedResponseBody(response, BODY_CONTEXT_SIZE_LIMIT);
             }
-            return `${getSizeLimitedString(responseAsTest, sizeLimit)}`;
         }
-        return `<binary data>`;
     }
-    catch {
-        return `<not available anymore>`;
+    toString() {
+        return convertNetworkRequestConciseToString(this.toJSON());
     }
-}
-export async function getFormattedRequestBody(httpRequest, sizeLimit = BODY_CONTEXT_SIZE_LIMIT) {
-    if (httpRequest.hasPostData()) {
-        const data = httpRequest.postData();
-        if (data) {
-            return `${getSizeLimitedString(data, sizeLimit)}`;
+    toStringDetailed() {
+        return converNetworkRequestDetailedToStringDetailed(this.toJSONDetailed());
+    }
+    toJSON() {
+        return {
+            requestId: this.#options.requestId,
+            method: this.#request.method(),
+            url: this.#request.url(),
+            status: this.#getStatusFromRequest(this.#request),
+            selectedInDevToolsUI: this.#options.selectedInDevToolsUI,
+        };
+    }
+    toJSONDetailed() {
+        const redirectChain = this.#request.redirectChain();
+        const formattedRedirectChain = redirectChain.reverse().map(request => {
+            const id = this.#options.requestIdResolver
+                ? this.#options.requestIdResolver(request)
+                : undefined;
+            const formatter = new NetworkFormatter(request, {
+                requestId: id,
+                saveFile: this.#options.saveFile,
+            });
+            return formatter.toJSON();
+        });
+        return {
+            ...this.toJSON(),
+            requestHeaders: this.#request.headers(),
+            requestBody: this.#requestBody,
+            requestBodyFilePath: this.#requestBodyFilePath,
+            responseHeaders: this.#request.response()?.headers(),
+            responseBody: this.#responseBody,
+            responseBodyFilePath: this.#responseBodyFilePath,
+            failure: this.#request.failure()?.errorText,
+            redirectChain: formattedRedirectChain.length
+                ? formattedRedirectChain
+                : undefined,
+        };
+    }
+    #getStatusFromRequest(request) {
+        const httpResponse = request.response();
+        const failure = request.failure();
+        let status;
+        if (httpResponse) {
+            status = httpResponse.status().toString();
+        }
+        else if (failure) {
+            status = failure.errorText;
+        }
+        else {
+            status = 'pending';
         }
+        return status;
+    }
+    async #getFormattedResponseBody(httpResponse, sizeLimit = BODY_CONTEXT_SIZE_LIMIT) {
         try {
-            const fetchData = await httpRequest.fetchPostData();
-            if (fetchData) {
-                return `${getSizeLimitedString(fetchData, sizeLimit)}`;
+            const responseBuffer = await httpResponse.buffer();
+            if (isUtf8(responseBuffer)) {
+                const responseAsTest = responseBuffer.toString('utf-8');
+                if (responseAsTest.length === 0) {
+                    return '<empty response>';
+                }
+                return getSizeLimitedString(responseAsTest, sizeLimit);
             }
+            return '<binary data>';
         }
         catch {
-            return `<not available anymore>`;
+            return '<not available anymore>';
         }
     }
-    return;
 }
 function getSizeLimitedString(text, sizeLimit) {
     if (text.length > sizeLimit) {
-        return `${text.substring(0, sizeLimit) + '... <truncated>'}`;
+        return text.substring(0, sizeLimit) + '... <truncated>';
+    }
+    return text;
+}
+function convertNetworkRequestConciseToString(data) {
+    // TODO truncate the URL
+    return `reqid=${data.requestId} ${data.method} ${data.url} [${data.status}]${data.selectedInDevToolsUI ? ` [selected in the DevTools Network panel]` : ''}`;
+}
+function formatHeadlers(headers) {
+    const response = [];
+    for (const [name, value] of Object.entries(headers)) {
+        response.push(`- ${name}:${value}`);
+    }
+    return response;
+}
+function converNetworkRequestDetailedToStringDetailed(data) {
+    const response = [];
+    response.push(`## Request ${data.url}`);
+    response.push(`Status: ${data.status}`);
+    response.push(`### Request Headers`);
+    for (const line of formatHeadlers(data.requestHeaders)) {
+        response.push(line);
+    }
+    if (data.requestBody) {
+        response.push(`### Request Body`);
+        response.push(data.requestBody);
+    }
+    else if (data.requestBodyFilePath) {
+        response.push(`### Request Body`);
+        response.push(`Saved to ${data.requestBodyFilePath}.`);
+    }
+    if (data.responseHeaders) {
+        response.push(`### Response Headers`);
+        for (const line of formatHeadlers(data.responseHeaders)) {
+            response.push(line);
+        }
+    }
+    if (data.responseBody) {
+        response.push(`### Response Body`);
+        response.push(data.responseBody);
+    }
+    else if (data.responseBodyFilePath) {
+        response.push(`### Response Body`);
+        response.push(`Saved to ${data.responseBodyFilePath}.`);
+    }
+    if (data.failure) {
+        response.push(`### Request failed with`);
+        response.push(data.failure);
+    }
+    const redirectChain = data.redirectChain;
+    if (redirectChain?.length) {
+        response.push(`### Redirect chain`);
+        let indent = 0;
+        for (const request of redirectChain.reverse()) {
+            response.push(`${'  '.repeat(indent)}${convertNetworkRequestConciseToString(request)})}`);
+            indent++;
+        }
     }
-    return `${text}`;
+    return response.join('\n');
 }