Browser Devtools MCP Vscode Extension

用于VS代码和光标的浏览器DevTools MCP

 ](https://github.com/serkan-ozal/browser-devtools-mcp-vscode-extension) 

Playwright通过模型上下文协议（MCP）为VS代码和游标提供浏览器自动化和调试。

此扩展集成 浏览器开发工具mcp 集成到IDE中，使GitHub Copilot和Cursor AI等AI助手能够与真实的web浏览器进行交互，以进行测试、调试和自动化任务。

特性

• 🌐 浏览器自动化 -导航、单击、填写表单并与网页交互
• 📸 截图 -捕获完整页面或元素的屏幕截图
• ♿ 无障碍 -运行可访问性审核并获取ARIA/AX树快照
• 📊 网页核心指标 -测量核心网络生命体征（LCP、INP、CLS、TTFB、FCP）
• 🔍 网络检查 -监控HTTP请求和响应
• 🎭 请求模拟 -存根和模拟API响应
• ⚛️ React工具 -检查React组件和元素
• 🔭 开放遥测 -分布式跟踪集成与跟踪上下文传播
• 🎨 Figma比较 -将页面与Figma设计进行比较
• 🐛 无阻塞调试 -跟踪点、日志点、异常点、监视表达式、探测快照
• ⚡ 执行 -通过JavaScript在一个请求中批处理多个工具调用 callTool()；在浏览器平台上 page （剧作家页面）可用于 page.evaluate(), page.locator()等等。
• 🌐 剧作家浏览器 -在首次安装/升级时，该扩展程序使用以下命令将设置中选择的浏览器（默认值：Chromium+headless shell+ffmpeg）下载到Playwright的正常缓存中 playwright-core的安装程序--否 npx 必修的。VSIX构建集 PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 因此二进制文件没有捆绑在一起。如果Chromium堆栈的该步骤失败，系统可能会提示您使用已安装的 谷歌浏览器 相反(使用系统安装的浏览器).跑 浏览器工具MCP：安装Playwright浏览器。.. 随时选择Chromium（默认）、Firefox和/或WebKit：它会更新 install.chromium / install.firefox / install.webkit 匹配并下载这些引擎。
• 📦 MCP服务器 -已发货 在一个通用VSIX内 （所有平台都有相同的工件）。该套餐包括 sharp + @img/sharp-wasm32；VSIX内容中不包括本地sharp/libvip预构建变体。运行时不需要npm；扩展运行捆绑 browser-devtools-mcp 随着 node.

安装

来自Open VSX注册表

1. 打开VS代码或光标
2. 转到扩展(Ctrl+Shift+X / Cmd+Shift+X)
3. 搜索“浏览器工具MCP”
4. 单击安装

或者通过命令行安装：

# VS Code
code --install-extension serkan-ozal.browser-devtools-mcp-vscode

# Cursor
cursor --install-extension serkan-ozal.browser-devtools-mcp-vscode

来自VSIX

# VS Code
code --install-extension browser-devtools-mcp-vscode-x.x.x.vsix

# Cursor
cursor --install-extension browser-devtools-mcp-vscode-x.x.x.vsix

注册： 在Cursor中，扩展通过Cursor的本地MCP API注册MCP服务器（否 mcp.json 需要）。在VS Code 1.96+中，它使用 vscode.lm.registerMcpServerDefinitionProvider。启用扩展后，服务器会自动启动。

遥测

分机可以发送 匿名 使用事件（安装/卸载、浏览器安装步骤等）来帮助改进产品。与捆绑商品相同的选择加入/选择退出规则适用 浏览器开发工具mcp 服务器。未收集个人身份信息；只有一个匿名ID ~/.browser-devtools-mcp/config.json，加上事件名称和环境属性（例如扩展版本、操作系统、节点版本）。

• 活动： cursor_ext_activated / cursor_ext_deactivated （扩展生命周期）， cursor_ext_installed （仅当第一个安装/升级路径运行并且捆绑的MCP路径解析时）， cursor_ext_install_failed, cursor_ext_browser_installed / cursor_ext_browser_install_failed，以及 cursor_ext_uninstalled （当卸载并停用扩展时，将使用中列出的扩展运行 .obsolete).MCP注册状态包含在相关位置(mcp_server_registered / mcp_server_unregistered).如果禁用遥测（设置、环境或配置），则不会发送任何事件。
• 时间： 客户端可能会批处理或延迟发送——事件可能不会立即出现在分析中。 TELEMETRY_ENABLE=false 和 ~/.browser-devtools-mcp/config.json 适用于延期和 捆绑的 MCP进程（扩展将父环境转发到服务器）。

如何禁用遥测

1. 设置（推荐）： 集 browserDevtoolsMcp.telemetry.enable 到 false 在VS代码/光标设置中。扩展将此同步到 ~/.browser-devtools-mcp/config.json 在激活和设置更改时，不会发送遥测事件（包括卸载）。
2. 环境变量： 集 TELEMETRY_ENABLE=false 在启动VS代码/光标之前。
3. 配置文件： 编辑 ~/.browser-devtools-mcp/config.json 并设置 "telemetryEnabled": false.

MCP服务器（捆绑）

这 browser-devtools-mcp 包裹是 此扩展的依赖性 并包含在已发布的VSIX中 node_modules我们发布了一个 单一通用VSIX 其中本地sharp/libvip预构建变体被排除在捆绑包之外，并且 @img/sharp-wasm32 包括在内。 @img/sharp-wasm32 是一个直接的扩展依赖关系（与捆绑的 sharp)，以及 .npmrc 套 force=true 所以npm会在普通主机上安装它。

• 激活 扩展解决 node_modules/browser-devtools-mcp/dist/index.js 在扩展文件夹中。服务器二进制文件本身不需要npm和网络。
• 新服务器版本： 发布/构建工作流由锁文件驱动(npm ci --omit=optional).碰撞 browser-devtools-mcp 在 package.json 当你想向前滚动时，刷新lockfile。
• 依赖关系： browser-devtools-mcp 和 @img/sharp-wasm32 是中的常规依赖项 package.json 对于维护人员；最终用户不运行MCP的npm。

维护者：通用VSIX

• 公关/公关： — workflow_dispatch, pull_request (master)，以及 push (main)触发器；上 ubuntu-latest 它运行 npm ci --omit=optional，lint，build，and npx vsce package.
• 发布/打开VSX： --单身 release 作业运行 npm ci --omit=optional，lint，build，version bump/tag/release，然后通过以下方式发布到Open VSX HaaLeo/publish-vscode-extension@v2 (skipDuplicate: true)并将生成的VSIX作为伪影上传。
• 包装过滤器： .vscodeignore 排除 @img/sharp-darwin-*, @img/sharp-win32-*, @img/sharp-linux-*, @img/sharp-libvips-* 并保持 sharp + @img/sharp-wasm32. vsce 通过以下方式收集生产依赖关系 npm list --production，因此devDependencies没有捆绑。

本地包装检查：

npm ci --omit=optional
npx vsce package

剧作家浏览器

该扩展使用Playwright的浏览器二进制文件（Chromium、Firefox、WebKit），存储在默认缓存中（例如。 ~/.cache/ms-playwright 在Linux上， ~/Library/Caches/ms-playwright 在macOS上）。

• 要安装哪些浏览器： 在“设置”中，使用 browserDevtoolsMcp.install.chromium, install.firefox，以及 install.webkit （默认值：Chromium组）。开 首次安装/升级，分机号叫剧作家 installBrowsersForNpmInstall 根据该选择（除非 使用系统安装的浏览器 位于节点上或平台为节点）。当所选构建已存在于缓存中时，Playwright跳过工作(INSTALLATION_COMPLETE).更改这些设置会触发另一个安装过程；如果MCP会话已在运行，请重新启动它。 安装Playwright浏览器。.. 在命令面板中执行相同的选择UI和 写入这三个设置 为了匹配您的选择，然后运行安装程序（这样侧边栏/设置面板就会保持同步）。
• VSIX/CI： PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 在打包时设置，这样浏览器ZIP就不是扩展的一部分。
• 下载失败（Chromium堆栈）： 如果Playwright的安装步骤失败 铬族 如果请求了（网络、代理、防火墙、Windows上的Winldd等），扩展程序将显示一个通知（中的错误文本 详情)并可能提供 使用谷歌Chrome浏览器 启用 使用系统安装的浏览器 (browserDevtoolsMcp.browser.useSystemBrowser). 谷歌浏览器 必须安装在机器上。Firefox/WebKit仅在安装时会收到一条通用的失败消息。重新启动MCP会话（或 重启服务器)接受后。您也可以打开 使用系统安装的浏览器 随时手动设置。

要跳过浏览器下载（例如，您使用系统浏览器或自定义路径），请设置环境变量 PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 在启动VS代码/光标之前。

配置

快速设置

打开 浏览器工具MCP 资源管理器侧栏中的面板，用于配置常用设置。

完整设置

打开VS代码设置(Ctrl+, / Cmd+,)并搜索“Browser DevTools MCP”或使用以下命令：

Browser DevTools MCP: Open Settings

要立即（重新）下载Playwright二进制文件：

Browser DevTools MCP: Install Playwright Browsers...

可用设置

以下设置作为环境变量传递给MCP服务器。在设置或 浏览器工具MCP 侧边栏面板（子集）；重新启动MCP会话以应用。

将军

安装（激活时下载Playwright浏览器）

浏览器

节点（当平台为 node)

开放遥测

AWS/亚马逊基岩

Figma

高级（MCP）

用法

安装后，MCP服务器自动可供AI助手使用。尝试以下提示：

导航和屏幕截图：

Navigate to https://example.com and take a screenshot
Take a full-page screenshot of the current page
Wait for network to be idle and then take a screenshot

可访问性测试：

Check the accessibility of the current page
Get the ARIA snapshot for the navigation menu
Get the AX tree snapshot with occlusion checking enabled

演出

Get the Web Vitals for https://google.com
What is the LCP score of this page?
Measure Core Web Vitals and give me recommendations

互动：

Fill the login form with test@example.com and click submit
Click the "Sign Up" button and wait for the page to load
Scroll to the bottom of the page

调试：

Show me the console errors on this page
What network requests failed on this page?
Set a tracepoint at line 50 in main.js and capture the call stack
Get probe snapshots after triggering the code path

API模拟：

Mock the /api/users endpoint to return an empty array
Intercept all API requests and add an auth header
List all active stubs and clear them

执行（批处理工具调用+可选页面脚本）：

Use execute to fill the login form and click submit in one call
Run a script that calls callTool('navigation_go-to', { url: '...' }) then callTool('a11y_take-aria-snapshot', {}, true)

可视化界面

可视化仪用户界面截图：

Visualizer UI

Visualizer UI将MCP工具事件渲染为动画场景。UI在以下位置连接到Visualizer WebSocket流 ws://localhost:.

如何打开

1. 打开 Browser DevTools MCP VS代码/光标中的面板。
2. 集 Show Visualizer 到 true.
3. 跑 Browser DevTools MCP: Restart Server.
4. 运行任何MCP工具（例如 navigation_go-to那么 content_take-screenshot).

如果面板未自动打开，请打开“命令选项板”(Cmd+Shift+P)然后跑 Browser DevTools MCP: Show Visualizer.

备选方案（在本地运行Visualizer UI进行开发）：

从repo根目录：

cd visualizer-ui npm install npm run dev

打开 http://localhost:3000 在您的浏览器中。

它是如何工作的（摘要）

• 该扩展在上启动Visualizer WebSocket服务器 browserDevtoolsMcp.visualizer.wsPort.
• 用户界面显示 VIS_WS_PORT 在 visualizer-ui/src/main.ts 并连接到 ws://localhost:.
• 工具事件(run_started, tool_started, tool_finished, run_done等等）在场景中表示。

您应该配置的设置

1. Show Visualizer：设置为 true 以启用webview UI和Visualizer WebSocket服务器。
2. browserDevtoolsMcp.visualizer.wsPort （默认值 3020)：如果端口繁忙，请更改此设置，然后运行 Restart Server.

可用的MCP工具

导航工具

内容工具

交互工具

辅助功能工具

观察性工具

同步工具

Stub工具

React工具

执行

Figma工具

调试工具（非阻塞）

当使用 节点平台 (browserDevtoolsMcp.platform: node)，其他工具： debug_connect, debug_disconnect, debug_get-logs.

发展

先决条件

• Node.js 22+
• VS代码1.96+或光标

构建

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch for changes
npm run watch

# Package extension
npm run package

测试

1. 按 F5 在VS Code/Cursor中启动扩展开发主机
2. 扩展将加载到新窗口中
3. 打开AI聊天（复制或光标AI）并测试MCP工具

故障排除

重新启动MCP服务器

如果您遇到问题，例如MCP服务器无法启动、打开的浏览器已关闭、MCP进程泄漏或您看到其他奇怪的行为，请先尝试重新启动MCP服务器：

1. 打开命令选项板(Ctrl+Shift+P / Cmd+Shift+P)
2. 跑 浏览器DevTools MCP：重新启动服务器

这将注销服务器，停止任何正在运行的MCP进程（例如Cursor启动的进程），并再次注册，以便启动新的进程。

MCP服务器未启动

1. 重新安装扩展或安装新的VSIX——MCP服务器已捆绑；失踪者 dist/index.js 通常意味着安装损坏或部分安装。
2. 检查Node.js 22+是否可用于IDE（扩展主机），以及扩展是否已启用。
3. 检查输出面板中的“浏览器DevTools MCP”日志。

浏览器未启动

1. 跑 浏览器工具MCP：安装Playwright浏览器。.. 并确保 铬 （或您的发动机）已选择，或依赖 install.* 首次安装/升级时的设置。如果Playwright下载失败，请启用 使用系统安装的浏览器 在设置中或选择 使用谷歌Chrome浏览器 当扩展程序提示时（仅限Chromium堆栈；必须安装Chrome）。如果仅使用系统浏览器，则跳过下载。
2. 尝试在设置中禁用无头模式
3. 检查是否需要自定义可执行路径（例如系统浏览器或自定义构建）

设置不适用

更改设置后，重新启动MCP会话：

1. 运行命令 浏览器DevTools MCP：重新启动服务器
2. 或重新加载VS代码/光标窗口(Cmd+Shift+P → “开发人员：重新加载窗口”）

贡献

欢迎投稿！请在上打开问题或提交拉取请求 .

许可证

MIT许可证-请参阅 许可证 了解详情。

链接

• -扩展源代码
• 打开VSX注册表 -扩展页面
• 浏览器开发工具mcp -主MCP服务器（npm）
• VS代码MCP文档
• 模型上下文协议