The JetBrains Blog

Chrome DevTools Connect for WebStorm: Your AI agent can now interact with the browser

8.5内容质量
Chrome DevTools Connect for WebStorm: Your AI agent can now interact with the browser

TL;DR · AI 摘要

JetBrains推出Chrome DevTools Connect插件，使WebStorm的AI代理能直接与浏览器交互，减少开发流程中的上下文切换。

核心要点

  • WebStorm 2026.2.1新增Chrome DevTools Connect插件，AI代理可直接操作浏览器
  • 插件通过Chrome DevTools CLI实现，无需额外配置，提升调试效率
  • AI代理可自动复现并修复多步骤流程中的bug，减少人工干预

结构提纲

按章节快速跳转。

  1. §引言

    介绍WebStorm和前端开发中的环境切换问题

  2. ·Chrome DevTools Connect插件

    介绍插件功能和发布版本

  3. ›插件工作原理

    通过Chrome DevTools CLI实现浏览器交互

  4. ·实际应用案例

    修复多步骤流程中的bug示例

  5. ›未来展望

    插件对开发流程的影响和潜在发展

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • Chrome DevTools Connect
    • 功能特性
      • 浏览器交互
      • 自动调试
    • 技术实现
      • Chrome DevTools CLI
    • 应用场景
      • 多步骤流程调试

金句 / Highlights

值得收藏与分享的关键句。

#WebStorm#AI代理#Chrome DevTools#前端开发
打开原文

Chrome DevTools Connect for WebStorm | 浏览器交互

WebStorm

JavaScript 和 TypeScript IDE

关注

  • 关注:
  • X X
  • YouTube YouTube
  • RSS RSS

下载

新闻

版本发布

Chrome DevTools Connect for WebStorm：您的 AI 代理现在可以与浏览器交互

Valeriya Masyachenko

前端开发历来意味着在三个独立的环境中工作：用于规格和原型的设计工具、用于编码的 IDE，以及用于检查一切是否正常运作的浏览器。几天前，我们发布了新的插件 Figma Connect for WebStorm，消除了首次的上下文切换。设计意图、组件规格和设计令牌直接从 Figma 流入 WebStorm，因此代理从实际的设计开始，而不是从设计的描述开始。

这留下了第二次切换未被解决。代理生成代码后，您需要离开 IDE，打开浏览器，检查渲染效果，发现某些问题，再将问题描述回代理，然后重复此过程。浏览器仍然是一个代理无法看到的独立环境。

现在，Chrome DevTools Connect 消除了第二次切换的需要。它作为 WebStorm 2026.2.1 中捆绑的 Chrome DevTools CLI 技能提供，帮助 AI 代理通过 Chrome DevTools 的全部功能与 Chrome 进行交互。当代理首次使用它时，WebStorm 会提示一次性的软件包安装，之后过程将自动完成。

开始使用

代理在浏览器中可以看到和做的事情

当您与 AI 代理一起开发 UI 时，它可以打开 Chrome，检查渲染内容，读取控制台日志和网络请求，截取屏幕截图，并直接与页面交互——无需您离开 IDE 或描述所看到的内容。

当代理认为需要运行时验证，或您要求它时，它会自动调用浏览器。无需额外设置、MCP 连接或研究哪种浏览器自动化工具与您的环境兼容。

该功能与 Google 的 Chrome DevTools 团队合作开发，使用 Chrome DevTools CLI 实现。

实际应用中的变化

考虑一个购物车流程中的多步骤操作错误：用户返回并更新购物车后，订单摘要显示过时的价格。组件在首次加载时渲染正确，代码中也没有明显错误。该错误只有在特定操作序列后才会出现：添加商品 → 进入结账 → 返回 → 修改数量 → 再次继续。

此前，重现此错误需要每次手动点击该操作序列。您会发现过时价格，切换到 IDE，描述所看到的问题，等待代理修复，然后再次点击整个序列以验证。如果修复失败，您需要重复此过程。代理是根据您的描述进行操作——您是唯一进行点击操作的人。使用 Chrome DevTools Connect 后，您可以告诉代理：“如果用户返回并修改购物车内容，订单摘要会显示过时价格，所以请修复并直接在浏览器中验证修复。”

代理会自动完成整个流程，重现错误，从控制台读取过时状态，追踪到缺失的依赖项，应用修复，并再次点击操作序列以确认问题已解决。您仍然参与决策流程，但不再需要在 IDE 和浏览器之间充当传递者。

设计 → 代码 → 浏览器工作流

Figma Connect for WebStorm 是设计到代码工作流的第一部分，它在流程开始时就将设计引入 IDE。现在，Chrome DevTools Connect 是第二部分，浏览器验证将在流程结束时完成。

完整的从设计到代码再到浏览器的工作流程现在完全在 WebStorm 内部完成 – 无需切换工具。

如果你喜欢这个功能，请继续关注，因为还有更多集成即将推出！

发布

WebStorm

  • 分享
  • Facebook
  • Twitter
  • Linkedin

上一篇博客

WebStorm 的 Figma Connect：迈向更优设计到代码体验的第一步