AI导哈

浏览器开发工具集成

一个集成了Chrome DevTools MCP和Playwright Agents的开发工具，用于前端性能分析、内存泄漏检测和自动化测试。

  • by LunaInsidious
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 LunaInsidious/test-chrome-devtools-mcp

使用说明

试用仓库

开发流程

npm install
npm run dev

Chrome DevTools MCP试用

以使用React、TypeScript和Vite构建的演示页面为对象，可以确认通过DevTools MCP进行的测量和自动化步骤。

提示示例

  • 请使用Chrome DevTools MCP对http://localhost:5173/performance-pitfall进行性能分析并做出修正。请定量评估修正前后，已修正部分的性能改善情况
  • 请使用Chrome DevTools MCP对http://localhost:5173/memory-leak-lab进行内存泄漏修复。请定量评估修复前后的内存泄漏量，以确认已得到改善
  • 请使用Chrome DevTools MCP检查http://localhost:5173/console-noise中的控制台错误并进行修正

参考文献

Playwright Agents试用

截至2025年10月14日，支持的情况如下。

  • VS Code（Visual Studio Code，简称VS Code）
  • 克劳德·科德
  • OpenCode

参考： Playwright 代理 > 入门指南

此仓库中仅设置了VS Code。如想在其他工具中试用Playwright Agents，请参考上述Reference自行设置。

提示示例

规划者；计划者

  • 请规划用于测试此应用程序基本功能的测试用例

发电机

  • 请生成（情景列表中第n个标题）的测试代码

治疗者；疗愈师

  • 请修正○○的测试失败问题

相关 MCP