chrome-devtools-mcp 0.17.1 → 0.17.3

package/README.md

@@ -124,6 +124,9 @@ claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
 
 **Install as a Plugin (MCP + Skills)**
 
+> [!NOTE]  
+> If you already had Chrome DevTools MCP installed previously for Claude Code, make sure to remove it first from your installation and configuration files.
+
 To install Chrome DevTools MCP with skills, add the marketplace registry in Claude Code:
 
 ```sh
@@ -147,7 +150,7 @@ Restart Claude Code to have the MCP server and skills load (check with `/skills`
 
 <details>
   <summary>Codex</summary>
-  Follow the <a href="https://github.com/openai/codex/blob/main/docs/advanced.md#model-context-protocol-mcp">configure MCP guide</a>
+  Follow the <a href="https://developers.openai.com/codex/mcp/#configure-with-the-cli">configure MCP guide</a>
   using the standard config from above. You can also install the Chrome DevTools MCP server using the Codex CLI:
 
 ```bash

package/build/src/McpResponse.js

@@ -398,16 +398,8 @@ Call ${handleDialog.name} to handle it before continuing.`);
                 response.push(extensionsMessage);
             }
         }
-        if (this.#networkRequestsOptions?.include) {
-            let requests = context.getNetworkRequests(this.#networkRequestsOptions?.includePreservedRequests);
-            // Apply resource type filtering if specified
-            if (this.#networkRequestsOptions.resourceTypes?.length) {
-                const normalizedTypes = new Set(this.#networkRequestsOptions.resourceTypes);
-                requests = requests.filter(request => {
-                    const type = request.resourceType();
-                    return normalizedTypes.has(type);
-                });
-            }
+        if (this.#networkRequestsOptions?.include && data.networkRequests) {
+            const requests = data.networkRequests;
             response.push('## Network requests');
             if (requests.length) {
                 const paginationData = this.#dataWithPagination(requests, this.#networkRequestsOptions.pagination);
@@ -415,7 +407,7 @@ Call ${handleDialog.name} to handle it before continuing.`);
                 response.push(...paginationData.info);
                 if (data.networkRequests) {
                     structuredContent.networkRequests = [];
-                    for (const formatter of data.networkRequests) {
+                    for (const formatter of paginationData.items) {
                         response.push(formatter.toString());
                         structuredContent.networkRequests.push(formatter.toJSON());
                     }

package/build/src/formatters/NetworkFormatter.js

@@ -82,63 +82,10 @@ export class NetworkFormatter {
         }
     }
     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]` : ''}`;
+        return convertNetworkRequestConciseToString(this.toJSON());
     }
     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');
+        return converNetworkRequestDetailedToStringDetailed(this.toJSONDetailed());
     }
     toJSON() {
         return {
@@ -180,27 +127,16 @@ export class NetworkFormatter {
         const failure = request.failure();
         let status;
         if (httpResponse) {
-            const responseStatus = httpResponse.status();
-            status =
-                responseStatus >= 200 && responseStatus <= 299
-                    ? `[success - ${responseStatus}]`
-                    : `[failed - ${responseStatus}]`;
+            status = httpResponse.status().toString();
         }
         else if (failure) {
-            status = `[failed - ${failure.errorText}]`;
+            status = failure.errorText;
         }
         else {
-            status = '[pending]';
+            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();
@@ -224,3 +160,59 @@ function getSizeLimitedString(text, sizeLimit) {
     }
     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 response.join('\n');
+}

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.17.1';
+const VERSION = '0.17.3';
 // x-release-please-end
 export const args = parseArguments(VERSION);
 const logFile = args.logFile ? saveLogsToFile(args.logFile) : undefined;

package/build/src/third_party/THIRD_PARTY_NOTICES

@@ -636,14 +636,14 @@ SOFTWARE.
 
 Name: puppeteer-core
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/puppeteer-core
-Version: 24.37.3
+Version: 24.37.4
 License: Apache-2.0
 
 -------------------- DEPENDENCY DIVIDER --------------------
 
 Name: @puppeteer/browsers
 URL: https://github.com/puppeteer/puppeteer/tree/main/packages/browsers
-Version: 2.12.1
+Version: 2.13.0
 License: Apache-2.0
 
 -------------------- DEPENDENCY DIVIDER --------------------

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

@@ -4,5 +4,5 @@
   "core-js": "3.48.0",
   "debug": "4.4.3",
   "yargs": "18.0.0",
-  "puppeteer-core": "24.37.3"
+  "puppeteer-core": "24.37.4"
 }

package/build/src/third_party/index.js

@@ -40599,7 +40599,7 @@ function mergeUint8Arrays(items) {
  * Copyright 2025 Google Inc.
  * SPDX-License-Identifier: Apache-2.0
  */
-const packageVersion = '24.37.3';
+const packageVersion = '24.37.4';
 
 /**
  * @license
@@ -40865,15 +40865,15 @@ async function getReadableFromProtocolStream(client, handle) {
         },
     });
 }
+const VALID_DIALOG_TYPES = new Set([
+    'alert',
+    'confirm',
+    'prompt',
+    'beforeunload',
+]);
 function validateDialogType(type) {
     let dialogType = null;
-    const validDialogTypes = new Set([
-        'alert',
-        'confirm',
-        'prompt',
-        'beforeunload',
-    ]);
-    if (validDialogTypes.has(type)) {
+    if (VALID_DIALOG_TYPES.has(type)) {
         dialogType = type;
     }
     assert(dialogType, `Unknown javascript dialog type: ${type}`);
@@ -50610,7 +50610,7 @@ let FrameManager$1 = class FrameManager extends EventEmitter {
             frame.updateClient(target._session());
         }
         this.setupEventListeners(target._session());
-        void this.initialize(target._session(), frame);
+        void this.initialize(target._session(), frame).catch(debugError);
     }
     _deviceRequestPromptManager(client) {
         let manager = this.#deviceRequestPromptManagerMap.get(client);
@@ -55541,9 +55541,9 @@ class Puppeteer {
  * SPDX-License-Identifier: Apache-2.0
  */
 const PUPPETEER_REVISIONS = Object.freeze({
-    chrome: '145.0.7632.67',
-    'chrome-headless-shell': '145.0.7632.67',
-    firefox: 'stable_147.0.3',
+    chrome: '145.0.7632.76',
+    'chrome-headless-shell': '145.0.7632.76',
+    firefox: 'stable_147.0.4',
 });
 
 /**

package/build/src/tools/input.js

@@ -156,11 +156,16 @@ async function selectOption(handle, aXNode, value) {
         throw new Error(`Could not find option with text "${value}"`);
     }
 }
+function hasOptionChildren(aXNode) {
+    return aXNode.children.some(child => child.role === 'option');
+}
 async function fillFormElement(uid, value, context) {
     const handle = await context.getElementByUid(uid);
     try {
         const aXNode = context.getAXNodeByUid(uid);
-        if (aXNode && aXNode.role === 'combobox') {
+        // We assume that combobox needs to be handled as select if it has
+        // role='combobox' and option children.
+        if (aXNode && aXNode.role === 'combobox' && hasOptionChildren(aXNode)) {
             await selectOption(handle, aXNode, value);
         }
         else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp",
-  "version": "0.17.1",
+  "version": "0.17.3",
   "description": "MCP server for Chrome DevTools",
   "type": "module",
   "bin": "./build/src/index.js",
@@ -62,7 +62,7 @@
     "eslint-plugin-import": "^2.32.0",
     "globals": "^17.0.0",
     "prettier": "^3.6.2",
-    "puppeteer": "24.37.3",
+    "puppeteer": "24.37.4",
     "rollup": "4.57.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-license": "^3.6.0",