本文介绍在开发 electron 应用时如何使用 chrome-devtools-mcp，比较简单。
安装 chrome-devtools-mcp 比较简单，找到 GitHub 仓库，在 README 中能找到各种工具的安装方式，这里就不介绍了。
以 vscode 为例，推荐在项目目录下单独配置，避免多个项目之间配置无法共享。chrome-devtools-mcp 的基本配置如下：
{
"servers": {
"chrome-devtools-mcp": {
"type": "stdio",
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
参考 chrome-devtools-mcp 中的文档 - Manual connection using port forwarding，也就是通过 --browser-url 选项连接到正在运行的 Chrome 实例。适用于在沙箱环境中运行 MCP 服务器，且不允许启动新的 Chrome 实例。那 electron 就符合这种条件。
首先，我们需要在 chrome-devtools-mcp 配置中新增--browser-url 配置项，端口号随意
{
"servers": {
"chrome-devtools-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
// 加上这一个参数，端口号随意
"--browser-url=http://127.0.0.1:9222"
]
}
}
}
然后在 electron 应用中增加以下开发环境配置来启动开发环境调试端口，端口号必须与你在 mcp 中browser-url 指定的端口号相同。
import isDev from "electron-is-dev";
if (isDev) {
// 启用远程调试端口
app.commandLine.appendSwitch("remote-debugging-port", "9222");
// 可选，开发环境数据隔离
app.setPath("userData", join(app.getPath("appData"), `electron-mcp-dev`));
}
就这么简单两步，接下来就能使用 chrome-devtools-mcp 执行你想做的任何自动测试了。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。