在 electron 中使用 chrome-devtools-mcp

💡 原文中文,约1200字,阅读约需3分钟。
📝

内容提要

本文介绍了如何在开发 Electron 应用时使用 chrome-devtools-mcp。安装简单,建议在项目目录下配置。通过 --browser-url 连接到运行中的 Chrome 实例,适用于沙箱环境。只需两步配置即可进行自动测试。

🎯

关键要点

  • 本文介绍在开发 Electron 应用时如何使用 chrome-devtools-mcp。

  • 安装 chrome-devtools-mcp 比较简单,可以在 GitHub 仓库的 README 中找到安装方式。

  • 建议在项目目录下单独配置 chrome-devtools-mcp,以避免多个项目之间的配置冲突。

  • 基本配置示例包括设置服务器类型为 stdio,使用 npx 命令安装 chrome-devtools-mcp。

  • 可以通过 --browser-url 选项连接到正在运行的 Chrome 实例,适用于沙箱环境。

  • 需要在 chrome-devtools-mcp 配置中新增 --browser-url 配置项,指定端口号。

  • 在 Electron 应用中增加开发环境配置,确保调试端口与 mcp 中的 browser-url 指定的端口号相同。

  • 完成以上两步后,可以使用 chrome-devtools-mcp 执行自动测试。

延伸问答

如何在 Electron 应用中安装 chrome-devtools-mcp?

可以在 GitHub 仓库的 README 中找到安装方式,使用 npx 命令安装。

为什么建议在项目目录下单独配置 chrome-devtools-mcp?

这样可以避免多个项目之间的配置冲突。

如何通过 --browser-url 选项连接到 Chrome 实例?

在 chrome-devtools-mcp 配置中新增 --browser-url 配置项,指定运行中的 Chrome 实例的端口号。

在 Electron 应用中如何设置调试端口?

需要在应用中增加开发环境配置,确保调试端口与 mcp 中的 browser-url 指定的端口号相同。

使用 chrome-devtools-mcp 进行自动测试需要哪些步骤?

只需完成安装和配置两步,即可使用 chrome-devtools-mcp 执行自动测试。

chrome-devtools-mcp 适用于哪些环境?

它适用于沙箱环境,特别是在不允许启动新的 Chrome 实例的情况下。

➡️

继续阅读