Chrome DevTools MCP 的使用Chrome DevTools MCP 使用： IDEA + github

环境

nodejs v20.19 以上
chrome
npm

IDEA + copilot CLI

IntelliJ IDEA 内置 MCP server, 需要更新到 2025.2+版本
设置 MCP client

点击 "Configure"后会打开 mcp.json，在 mcp.json 中添加 MCP client：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

下载 copilot CLI(需要订阅 github copilot)

npm install -g @github/copilot

安装完成后，在 terminal 输入 'copilot' 即可进入 copilot CLI 首次使用需要登录 /login

常用命令：

/login：登录 GitHub
/session：查看当前授权
/reset：重置权限
/add-directory：添加信任目录
/mcp add：添加 MCP 服务扩展。

添加 MCP 服务器 /mcp add

Configure the following fields and press CTRL+S to save the configuration:

Server name: chrome-devtools
Server Type: [1] Local
Command: npx -y chrome-devtools-mcp@latest

启动 chrome 浏览器

在启动 chrome 浏览器之前，需要关掉所有正在运行的 chrome instance 注意：以下命令中的端口，需要跟 mcp.json 中设置的端口保持一致

& "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="$env:TEMP\chrome-profile-stable"

test

在浏览器中访问 http://localhost:9222/json 可以看到页面列表（有这个基本说明成功了）可以简单测试一下是否正常运行,在 copilot中输入以下命令（agent模式，需引用 mcp.json）

Check the performance of https://developers.chrome.com

如果成功，打开页面后会有这样的提示

使用：本地debug

在 copilot CLI 中输入命令，比如：点击某个按钮...

可以在copilot cli中引用某个文件@文件路径,然后给出需求让ai修改代码