Token导航 LogoToken导航

MCP Server · 浏览器工具

Browser Devtools MCP Vscode Extension

一款基于Playwright的浏览器自动化和调试工具，集成于VS Code和Cursor IDE，支持AI助手交互、网页测试、调试和自动化任务。

stdio官方级别未说明来源级核验工具 44vsce
浏览器自动化调试工具TypeScriptCursorVS Code

快速开始

打开主来源页面GitHub 仓库
作者 / 组织
serkan-ozal
提供方
serkan-ozal
运行时
Node.js

工具数量

44

来源目录标注

资源数量

0

来源目录标注

提示词数量

0

来源目录标注

GitHub Star

45

仓库热度

收录来源

1 个

MCP World

选型结论

Browser Devtools MCP Vscode Extension 属于浏览器工具类 MCP Server，公开资料标注 44 个工具，通过stdio 本地进程接入，适配 Cursor、VS Code，有可以直接复制的安装命令；接入前要先准备 会话凭据。

分类

浏览器工具

传输方式

stdio

认证方式

会话凭据

部署方式

公开资料未说明

安装与配置

安装命令

npx vsce package

客户端配置示例

{
  "mcpServers": {
    "browser-devtools-mcp-vscode-extension": {
      "command": "npx",
      "args": [
        "vsce",
        "package"
      ]
    }
  }
}

按公开安装命令拼出来的示例，字段名和参数以仓库 README 为准；带 YOUR_API_KEY 这类占位符的位置记得换成自己的值。

上手步骤

  1. 1

    准备运行环境

    stdio 服务在本地起进程，需要先装好 Node.js，再按安装命令拉取依赖。

  2. 2

    安装服务

    复制下面的安装命令执行；命令里带占位符的位置换成自己的密钥或路径。

  3. 3

    写入客户端配置

    在客户端的 MCP 配置里填启动命令和参数，保存后完全退出客户端再打开，让新配置生效。

  4. 4

    验证是否可用

    连接成功后客户端会列出 44 个工具，随便调一个只读工具确认能返回结果。

接入前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

详细介绍

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

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会话以应用。

将军
设置默认值说明
browserDevtoolsMcp.enabletrue启用或禁用扩展（和MCP服务器）
browserDevtoolsMcp.telemetry.enabletrue允许匿名安装/卸载遥测（请参阅 遥测)
browserDevtoolsMcp.platform"browser"MCP平台： browser （网络自动化）或 node （Node.js调试）
安装（激活时下载Playwright浏览器）
设置默认值说明
browserDevtoolsMcp.install.chromiumtrue首次安装/升级时使用的浏览器组选择；更改它会触发Playwright安装过程
browserDevtoolsMcp.install.firefoxfalse首次安装/升级时使用的浏览器组选择；更改它会触发Playwright安装过程
browserDevtoolsMcp.install.webkitfalse首次安装/升级时使用的浏览器组选择；更改它会触发Playwright安装过程
浏览器
设置默认值说明
browserDevtoolsMcp.browser.headlesstrue在无头模式下运行浏览器
browserDevtoolsMcp.browser.persistentfalse启用持久浏览器上下文
browserDevtoolsMcp.browser.userDataDir""持久用户数据目录
browserDevtoolsMcp.browser.useSystemBrowserfalse使用系统浏览器而不是捆绑
browserDevtoolsMcp.browser.executablePath""自定义浏览器可执行路径
browserDevtoolsMcp.browser.locale""浏览器区域设置（例如en-US、tr tr）
browserDevtoolsMcp.browser.cdp.enablefalse启用CDP连接模式（仅限Chromium）。
browserDevtoolsMcp.browser.cdp.endpointUrl""可选CDP端点(http://host:port 或 ws://...).
browserDevtoolsMcp.browser.cdp.openInspecttrue环回CDP故障时，打开 chrome://inspect/#remote-debugging Chrome运行时。
browserDevtoolsMcp.browser.consoleMessagesBufferSize1000缓冲区的最大控制台消息数
browserDevtoolsMcp.browser.httpRequestsBufferSize1000缓冲区的最大HTTP请求数
节点（当平台为 node)
设置默认值说明
browserDevtoolsMcp.node.inspectorHost""Docker的检查器主机（例如host.Docker.internal）
browserDevtoolsMcp.node.consoleMessagesBufferSize1000节点进程中缓冲的最大控制台消息数
开放遥测
设置默认值说明
browserDevtoolsMcp.opentelemetry.enablefalse启用OpenTetry仪器
browserDevtoolsMcp.opentelemetry.serviceName"frontend"跟踪服务名称
browserDevtoolsMcp.opentelemetry.serviceVersion""跟踪服务版本
browserDevtoolsMcp.opentelemetry.assetsDir""OpenTetry资产目录
browserDevtoolsMcp.opentelemetry.instrumentationUserInteractionEvents""要插入的逗号分隔事件（默认：单击）
browserDevtoolsMcp.opentelemetry.exporterType"none"出口商： none, console, otlp/http
browserDevtoolsMcp.opentelemetry.exporterUrl""OTLP收集器URL
browserDevtoolsMcp.opentelemetry.exporterHeaders""收集器的HTTP标头
AWS/亚马逊基岩
设置默认值说明
browserDevtoolsMcp.aws.region""基岩AWS区域
browserDevtoolsMcp.aws.profile""AWS配置文件名称
browserDevtoolsMcp.bedrock.enablefalse为AI功能启用基岩
browserDevtoolsMcp.bedrock.imageModelId""图像嵌入模型ID
browserDevtoolsMcp.bedrock.textModelId""文本嵌入模型ID
browserDevtoolsMcp.bedrock.visionModelId""视觉模型ID
Figma
设置默认值说明
browserDevtoolsMcp.figma.accessToken""Figma API访问令牌
browserDevtoolsMcp.figma.apiBaseUrl""Figma API基本URL（默认值：https://api.figma.com/v1)
高级（MCP）
设置默认值说明
browserDevtoolsMcp.toolOutputSchemaDisablefalse从MCP注册中省略工具输出模式（可以减少令牌使用）
browserDevtoolsMcp.availableToolDomains""启用逗号分隔的域（例如导航、交互、a11y）。空=全部。浏览器：a11y、内容、调试、figma、交互、导航、o11y、反应、运行、存根、同步。节点：调试，运行。

用法

安装后，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将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工具

导航工具

工具说明
navigation_go-to导航到URL
navigation_reload重新加载页面
navigation_go-back-or-forward历史上的后退或前进（方向：后退前进）

内容工具

工具说明
content_take-screenshot截图（整页或元素）
content_get-as-html获取带有过滤选项的页面HTML
content_get-as-text获取可见文本内容
content_save-as-pdf将页面另存为PDF

交互工具

工具说明
interaction_click单击元素
interaction_fill填写输入字段
interaction_hover将鼠标悬停在元素上
interaction_scroll滚动页面或元素
interaction_press-key按键盘键
interaction_drag拖放
interaction_select选择下拉选项
interaction_resize-viewport调整视口大小（Playwright模拟）
interaction_resize-window调整浏览器窗口大小（操作系统级别）

辅助功能工具

工具说明
a11y_take-aria-snapshot获取ARIA快照（YAML格式）
a11y_take-ax-tree-snapshot使用可视化诊断获取AX树

观察性工具

工具说明
o11y_get-web-vitals获取网络重要信息（LCP、INP、CLS、TTFB、FCP）
o11y_get-console-messages通过筛选获取控制台日志
o11y_get-http-requests通过过滤获取网络请求
o11y_get-trace-id获取当前OpenTetry跟踪ID
o11y_new-trace-id生成新的跟踪ID
o11y_set-trace-id为分布式跟踪设置跟踪ID

同步工具

工具说明
sync_wait-for-network-idle等待网络空闲

Stub工具

工具说明
stub_mock-http-response模拟HTTP响应
stub_intercept-http-request拦截和修改请求
stub_list列出已安装的存根
stub_clear清除存根

React工具

工具说明
react_get-component-for-element获取DOM元素的React组件
react_get-element-for-component获取React组件的DOM元素

执行

工具说明
execute通过JavaScript在一个请求中批量执行多个工具调用；使用 callTool(name, input, returnOutput?) 调用工具。在浏览器平台上，脚本具有 page （剧作家佩奇） page.evaluate(), page.locator()等等。减少往返和代币使用。

Figma工具

工具说明
figma_compare-page-with-design将页面与Figma设计进行比较

调试工具（非阻塞）

工具说明
debug_put-tracepoint设置跟踪点（捕获调用堆栈）
debug_put-logpoint设置日志点（计算表达式）
debug_put-exceptionpoint配置异常断点（无、未捕获、全部）
debug_add-watch添加监视表达式（在每次跟踪点命中时计算）
debug_remove-probe按类型和id删除跟踪点、日志点或监视
debug_list-probes列出跟踪点、日志点和/或监视
debug_clear-probes清除跟踪点、日志点和/或监视表达式
debug_get-probe-snapshots获取跟踪点、日志点和/或异常点快照
debug_clear-probe-snapshots清除探测器快照（可选类型，probeId）
debug_status获取调试状态（探测计数、异常点状态）
debug_resolve-source-location通过源映射将捆绑包位置解析为原始源

当使用 节点平台 (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许可证-请参阅 许可证 了解详情。

链接

工具与能力

工具数量

44

资源数量

0

提示词数量

0

能力标签

浏览器自动化TypeScript本地部署网页测试调试工具AI助手集成Playwright

支持客户端

CursorVS Code

数量来自来源目录的标注，具体工具清单以官方文档为准。

典型使用场景

自动操作网页

打开页面、点击、填表，把浏览器动作交给模型执行。

抓结构化数据

把页面内容整理成表格或 JSON，省掉手工复制粘贴。

走一遍关键流程

按步骤检查页面是否正常，回归时少漏环节。

选择建议

值得选的地方

  • 工具数量 44 个，一次接入能覆盖的操作比单点工具更全。
  • 有现成的安装命令，不用自己找入口，照着跑就能起服务。
  • 已经适配 Cursor、VS Code，换客户端不用重新研究配置。

先想清楚的地方

  • stdio 方式要求本地装好 Node.js，换机器要重新装一遍。
  • 需要自备会话凭据，没有凭据没法直接试。
  • 第三方目录整理，版本更新和行为细节以官方仓库为准。

更适合

  • 需要在浏览器工具场景里让模型直接调用外部能力的人。
  • 已经在用 Cursor 的用户，接入路径最短。
  • 想先快速试一下、能接受在本地跑服务的人。

不太适合

  • 完全不想在本地装环境的人。
  • 暂时拿不到会话凭据的人。
  • 需要厂商级 SLA 和技术支持的生产环境。

同类对比

5 个同类
MCP Server工具数传输方式安装命令收录来源最后核验
Browser Devtools MCP Vscode Extension

MCP World · 本页

44stdio有1 个2026-05-17
Fetch 9a2682de

MCP.so

1SSE有3 个2026-05-17
Browser 738d52bc

MCP World

0stdio有1 个2026-05-17
Playwright MCP Server

MCP.so

21stdio有4 个2026-05-17
Skyvern MCP

MCP World

0stdio有2 个2026-05-17

按同分类和工具数量挑出最接近的几条，字段以各自详情页为准。

常见问题

5 条

Browser Devtools MCP Vscode Extension 怎么安装？

公开资料给出的安装命令是 npx vsce package，运行环境为 Node.js。装完后按客户端要求写进 MCP 配置，重启客户端生效。

Browser Devtools MCP Vscode Extension 怎么在 Claude Desktop、Cursor 里配置？

它是stdio 本地进程，客户端配置里要写启动命令和参数，运行环境是 Node.js；保存后完全退出客户端再打开，配置才会生效。

Browser Devtools MCP Vscode Extension 收费吗？

本站只整理公开资料，不代收费用，也没有标注具体价格。是否收费取决于服务本身和背后的接口额度，正式使用前按官方说明确认。

Browser Devtools MCP Vscode Extension 需要 API Key 吗？

公开资料标注的认证方式是会话凭据，也就是要先拿到凭据才能连上；凭据只填在自己本地的配置里，不要写进公开仓库。

Browser Devtools MCP Vscode Extension 支持哪些客户端？

公开资料标注支持 Cursor、VS Code；其他客户端只要能配置 MCP Server，也能用同样的命令或地址接入。

来源信息

MCP World

browser-devtools-mcp-vscode-extension

一款基于Playwright的浏览器自动化和调试工具，集成于VS Code和Cursor IDE，支持AI助手交互、网页测试、调试和自动化任务。

www.mcpworld.com

/detail/974ebe06a530b3ff9b0075ad16a7c8b8

来源标签

浏览器自动化TypeScript本地部署网页测试调试工具AI助手集成Playwright

来源分类路径

浏览器自动化

继续浏览同类 MCP

更多浏览器工具 MCP（2,803）返回 MCP 目录

上一个 MCP

Browser Devtools MCP

A Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.

下一个 MCP

Browser Devtools Skills

一款用于浏览器自动化、测试和调试的工具，支持内容提取、用户交互、调试等功能。