Chrome 开发者工具 MCP

Source: Dev.to

安装扩展

打开扩展面板（Ctrl + Shift + X）
搜索 @mcp devtools
安装 ChromeDevTools

确保 MCP 服务器正在运行

右键点击已安装的扩展以打开操作菜单（启动/停止/重启/配置）。
在 IDE 中打开项目文件夹，以便 AI 代理拥有上下文。

你也可以运行：

npx chrome-devtools-mcp@latest --help

查看所有可用的配置选项。

使用方法

在 IDE 中打开 Copilot 聊天窗口并提问，例如：

• “为什么我的表单没有居中？”
• “用所有输入测试这个表单提交。”
• “检查表单显示错误信息时是否出现布局偏移。”
• “改进 LCP。”

工具

MCP 为 AI 代理提供了许多工具。使用聊天中的 # 可以查看可用工具列表。直接的工具命令和自然语言描述都可使用。

示例命令语法

#navigate_page home page and #fill_form first name: Adam, last name: Noah, #take_snapshot , #click submit, #wait_for submission, #list_network_requests , #list_console_messages

自然语言等价

Navigate to the home page and fill the form with first name: Adam, last name: Noah. Click the submit button and wait for it. List the console logs. List the network requests.

GitHub page for more help