CyberAgent 是日本领先的 IT 公司，提供各种在线服务，包括热门的 Ameba 博客平台。该团队面临着一个重大挑战，即运行时错误难以通过自动化测试检测到，需要耗时的人工干预。
本文档探讨了 CyberAgent 如何使用 Chrome 开发者工具 Model Context Protocol (MCP) 服务器从手动流程转变为自动化工作流，从而节省开发者时间并提高测试流程的可靠性。
挑战：手动且有限的工作流程
Ameba 设计系统 Spindle 是一组可重复使用的界面组件，用于构建博客平台的界面。它依赖于 Storybook 进行界面组件开发和测试。
以前，CyberAgent 处理运行时错误的工作流程是一个重复的手动循环。开发者会在浏览器中检查每个组件，应用修复，然后再次检查。由于网页和组件数量众多，这种依赖视觉确认的方式存在局限性，难以发现所有 bug。
解决方案：使用 Chrome DevTools MCP 调试代理
为了克服这一挑战，该团队求助于 Chrome 开发者工具 MCP 服务器。 在按照官方新手入门指南完成简单的设置后，他们立即指示 AI 智能体 (Claude) 自动执行整个调试工作流程。
只需一个提示，代理就可以通过处理 Chrome 开发者工具 MCP 捕获的浏览器状态信息与开发者工具进行交互；访问文件系统上下文，并读取控制台日志。然后，它自主识别错误并实施修复，无需人工干预。
他们使用的初始提示如下：
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
AI 代理继续审核 Storybook 实例，浏览整个故事以读取错误、应用代码更正并确认每次修复是否成功。
影响：从手动检查到自动修复
效果很快就显现出来了。在约 1 小时内，AI 代理自主审核了 Spindle 设计系统中的所有 32 个组件和 236 个故事。
虽然该代理识别并修复了一个运行时错误和两个警告，但实验的真正价值在于确认了负面结果：确认了绝大多数库都没有错误，而无需开发者手动点击数百个状态。
以前，这种全面的审核在视觉上非常耗时，而且容易出现人为疏忽。通过将这项工作分流到 Chrome DevTools MCP，CyberAgent 实现了以下目标：
- 100% 的审核覆盖率：该代理机械地验证了每个故事，确保“干净”的组件实际上是干净的，这种程度的尽职调查很难通过人工方式实现。
- 零假负例：与可能会遗漏视觉运行时异常的自动化测试套件不同，MCP 服务器允许代理验证实际的浏览器状态，从而确保高可靠性。
- 认知分流：开发者可以信任系统来处理重复的“繁重工作”，从而专注于复杂的逻辑，而不是例行检查。
正如 Web 开发者 Kota Yanagi 所说，这种做法的好处在于责任的转移：
“以前，我需要在浏览器中手动执行运行时错误和警告检查，现在可以轻松地将这些检查任务分流给 Gemini。我还喜欢现在可以用自然语言描述复杂操作，让该工具直接从读取错误日志到解决问题。
这种自动化工作流程的成功甚至促使 CyberAgent 更新了其 AI 代理的内部 Spindle Agents 指南。现在，该指南将 Chrome 开发者工具 MCP 确立为 Claude 的默认调试服务器，正式将其使用确立为最佳实践，并展示了他们对这一新的 AI 赋能流程的信心。
具体修复已在两个拉取请求中实现，您可以在 GitHub 上查看这些请求：
CyberAgent 进一步优化了提示，并发布了此最终输出。
反馈和未来计划
CyberAgent 对 Chrome DevTools MCP 中提供的灵活性和选项数量感到满意。他们还提供了宝贵的反馈意见，以供我们日后改进，并指出虽然该工具功能强大，但使用其更高级的功能需要一定的用户知识。
展望未来，该团队有兴趣与开发者工具的“性能”面板进行更深入的集成。他们设想的工作流程是，客服人员可以先验证核心网页指标，然后使用“性能”面板进行更深入的性能分析，以分析并建议改进措施。
CyberAgent 的开发者专家 Kazunari Hara 分享了他的惊叹，强调了该工具的效率和未来应用潜力：
“当我看到浏览器直接从日志中自动修复错误时，我感到非常惊讶。以前容易遗漏或耗时较长的任务现在可以可靠地自动化完成，从而提高开发效率。由于 Chrome 开发者工具 MCP 在真实的运行时环境中提供了如此多的功能，我预计它在未来会派上许多用场。”
总结
通过将 Chrome 开发者工具 MCP 集成到其工作流程中，CyberAgent 成功地自动执行了一项复杂且耗时的调试任务。他们的经验表明，AI 赋能的工具在提高开发者工作效率方面具有巨大潜力。
该流程实现了完全自动化，无需人工检查，并确保不会遗漏任何错误。虽然当前实现已证明其价值，但 CyberAgent 的反馈突显了令人期待的未来，届时 Chrome 开发者工具 MCP 将能够直接在浏览器中为他们实现更复杂的性能分析和优化任务。