chrome-devtools-mcp 0.7.1 → 0.8.1

package/README.md

@@ -53,6 +53,16 @@ Add the following config to your MCP client:
 
 ### MCP Client configuration
 
+<details>
+  <summary>Amp</summary>
+  Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install the Chrome DevTools MCP server using the CLI:
+
+```bash
+amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
+```
+
+</details>
+
 <details>
   <summary>Claude Code</summary>
     Use the Claude Code CLI to add the Chrome DevTools MCP server (<a href="https://docs.anthropic.com/en/docs/claude-code/mcp">guide</a>):
@@ -177,6 +187,15 @@ The same way chrome-devtools-mcp can be configured for JetBrains Junie in `Setti
 
 </details>
 
+<details>
+  <summary>Kiro</summary>
+
+In **Kiro Settings**, go to `Configure MCP` > `Open Workspace or User MCP Config` > Use the configuration snippet provided above.
+
+Or, from the IDE **Activity Bar** > `Kiro` > `MCP Servers` > `Click Open MCP Config`. Use the configuration snippet provided above.
+
+</details>
+
 <details>
   <summary>Visual Studio</summary>
   
@@ -291,6 +310,10 @@ The Chrome DevTools MCP server supports the following configuration option:
   If enabled, ignores errors relative to self-signed and expired certificates. Use with caution.
   - **Type:** boolean
 
+- **`--chromeArg`**
+  Additional arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp.
+  - **Type:** array
+
 <!-- END AUTO GENERATED OPTIONS -->
 
 Pass them via the `args` property in the JSON configuration. For example:
@@ -336,7 +359,7 @@ Here is a step-by-step guide on how to connect to a running Chrome Stable instan
 
 **Step 1: Configure the MCP client**
 
-Add the `--browser-url` option to your MCP client configuration. The value of this option should be the URL of the running Chrome instance. `http://localhost:9222` is a common default.
+Add the `--browser-url` option to your MCP client configuration. The value of this option should be the URL of the running Chrome instance. `http://127.0.0.1:9222` is a common default.
 
 ```json
 {
@@ -345,7 +368,7 @@ Add the `--browser-url` option to your MCP client configuration. The value of th
       "command": "npx",
       "args": [
         "chrome-devtools-mcp@latest",
-        "--browser-url=http://localhost:9222"
+        "--browser-url=http://127.0.0.1:9222"
       ]
     }
   }

package/build/src/McpContext.js

@@ -201,6 +201,9 @@ export class McpContext {
         const page = this.getSelectedPage();
         return page.getDefaultNavigationTimeout();
     }
+    getAXNodeByUid(uid) {
+        return this.#textSnapshot?.idToNode.get(uid);
+    }
     async getElementByUid(uid) {
         if (!this.#textSnapshot?.idToNode.size) {
             throw new Error(`No snapshot found. Use ${takeSnapshot.name} to capture one.`);
@@ -253,6 +256,14 @@ export class McpContext {
                     ? node.children.map(child => assignIds(child))
                     : [],
             };
+            // The AXNode for an option doesn't contain its `value`.
+            // Therefore, set text content of the option as value.
+            if (node.role === 'option') {
+                const optionText = node.name;
+                if (optionText) {
+                    nodeWithId.value = optionText.toString();
+                }
+            }
             idToNode.set(nodeWithId.id, nodeWithId);
             return nodeWithId;
         };

package/build/src/McpResponse.js

@@ -117,8 +117,11 @@ export class McpResponse {
         }
         const dialog = context.getDialog();
         if (dialog) {
+            const defaultValueIfNeeded = dialog.type() === 'prompt'
+                ? ` (default value: "${dialog.defaultValue()}")`
+                : '';
             response.push(`# Open dialog
-${dialog.type()}: ${dialog.message()} (default value: ${dialog.message()}).
+${dialog.type()}: ${dialog.message()}${defaultValueIfNeeded}.
 Call ${handleDialog.name} to handle it before continuing.`);
         }
         if (this.#includePages) {

package/build/src/browser.js

@@ -42,7 +42,7 @@ export async function ensureBrowserConnected(options) {
     return browser;
 }
 export async function launch(options) {
-    const { channel, executablePath, customDevTools, headless, isolated } = options;
+    const { channel, executablePath, headless, isolated } = options;
     const profileDirName = channel && channel !== 'stable'
         ? `chrome-profile-${channel}`
         : 'chrome-profile';
@@ -57,9 +57,6 @@ export async function launch(options) {
         ...(options.args ?? []),
         '--hide-crash-restore-bubble',
     ];
-    if (customDevTools) {
-        args.push(`--custom-devtools-frontend=file://${customDevTools}`);
-    }
     if (headless) {
         args.push('--screen-info={3840x2160}');
     }
@@ -104,9 +101,7 @@ export async function launch(options) {
     }
     catch (error) {
         if (userDataDir &&
-            (error.message.includes('The browser is already running') ||
-                error.message.includes('Target closed') ||
-                error.message.includes('Connection closed'))) {
+            error.message.includes('The browser is already running')) {
             throw new Error(`The browser is already running for ${userDataDir}. Use --isolated to run multiple browser instances.`, {
                 cause: error,
             });

package/build/src/cli.js

@@ -39,13 +39,6 @@ export const cliOptions = {
         description: 'If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.',
         default: false,
     },
-    customDevtools: {
-        type: 'string',
-        description: 'Path to custom DevTools.',
-        hidden: true,
-        conflicts: 'browserUrl',
-        alias: 'd',
-    },
     channel: {
         type: 'string',
         description: 'Specify a different Chrome channel that should be used. The default is the stable channel version.',
@@ -86,6 +79,10 @@ export const cliOptions = {
         describe: 'Whether to enable automation over DevTools targets',
         hidden: true,
     },
+    chromeArg: {
+        type: 'array',
+        describe: 'Additional arguments for Chrome. Only applies when Chrome is launched by chrome-devtools-mcp.',
+    },
 };
 export function parseArguments(version, argv = process.argv) {
     const yargsInstance = yargs(hideBin(argv))
@@ -114,6 +111,10 @@ export function parseArguments(version, argv = process.argv) {
             '$0 --viewport 1280x720',
             'Launch Chrome with the initial viewport size of 1280x720px',
         ],
+        [
+            `$0 --chrome-arg='--no-sandbox' --chrome-arg='--disable-setuid-sandbox'`,
+            'Launch Chrome without sandboxes. Use with caution.',
+        ],
     ]);
     return yargsInstance
         .wrap(Math.min(120, yargsInstance.terminalWidth()))

package/build/src/formatters/snapshotFormatter.js

@@ -14,61 +14,28 @@ function getAttributes(serializedAXNodeRoot) {
         serializedAXNodeRoot.role,
         `"${serializedAXNodeRoot.name || ''}"`, // Corrected: Added quotes around name
     ];
-    // Value properties
-    const valueProperties = [
-        'value',
-        'valuetext',
-        'valuemin',
-        'valuemax',
-        'level',
-        'autocomplete',
-        'haspopup',
-        'invalid',
-        'orientation',
-        'description',
-        'keyshortcuts',
-        'roledescription',
-    ];
-    for (const property of valueProperties) {
-        if (property in serializedAXNodeRoot &&
-            serializedAXNodeRoot[property] !== undefined) {
-            attributes.push(`${property}="${serializedAXNodeRoot[property]}"`);
-        }
-    }
-    // Boolean properties that also have an 'able' attribute
+    const excluded = new Set(['id', 'role', 'name', 'elementHandle', 'children']);
     const booleanPropertyMap = {
         disabled: 'disableable',
         expanded: 'expandable',
         focused: 'focusable',
         selected: 'selectable',
     };
-    for (const [property, ableAttribute] of Object.entries(booleanPropertyMap)) {
-        if (property in serializedAXNodeRoot) {
-            attributes.push(ableAttribute);
-            if (serializedAXNodeRoot[property]) {
-                attributes.push(property);
-            }
-        }
-    }
-    const booleanProperties = [
-        'modal',
-        'multiline',
-        'readonly',
-        'required',
-        'multiselectable',
-    ];
-    for (const property of booleanProperties) {
-        if (property in serializedAXNodeRoot && serializedAXNodeRoot[property]) {
-            attributes.push(property);
+    for (const attr of Object.keys(serializedAXNodeRoot).sort()) {
+        if (excluded.has(attr)) {
+            continue;
         }
-    }
-    // Mixed boolean/string attributes
-    for (const property of ['pressed', 'checked']) {
-        if (property in serializedAXNodeRoot) {
-            attributes.push(property);
-            if (serializedAXNodeRoot[property]) {
-                attributes.push(`${property}="${serializedAXNodeRoot[property]}"`);
+        const value = serializedAXNodeRoot[attr];
+        if (typeof value === 'boolean') {
+            if (booleanPropertyMap[attr]) {
+                attributes.push(booleanPropertyMap[attr]);
             }
+            if (value) {
+                attributes.push(attr);
+            }
+        }
+        else if (typeof value === 'string' || typeof value === 'number') {
+            attributes.push(`${attr}="${value}"`);
         }
     }
     return attributes;

package/build/src/main.js

@@ -4,9 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import './polyfill.js';
-import assert from 'node:assert';
-import fs from 'node:fs';
-import path from 'node:path';
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { SetLevelRequestSchema } from '@modelcontextprotocol/sdk/types.js';
@@ -25,36 +22,24 @@ import * as performanceTools from './tools/performance.js';
 import * as screenshotTools from './tools/screenshot.js';
 import * as scriptTools from './tools/script.js';
 import * as snapshotTools from './tools/snapshot.js';
-function readPackageJson() {
-    const currentDir = import.meta.dirname;
-    const packageJsonPath = path.join(currentDir, '..', '..', 'package.json');
-    if (!fs.existsSync(packageJsonPath)) {
-        return {};
-    }
-    try {
-        const json = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-        assert.strict(json['name'], 'chrome-devtools-mcp');
-        return json;
-    }
-    catch {
-        return {};
-    }
-}
-const version = readPackageJson().version ?? 'unknown';
-export const args = parseArguments(version);
+// If moved update release-please config
+// x-release-please-start-version
+const VERSION = '0.8.1';
+// x-release-please-end
+export const args = parseArguments(VERSION);
 const logFile = args.logFile ? saveLogsToFile(args.logFile) : undefined;
-logger(`Starting Chrome DevTools MCP Server v${version}`);
+logger(`Starting Chrome DevTools MCP Server v${VERSION}`);
 const server = new McpServer({
     name: 'chrome_devtools',
     title: 'Chrome DevTools MCP server',
-    version,
+    version: VERSION,
 }, { capabilities: { logging: {} } });
 server.server.setRequestHandler(SetLevelRequestSchema, () => {
     return {};
 });
 let context;
 async function getContext() {
-    const extraArgs = [];
+    const extraArgs = (args.chromeArg ?? []).map(String);
     if (args.proxyServer) {
         extraArgs.push(`--proxy-server=${args.proxyServer}`);
     }
@@ -67,7 +52,6 @@ async function getContext() {
         : await ensureBrowserLaunched({
             headless: args.headless,
             executablePath: args.executablePath,
-            customDevTools: args.customDevtools,
             channel: args.channel,
             isolated: args.isolated,
             logFile,
@@ -140,6 +124,9 @@ const tools = [
     ...Object.values(scriptTools),
     ...Object.values(snapshotTools),
 ];
+tools.sort((a, b) => {
+    return a.name.localeCompare(b.name);
+});
 for (const tool of tools) {
     registerTool(tool);
 }

package/build/src/tools/input.js

@@ -68,6 +68,55 @@ export const hover = defineTool({
         }
     },
 });
+// The AXNode for an option doesn't contain its `value`. We set text content of the option as value.
+// If the form is a combobox, we need to find the correct option by its text value.
+// To do that, loop through the children while checking which child's text matches the requested value (requested value is actually the text content).
+// When the correct option is found, use the element handle to get the real value.
+async function selectOption(handle, aXNode, value) {
+    let optionFound = false;
+    for (const child of aXNode.children) {
+        if (child.role === 'option' && child.name === value && child.value) {
+            optionFound = true;
+            const childHandle = await child.elementHandle();
+            if (childHandle) {
+                try {
+                    const childValueHandle = await childHandle.getProperty('value');
+                    try {
+                        const childValue = await childValueHandle.jsonValue();
+                        if (childValue) {
+                            await handle.asLocator().fill(childValue.toString());
+                        }
+                    }
+                    finally {
+                        void childValueHandle.dispose();
+                    }
+                    break;
+                }
+                finally {
+                    void childHandle.dispose();
+                }
+            }
+        }
+    }
+    if (!optionFound) {
+        throw new Error(`Could not find option with text "${value}"`);
+    }
+}
+async function fillFormElement(uid, value, context) {
+    const handle = await context.getElementByUid(uid);
+    try {
+        const aXNode = context.getAXNodeByUid(uid);
+        if (aXNode && aXNode.role === 'combobox') {
+            await selectOption(handle, aXNode, value);
+        }
+        else {
+            await handle.asLocator().fill(value);
+        }
+    }
+    finally {
+        void handle.dispose();
+    }
+}
 export const fill = defineTool({
     name: 'fill',
     description: `Type text into a input, text area or select an option from a <select> element.`,
@@ -82,17 +131,11 @@ export const fill = defineTool({
         value: z.string().describe('The value to fill in'),
     },
     handler: async (request, response, context) => {
-        const handle = await context.getElementByUid(request.params.uid);
-        try {
-            await context.waitForEventsAfterAction(async () => {
-                await handle.asLocator().fill(request.params.value);
-            });
-            response.appendResponseLine(`Successfully filled out the element`);
-            response.setIncludeSnapshot(true);
-        }
-        finally {
-            void handle.dispose();
-        }
+        await context.waitForEventsAfterAction(async () => {
+            await fillFormElement(request.params.uid, request.params.value, context);
+        });
+        response.appendResponseLine(`Successfully filled out the element`);
+        response.setIncludeSnapshot(true);
     },
 });
 export const drag = defineTool({
@@ -141,15 +184,9 @@ export const fillForm = defineTool({
     },
     handler: async (request, response, context) => {
         for (const element of request.params.elements) {
-            const handle = await context.getElementByUid(element.uid);
-            try {
-                await context.waitForEventsAfterAction(async () => {
-                    await handle.asLocator().fill(element.value);
-                });
-            }
-            finally {
-                void handle.dispose();
-            }
+            await context.waitForEventsAfterAction(async () => {
+                await fillFormElement(element.uid, element.value, context);
+            });
         }
         response.appendResponseLine(`Successfully filled out the form`);
         response.setIncludeSnapshot(true);

package/build/src/tools/pages.js

@@ -133,8 +133,8 @@ export const navigatePageHistory = defineTool({
                 await page.goForward(options);
             }
         }
-        catch {
-            response.appendResponseLine(`Unable to navigate ${request.params.navigate} in currently selected page.`);
+        catch (error) {
+            response.appendResponseLine(`Unable to navigate ${request.params.navigate} in currently selected page. ${error.message}`);
         }
         response.setIncludePages(true);
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-devtools-mcp",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "MCP server for Chrome DevTools",
   "type": "module",
   "bin": "./build/src/index.js",
@@ -20,7 +20,7 @@
     "test:only:no-build": "node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-reporter spec --test-force-exit --test --test-only \"build/tests/**/*.test.js\"",
     "test:update-snapshots": "npm run build && node --require ./build/tests/setup.js --no-warnings=ExperimentalWarning --test-force-exit --test --test-update-snapshots \"build/tests/**/*.test.js\"",
     "prepare": "node --experimental-strip-types scripts/prepare.ts",
-    "sync-server-json-version": "node  --experimental-strip-types scripts/sync-server-json-version.ts && npm run format"
+    "verify-server-json-version": "node --experimental-strip-types scripts/verify-server-json-version.ts"
   },
   "files": [
     "build/src",
@@ -37,10 +37,10 @@
   "homepage": "https://github.com/ChromeDevTools/chrome-devtools-mcp#readme",
   "mcpName": "io.github.ChromeDevTools/chrome-devtools-mcp",
   "dependencies": {
-    "@modelcontextprotocol/sdk": "1.19.1",
-    "core-js": "3.45.1",
+    "@modelcontextprotocol/sdk": "1.20.0",
+    "core-js": "3.46.0",
     "debug": "4.4.3",
-    "puppeteer-core": "^24.24.0",
+    "puppeteer-core": "^24.24.1",
     "yargs": "18.0.0",
     "zod": "^3.25.76"
   },
@@ -60,7 +60,7 @@
     "eslint-plugin-import": "^2.32.0",
     "globals": "^16.4.0",
     "prettier": "^3.6.2",
-    "puppeteer": "24.24.0",
+    "puppeteer": "24.24.1",
     "sinon": "^21.0.0",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.43.0"