chrome-devtools-mcp 0.17.0 → 0.17.2

package/build/src/formatters/IssueFormatter.js

@@ -1,190 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { ISSUE_UTILS } from '../issue-descriptions.js';
-import { logger } from '../logger.js';
-import { DevTools } from '../third_party/index.js';
-export class IssueFormatter {
-    #issue;
-    #options;
-    constructor(issue, options) {
-        this.#issue = issue;
-        this.#options = options;
-    }
-    toString() {
-        const title = this.#getTitle();
-        const count = this.#issue.getAggregatedIssuesCount();
-        const idPart = this.#options.id !== undefined ? `msgid=${this.#options.id} ` : '';
-        return `${idPart}[issue] ${title} (count: ${count})`;
-    }
-    toStringDetailed() {
-        const result = [];
-        if (this.#options.id !== undefined) {
-            result.push(`ID: ${this.#options.id}`);
-        }
-        const bodyParts = [];
-        const description = this.#getDescription();
-        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();
-        }
-        if (processedMarkdown) {
-            bodyParts.push(processedMarkdown);
-        }
-        else {
-            bodyParts.push(this.#getTitle() ?? 'Unknown Issue');
-        }
-        const links = this.#issue.getDescription()?.links;
-        if (links && links.length > 0) {
-            bodyParts.push('Learn more:');
-            for (const link of links) {
-                bodyParts.push(`[${link.linkTitle}](${link.link})`);
-            }
-        }
-        const affectedResources = this.#getAffectedResources();
-        if (affectedResources.length) {
-            bodyParts.push('### Affected resources');
-            bodyParts.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(' ');
-            }));
-        }
-        result.push(`Message: issue> ${bodyParts.join('\n')}`);
-        return result.join('\n');
-    }
-    toJSON() {
-        return {
-            type: 'issue',
-            title: this.#getTitle(),
-            count: this.#issue.getAggregatedIssuesCount(),
-            id: this.#options.id,
-        };
-    }
-    toJSONDetailed() {
-        return {
-            id: this.#options.id,
-            type: 'issue',
-            title: this.#getTitle(),
-            description: this.#getDescription(),
-            links: this.#issue.getDescription()?.links,
-            affectedResources: this.#getAffectedResources(),
-        };
-    }
-    #getAffectedResources() {
-        const issues = this.#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.
-            const data = structuredClone(details);
-            let uid;
-            let request;
-            if ('violatingNodeId' in details &&
-                details.violatingNodeId &&
-                this.#options.elementIdResolver) {
-                uid = this.#options.elementIdResolver(details.violatingNodeId);
-                delete data.violatingNodeId;
-            }
-            if ('nodeId' in details &&
-                details.nodeId &&
-                this.#options.elementIdResolver) {
-                uid = this.#options.elementIdResolver(details.nodeId);
-                delete data.nodeId;
-            }
-            if ('documentNodeId' in details &&
-                details.documentNodeId &&
-                this.#options.elementIdResolver) {
-                uid = this.#options.elementIdResolver(details.documentNodeId);
-                delete data.documentNodeId;
-            }
-            if ('request' in details && details.request) {
-                request = details.request.url;
-                if (details.request.requestId && this.#options.requestIdResolver) {
-                    const resolvedId = this.#options.requestIdResolver(details.request.requestId);
-                    if (resolvedId) {
-                        request = resolvedId;
-                        const requestData = data.request;
-                        delete requestData.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 affectedResources;
-    }
-    isValid() {
-        return this.#getTitle() !== undefined;
-    }
-    // Helper to extract title
-    #getTitle() {
-        const markdownDescription = this.#issue.getDescription();
-        const filename = markdownDescription?.file;
-        if (!filename) {
-            logger(`no description found for issue:` + this.#issue.code());
-            return undefined;
-        }
-        // We already have the description logic in #getDescription, but title extraction is separate
-        // We can reuse the logic or cache it.
-        // Ideally we should process markdown once.
-        const rawMarkdown = ISSUE_UTILS.getIssueDescription(filename);
-        if (!rawMarkdown) {
-            logger(`no markdown ${filename} found for issue:` + this.#issue.code());
-            return undefined;
-        }
-        try {
-            const processedMarkdown = DevTools.MarkdownIssueDescription.substitutePlaceholders(rawMarkdown, markdownDescription?.substitutions);
-            const markdownAst = DevTools.Marked.Marked.lexer(processedMarkdown);
-            const title = DevTools.MarkdownIssueDescription.findTitleFromMarkdownAst(markdownAst);
-            if (!title) {
-                logger('cannot read issue title from ' + filename);
-                return undefined;
-            }
-            return title;
-        }
-        catch {
-            logger('error parsing markdown for issue ' + this.#issue.code());
-            return undefined;
-        }
-    }
-    #getDescription() {
-        const markdownDescription = this.#issue.getDescription();
-        const filename = markdownDescription?.file;
-        if (!filename) {
-            return undefined;
-        }
-        const rawMarkdown = ISSUE_UTILS.getIssueDescription(filename);
-        if (!rawMarkdown) {
-            return undefined;
-        }
-        try {
-            return DevTools.MarkdownIssueDescription.substitutePlaceholders(rawMarkdown, markdownDescription?.substitutions);
-        }
-        catch {
-            return undefined;
-        }
-    }
-}

package/build/src/formatters/NetworkFormatter.js

@@ -1,226 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- * */
-import { isUtf8 } from 'node:buffer';
-const BODY_CONTEXT_SIZE_LIMIT = 10000;
-export class NetworkFormatter {
-    #request;
-    #options;
-    #requestBody;
-    #responseBody;
-    #requestBodyFilePath;
-    #responseBodyFilePath;
-    constructor(request, options) {
-        this.#request = request;
-        this.#options = options;
-    }
-    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);
-            }
-        }
-    }
-    toString() {
-        // TODO truncate the URL
-        return `reqid=${this.#options.requestId} ${this.#request.method()} ${this.#request.url()} ${this.#getStatusFromRequest(this.#request)}${this.#options.selectedInDevToolsUI ? ` [selected in the DevTools Network panel]` : ''}`;
-    }
-    toStringDetailed() {
-        const response = [];
-        response.push(`## Request ${this.#request.url()}`);
-        response.push(`Status:  ${this.#getStatusFromRequest(this.#request)}`);
-        response.push(`### Request Headers`);
-        for (const line of this.#getFormattedHeaderValue(this.#request.headers())) {
-            response.push(line);
-        }
-        if (this.#requestBody) {
-            response.push(`### Request Body`);
-            response.push(this.#requestBody);
-        }
-        else if (this.#requestBodyFilePath) {
-            response.push(`### Request Body`);
-            response.push(`Saved to ${this.#requestBodyFilePath}.`);
-        }
-        const httpResponse = this.#request.response();
-        if (httpResponse) {
-            response.push(`### Response Headers`);
-            for (const line of this.#getFormattedHeaderValue(httpResponse.headers())) {
-                response.push(line);
-            }
-        }
-        if (this.#responseBody) {
-            response.push(`### Response Body`);
-            response.push(this.#responseBody);
-        }
-        else if (this.#responseBodyFilePath) {
-            response.push(`### Response Body`);
-            response.push(`Saved to ${this.#responseBodyFilePath}.`);
-        }
-        const httpFailure = this.#request.failure();
-        if (httpFailure) {
-            response.push(`### Request failed with`);
-            response.push(httpFailure.errorText);
-        }
-        const redirectChain = this.#request.redirectChain();
-        if (redirectChain.length) {
-            response.push(`### Redirect chain`);
-            let indent = 0;
-            for (const request of redirectChain.reverse()) {
-                const id = this.#options.requestIdResolver
-                    ? this.#options.requestIdResolver(request)
-                    : undefined;
-                // We create a temporary synchronous instance just for toString
-                const formatter = new NetworkFormatter(request, {
-                    requestId: id,
-                    saveFile: this.#options.saveFile,
-                });
-                response.push(`${'  '.repeat(indent)}${formatter.toString()}`);
-                indent++;
-            }
-        }
-        return response.join('\n');
-    }
-    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) {
-            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;
-    }
-    #getFormattedHeaderValue(headers) {
-        const response = [];
-        for (const [name, value] of Object.entries(headers)) {
-            response.push(`- ${name}:${value}`);
-        }
-        return response;
-    }
-    async #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>';
-                }
-                return getSizeLimitedString(responseAsTest, sizeLimit);
-            }
-            return '<binary data>';
-        }
-        catch {
-            return '<not available anymore>';
-        }
-    }
-}
-function getSizeLimitedString(text, sizeLimit) {
-    if (text.length > sizeLimit) {
-        return text.substring(0, sizeLimit) + '... <truncated>';
-    }
-    return text;
-}

package/build/src/formatters/SnapshotFormatter.js

@@ -1,134 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-export class SnapshotFormatter {
-    #snapshot;
-    constructor(snapshot) {
-        this.#snapshot = snapshot;
-    }
-    toString() {
-        const chunks = [];
-        const root = this.#snapshot.root;
-        // Top-level content of the snapshot.
-        if (this.#snapshot.verbose &&
-            this.#snapshot.hasSelectedElement &&
-            !this.#snapshot.selectedElementUid) {
-            chunks.push(`Note: there is a selected element in the DevTools Elements panel but it is not included into the current a11y tree snapshot.
-Get a verbose snapshot to include all elements if you are interested in the selected element.\n\n`);
-        }
-        chunks.push(this.#formatNode(root, 0));
-        return chunks.join('');
-    }
-    toJSON() {
-        return this.#nodeToJSON(this.#snapshot.root);
-    }
-    #formatNode(node, depth = 0) {
-        const chunks = [];
-        const attributes = this.#getAttributes(node);
-        const line = ' '.repeat(depth * 2) +
-            attributes.join(' ') +
-            (node.id === this.#snapshot.selectedElementUid
-                ? ' [selected in the DevTools Elements panel]'
-                : '') +
-            '\n';
-        chunks.push(line);
-        for (const child of node.children) {
-            chunks.push(this.#formatNode(child, depth + 1));
-        }
-        return chunks.join('');
-    }
-    #nodeToJSON(node) {
-        const rawAttrs = this.#getAttributesMap(node);
-        const children = node.children.map(child => this.#nodeToJSON(child));
-        const result = structuredClone(rawAttrs);
-        if (children.length > 0) {
-            result.children = children;
-        }
-        return result;
-    }
-    #getAttributes(serializedAXNodeRoot) {
-        const attributes = [`uid=${serializedAXNodeRoot.id}`];
-        if (serializedAXNodeRoot.role) {
-            attributes.push(serializedAXNodeRoot.role === 'none'
-                ? 'ignored'
-                : serializedAXNodeRoot.role);
-        }
-        if (serializedAXNodeRoot.name) {
-            attributes.push(`"${serializedAXNodeRoot.name}"`);
-        }
-        const simpleAttrs = this.#getAttributesMap(serializedAXNodeRoot, 
-        /* excludeSpecial */ true);
-        for (const attr of Object.keys(serializedAXNodeRoot).sort()) {
-            if (excludedAttributes.has(attr)) {
-                continue;
-            }
-            const mapped = booleanPropertyMap[attr];
-            if (mapped && simpleAttrs[mapped]) {
-                attributes.push(mapped);
-            }
-            const val = simpleAttrs[attr];
-            if (val === true) {
-                attributes.push(attr);
-            }
-            else if (typeof val === 'string' || typeof val === 'number') {
-                attributes.push(`${attr}="${val}"`);
-            }
-        }
-        return attributes;
-    }
-    #getAttributesMap(node, excludeSpecial = false) {
-        const result = {};
-        if (!excludeSpecial) {
-            result.id = node.id;
-            if (node.role) {
-                result.role = node.role;
-            }
-            if (node.name) {
-                result.name = node.name;
-            }
-        }
-        // Re-implementing the exact logic from original function for #getAttributes to be safe:
-        return {
-            ...result,
-            ...this.#extractedAttributes(node),
-        };
-    }
-    #extractedAttributes(node) {
-        const result = {};
-        for (const attr of Object.keys(node).sort()) {
-            if (excludedAttributes.has(attr)) {
-                continue;
-            }
-            const value = node[attr];
-            if (typeof value === 'boolean') {
-                if (booleanPropertyMap[attr]) {
-                    result[booleanPropertyMap[attr]] = true;
-                }
-                if (value) {
-                    result[attr] = true;
-                }
-            }
-            else if (typeof value === 'string' || typeof value === 'number') {
-                result[attr] = value;
-            }
-        }
-        return result;
-    }
-}
-const booleanPropertyMap = {
-    disabled: 'disableable',
-    expanded: 'expandable',
-    focused: 'focusable',
-    selected: 'selectable',
-};
-const excludedAttributes = new Set([
-    'id',
-    'role',
-    'name',
-    'elementHandle',
-    'children',
-    'backendNodeId',
-    'loaderId',
-]);

package/build/src/index.js

@@ -1,21 +0,0 @@
-#!/usr/bin/env node
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { version } from 'node:process';
-const [major, minor] = version.substring(1).split('.').map(Number);
-if (major === 20 && minor < 19) {
-    console.error(`ERROR: \`chrome-devtools-mcp\` does not support Node ${process.version}. Please upgrade to Node 20.19.0 LTS or a newer LTS.`);
-    process.exit(1);
-}
-if (major === 22 && minor < 12) {
-    console.error(`ERROR: \`chrome-devtools-mcp\` does not support Node ${process.version}. Please upgrade to Node 22.12.0 LTS or a newer LTS.`);
-    process.exit(1);
-}
-if (major < 20) {
-    console.error(`ERROR: \`chrome-devtools-mcp\` does not support Node ${process.version}. Please upgrade to Node 20.19.0 LTS or a newer LTS.`);
-    process.exit(1);
-}
-await import('./main.js');

package/build/src/issue-descriptions.js

@@ -1,39 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-const DESCRIPTIONS_PATH = path.join(import.meta.dirname, 'third_party/issue-descriptions');
-let issueDescriptions = {};
-/**
- * Reads all issue descriptions from the filesystem into memory.
- */
-export async function loadIssueDescriptions() {
-    if (Object.keys(issueDescriptions).length > 0) {
-        return;
-    }
-    const files = await fs.promises.readdir(DESCRIPTIONS_PATH);
-    const descriptions = {};
-    for (const file of files) {
-        if (!file.endsWith('.md')) {
-            continue;
-        }
-        const content = await fs.promises.readFile(path.join(DESCRIPTIONS_PATH, file), 'utf-8');
-        descriptions[file] = content;
-    }
-    issueDescriptions = descriptions;
-}
-/**
- * Gets an issue description from the in-memory cache.
- * @param fileName The file name of the issue description.
- * @returns The description of the issue, or null if it doesn't exist.
- */
-export function getIssueDescription(fileName) {
-    return issueDescriptions[fileName] ?? null;
-}
-export const ISSUE_UTILS = {
-    loadIssueDescriptions,
-    getIssueDescription,
-};

package/build/src/logger.js

@@ -1,36 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import fs from 'node:fs';
-import { debug } from './third_party/index.js';
-const mcpDebugNamespace = 'mcp:log';
-const namespacesToEnable = [
-    mcpDebugNamespace,
-    ...(process.env['DEBUG'] ? [process.env['DEBUG']] : []),
-];
-export function saveLogsToFile(fileName) {
-    // Enable overrides everything so we need to add them
-    debug.enable(namespacesToEnable.join(','));
-    const logFile = fs.createWriteStream(fileName, { flags: 'a+' });
-    debug.log = function (...chunks) {
-        logFile.write(`${chunks.join(' ')}\n`);
-    };
-    logFile.on('error', function (error) {
-        console.error(`Error when opening/writing to log file: ${error.message}`);
-        logFile.end();
-        process.exit(1);
-    });
-    return logFile;
-}
-export function flushLogs(logFile, timeoutMs = 2000) {
-    return new Promise((resolve, reject) => {
-        const timeout = setTimeout(reject, timeoutMs);
-        logFile.end(() => {
-            clearTimeout(timeout);
-            resolve();
-        });
-    });
-}
-export const logger = debug(mcpDebugNamespace);