chrome-devtools 实践分享

前言

本文主要分享使用 chrome-devtools-mcp 在日常开发的使用，使用该 mcp 相当于你可以直接和 chrome 对话，他可以帮助你完成你希望在 chrome 上完成的各种操作。

我主要使用该 mcp 在一下几个方面：

辅助还原页面/设计稿、修改样式
配合 apifox-mcp 快速联调接口
辅助测试页面功能
获取网页性能数据

配置

需要注意的是，该 mcp 需要 node 版本在 22.12.0 及以上

如果因为项目需要，node版本较低，可以通过以下脚本来使用 nvm 来切换 node 版本

#!/bin/bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
nvm use 20.19.2 > /dev/null 2>&1
exec npx chrome-devtools-mcp@latest "$@"

然后在你的 mcp.json 配置里

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "上面脚本的位置，一般放在 ~/.cursor/scripts/chrome-devtools-mcp.sh",
      "args": []
    },
  }
}

还原设计稿、修改样式

其实严格来说，该 chrome-devtools-mcp 主要还是来获取你当前页面的状态，这样相当于让你的模型根据图片还原设计稿时有了一双眼睛，可以对比当前页面和你提供给他的设计稿之间的差异。

（目前蓝湖还没有官方的mcp，如果希望使用蓝湖专门的mcp可以尝试下lanhu-mcp这个开源的项目。）

实际体验下来，把设计稿导出图片喂给 AI 加上 chrome-devtools-mcp 的加持，页面还原度也只能到 70%～80%，并且也和使用的模型有关。想要完全还原设计稿还需要多轮对话，补充一些细节的修改点。

配合 apifox-mcp 快速联调接口

prompt 如下

@src/js/new_merchandise/create.js 

新品创建的接口为 xxxxxx ，任务清单如下：
1. 使用 apifox-mcp查询这个接口的文档，完善表单字段名
2. 使用 chrome-devtools-mcp 在该页面填入表单数据创建2条数据

首先会使用 apifox-mcp 会找到这个后端维护的这个接口文档，然后帮助我们根据文档的字段来修改我们表单对应的字段，然后 chrome-devtools-mcp 会打开一个测试浏览器页面，输入表单数据并调用接口，完成联调。

自动化测试页面功能

使用 chrome-dev-tools 测试下http://localhost:8080/#/new_merchandise 这个页面，测试的功能清单如下
1. 测试商品名称搜索、提交时间、状态、商户筛选是否生效
2. 测试页面滚动加载功能是否生效
3. 是否有控制台error或者接口报错

并将测试项和结果列出

测试中实际效果
测试效果