【Cursor实战】提高前端开发效率的两个MCP，无需打开控制台也可轻松改bug

前言

小伙伴们大家好，我是小溪，见字如面。前端小伙伴或者开发过前端页面的小伙伴都应该清楚，前端开发过程中是离不开浏览器控制台的，无论是调整样式还是调接口，都需要在控制台获取页面信息和日志信息，这些信息的获取在我们整个开发周期占据了不小的比例。今天这两个MCP使用好将会大幅度降低我们的开发周期中的联调时间。

对以往实战案例感兴趣的小伙伴也可以看往期：

Playwright MCP

Playwright MCP简介

关于Playwright MCP我们之前也已经多次使用了，这里就不再啰嗦了，感兴趣的小伙伴可以看往期内容：

获取Playwright MCP

在mcp.so官网首页即可找到 Playwright MCP，进入MCP详情获取配置

在Cursor中配置MCP

在Cursor配置->【MCP】->【Add new global MCP server】添加一个新的MCP

在 mcp.json 添加配置

perl 复制代码

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

配置完成后等待mcp服务状态变为绿色即可

在Playwright MCP工具列表可以看到有两个可能是我们需要的工具，一个是 browser_console_messages，一个是 browser_network_requests

基本使用

使用Playwright需要先行安装Chrome、Edge 或 Firefox浏览器

Playwright MCP的使用也比较简单，比如我们要在浏览器打开网页，我们可以直接输入以下提示词

稍等片刻就可以看到Playwright MCP使用受控模式（非用户模式，不会包含之前登录过的账号信息）帮我们打开浏览器并访问百度

1）获取控制台信息

获取当前打开页面的控制台信息，只需要输入提示词

复制代码

获取控制台日志信息
或者
使用browser_console_message获取控制台日志信息

可以看到获取到的信息和在浏览器中右键【检查】->【Console】获取的信息一致

2）获取接口请求信息

获取当前打开页面的接口请求信息，只需要输入提示词

复制代码

获取接口请求信息
或者
使用browser_network_requests获取接口请求信息

开发示例

首先我们模拟一个前端开发场景来验证Playwright MCP在前端报错和接口异常中的表现

diff 复制代码

我想模拟一个前端开发场景来验证Playwright MCP在前端报错和接口异常中的表现
- 提供一个简单的NodeJS服务接口，接口状态返回500
- 提供一个HTML页面请求上面接口，制造一个前端报错可以在Console中打印出来
- 所有内容更输出到demo3目录

生成完后，我们将会拥有一个HTML和一个Node接口服务

首先在命令行终端输入命令启动Node服务

arduino 复制代码

$ npm run start

双击【index.html】在浏览器中打开右键【检查】查看【Console】和【Network】信息

报错信息构建完成后，接下来就可以在Cursor中尝试获取浏览器中的错误信息了

复制代码

页面报错了，查看控制台和网络请求信息帮我分析错误原因，先不进行修复

可以看到在不打开页面的情况下，Cursor获取到了页面的两个主要的报错信息，获取到之后尝试使用Cursor进行修复

复制代码

基于上面分析的报错信息，帮我修复问题

Cursor在修复完成后还会调用Playwright MCP工具点击验证查看直到修复完成结果，这个操作值得给个赞👍🏻。

BrowserTools MCP

BrowserTools MCP简介

BrowserTools MCP是一款强大的浏览器监控和交互工具，MCP使人工智能驱动的应用程序能够通过 Chrome 扩展程序捕获和分析浏览器数据。

获取BrowserTools MCP

在mcp.so官网检索BrowserTools MCP，进入MCP详情可以查看使用配置

BrowserTools MCP的配置需要三步操作

BrowserTools MCP Chrome扩展程序：在Chrome浏览器安装扩展插件用于获取浏览器中的信息
BrowserTools MCP：为MCP客户端提供服务
BrowserTools Server：为BrowserTools MCP Chrome 扩展程序和BrowserTools MCP提供中转服务

BrowserTools MCP配置

1）安装浏览器插件

进入Chrome浏览器，进入扩展程序管理，启用【开发者模式】点击【加载已解压的扩展程序】

找到下载到本地的 BrowserTools MCP Chrome扩展程序目录添加

2）在Cursor中配置MCP

在 mcp.json 添加配置

perl 复制代码

{
  "mcpServers": {
    "browser-tools-mcp":{
      "command":"npx",
      "args":[
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

配置完成后等待mcp服务状态变为绿色即可

在BrowserTools MCP工具列表可以看到 getConsoleLogs、getConsoleErrors、getNetworkErrors、getNetworkLogs 4个工具可能是我们想要的

3）启动Node服务

在终端命令行输入命令启动BrowserTools Server

ruby 复制代码

$ npx @agentdeskai/browser-tools-server@latest

看到如下信息表示服务启动成功

打开浏览器右键【检查】->【BrowserToolsMCP】

看到如下信息，表示日志服务连接成功

基本使用

为了简便，我们以上面前端开发场景为例进行测试。

1）获取控制台信息

获取当前打开页面的控制台信息，只需要输入提示词

复制代码

获取控制台日志信息
或者
使用getConsoleLogs获取控制台日志信息
或者
使用getConsoleErrors获取控制台日志信息

根据自己的需求指定使用工具或者让Cursor自行选择，BrowserTools MCP 这里划分的更精细，可以选择获取正常日志也可以只选择获取错误日志，避免了获取过多日志对AI判断的影响

2）获取选中的元素

在浏览器中选择标签元素

在Cursor中获取标签元素内容，可以输入类似如下提示词

复制代码

获取当前选择的元素

借助这个功能，我们就有了更多可操作空间，比如我们可以直接对指定标签内容进行修改

复制代码

为当前选中标签添加一个好看的渐变背景并在说明前添加一个iconfont

修改完成后刷新浏览器页面，可以看到Cursor按照我们的要求为我们指定修改了的标签内容，这对于前端开发来说真是一个利器，我们无需再写一大堆提示词来告诉Cursor我们要修改的代码部分，精准做到了指哪打哪👍。

3）获取接口请求信息

获取当前打开页面的接口请求信息，只需要输入提示词

复制代码

获取接口请求信息
或者
使用getNetworkErrors获取接口请求信息
或者
使用getNetworkLogs获取接口请求信息

开发示例

同样我们在Cursor中尝试获取浏览器中的错误信息并修复

复制代码

页面报错了，查看控制台和网络请求信息帮我分析错误原因并修复

可以看到Cursor也是先调用了BrowserTools MCP工具获取了控制台和网络信息，并根据问题完成了问题修复，不同的是这次Cursor并没有帮我们完成点击验证部分操作。

Playwright MCP和BrowserTools MCP的区别

浏览器支持	配置	工具	浏览器模式	是否支持多标签	获取元素标签
Playwright MCP	支持Chrome、Edge、Firefox浏览器	配置简单	提供获取日志、网络、操控浏览器等工具	受控模式	支持，可以指定页签	不支持
BrowserTools MCP	支持Chrome浏览器	配置复杂	提供获取日志、网络、性能测试等工具	用户模式	暂不支持，默认获取第一个页签	支持

总结

Playwright MCP和BrowserTools MCP两个MCP都可以满足在不打开浏览器控制台的情况下获取基本的日志和请求信息，两者提供的工具略有不同，前者为统一获取，后者则是做了分类获取；其次两个工具的侧重点有所不同，Playwright MCP更侧重提供操控浏览器的能力，BrowserTools MCP则更侧重提供元素选择和性能审查能力，小伙伴们可以根据侧重点选择当然也可以一起使用。

友情提示

见原文：【Cursor实战】提高前端开发效率的两个MCP，无需打开控制台也可轻松改bug

本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。