chrome-devtools-mcp 0.10.1 → 0.11.0

package/README.md

@@ -63,6 +63,32 @@ amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
 
 </details>
 
+<details>
+  <summary>Antigravity</summary>
+
+To use the Chrome DevTools MCP server follow the instructions from <a href="https://antigravity.google/docs/mcp">Antigravity's docs<a/> to install a custom MCP server. Add the following config to the MCP servers config:
+
+```bash
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": [
+        "chrome-devtools-mcp@latest",
+        "--browser-url=http://127.0.0.1:9222",
+        "-y"
+      ]
+    }
+  }
+}
+```
+
+This will make the Chrome DevTools MCP server automatically connect to the browser that Antigravity is using. If you are not using port 9222, make sure to adjust accordingly.
+
+Chrome DevTools MCP will not start the browser instance automatically using this approach as as the Chrome DevTools MCP server runs in Antigravity's built-in browser. If the browser is not already running, you have to start it first by clicking the Chrome icon at the top right corner.
+
+</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>):
@@ -131,12 +157,22 @@ Configure the following fields and press `CTRL+S` to save the configuration:
 
 <details>
   <summary>Copilot / VS Code</summary>
-  Follow the MCP install <a href="https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server">guide</a>,
-  with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:
-  
-  ```bash
-  code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
-  ```
+
+**Click the button to install:**
+
+[<img src="https://mcpbadge.dev/badge-install-in-vs-code-stable-dark" alt="Install in VS Code">](https://vscode.dev/redirect/mcp/install?name=io.github.ChromeDevTools%2Fchrome-devtools-mcp&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22chrome-devtools-mcp%22%5D%2C%22env%22%3A%7B%7D%7D)
+
+[<img src="https://mcpbadge.dev/badge-install-in-vs-code-insiders-dark" alt="Install in VS Code Insiders">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522io.github.ChromeDevTools%252Fchrome-devtools-mcp%2522%252C%2522config%2522%253A%257B%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522chrome-devtools-mcp%2522%255D%252C%2522env%2522%253A%257B%257D%257D%257D)
+
+**Or install manually:**
+
+Follow the MCP install <a href="https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server">guide</a>,
+with the standard config from above. You can also install the Chrome DevTools MCP server using the VS Code CLI:
+
+```bash
+code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'
+```
+
 </details>
 
 <details>
@@ -152,6 +188,16 @@ Go to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided ab
 
 </details>
 
+<details>
+  <summary>Factory CLI</summary>
+Use the Factory CLI to add the Chrome DevTools MCP server (<a href="https://docs.factory.ai/cli/configuration/mcp">guide</a>):
+
+```bash
+droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"
+```
+
+</details>
+
 <details>
   <summary>Gemini CLI</summary>
 Install the Chrome DevTools MCP server using the Gemini CLI.
@@ -204,6 +250,25 @@ Alternatively, follow the <a href="https://docs.qoder.com/user-guide/chat/model-
 
 </details>
 
+<details>
+  <summary>Qoder CLI</summary>
+
+Install the Chrome DevTools MCP server using the Qoder CLI (<a href="https://docs.qoder.com/cli/using-cli#mcp-servsers">guide</a>):
+
+**Project wide:**
+
+```bash
+qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
+```
+
+**Globally:**
+
+```bash
+qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest
+```
+
+</details>
+
 <details>
   <summary>Visual Studio</summary>
   
@@ -286,7 +351,7 @@ The Chrome DevTools MCP server supports the following configuration option:
 <!-- BEGIN AUTO GENERATED OPTIONS -->
 
 - **`--browserUrl`, `-u`**
-  Connect to a running Chrome instance using port forwarding. For more details see: https://developer.chrome.com/docs/devtools/remote-debugging/local-server.
+  Connect to a running, debuggable Chrome instance (e.g. `http://127.0.0.1:9222`). For more details see: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.
   - **Type:** string
 
 - **`--wsEndpoint`, `-w`**
@@ -307,9 +372,12 @@ The Chrome DevTools MCP server supports the following configuration option:
   - **Type:** string
 
 - **`--isolated`**
-  If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed.
+  If specified, creates a temporary user-data-dir that is automatically cleaned up after the browser is closed. Defaults to false.
   - **Type:** boolean
-  - **Default:** `false`
+
+- **`--userDataDir`**
+  Path to the user data directory for Chrome. Default is $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE
+  - **Type:** string
 
 - **`--channel`**
   Specify a different Chrome channel that should be used. The default is the stable channel version.

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/Debouncer.js

@@ -5,10 +5,10 @@
  * Debounce utility function, ensures that the function passed in is only called once the function stops being called and the delay has expired.
  */
 export const debounce = function (func, delay) {
-    let timer = 0;
+    let timer;
     const debounced = (...args) => {
         clearTimeout(timer);
-        timer = window.setTimeout(() => func(...args), delay);
+        timer = setTimeout(() => func(...args), delay);
     };
     return debounced;
 };

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/Gzip.js

@@ -47,7 +47,7 @@ export async function compress(str) {
 async function gzipCodec(buffer, codecStream) {
     const readable = new ReadableStream({
         start(controller) {
-            controller.enqueue(buffer);
+            controller.enqueue(buffer instanceof ArrayBuffer ? new Uint8Array(buffer) : buffer);
             controller.close();
         }
     });

package/build/node_modules/chrome-devtools-frontend/front_end/core/common/Revealer.js

@@ -23,6 +23,10 @@ const UIStrings = {
      * @description The UI destination when right clicking an item that can be revealed
      */
     networkPanel: 'Network panel',
+    /**
+     * @description The UI destination when right clicking an item that can be revealed
+     */
+    requestConditionsDrawer: 'Request conditions drawer',
     /**
      * @description The UI destination when right clicking an item that can be revealed
      */
@@ -150,6 +154,7 @@ export const RevealerDestination = {
     CHANGES_DRAWER: i18nLazyString(UIStrings.changesDrawer),
     ISSUES_VIEW: i18nLazyString(UIStrings.issuesView),
     NETWORK_PANEL: i18nLazyString(UIStrings.networkPanel),
+    REQUEST_CONDITIONS_DRAWER: i18nLazyString(UIStrings.requestConditionsDrawer),
     TIMELINE_PANEL: i18nLazyString(UIStrings.timelinePanel),
     APPLICATION_PANEL: i18nLazyString(UIStrings.applicationPanel),
     SOURCES_PANEL: i18nLazyString(UIStrings.sourcesPanel),