WebStorm的Chrome DevTools Connect：您的AI代理现在可以与浏览器交互
内容提要
JetBrains发布Chrome DevTools Connect插件，集成于WebStorm 2026.2.1，使AI代理能直接操作Chrome浏览器，查看渲染、控制台日志、网络请求并截图交互。用户无需切换IDE与浏览器，代理可自动复现并修复bug，如结账流程中的价格显示问题。结合Figma Connect，实现设计、编码、浏览器验证全流程在WebStorm内完成。
延伸解读
从“人肉中继”到“代理直连”
过去，AI代理无法直接看到浏览器，开发者需要手动复现bug、描述现象、等待修复，再重复验证。Chrome DevTools Connect让代理能自己打开Chrome、查看渲染和控制台、截图并交互，从而自动复现和验证修复。这减少了IDE与浏览器之间的来回切换，让开发者从“中继”角色中解放出来，专注于决策。
与Chrome DevTools团队合作，免配置集成
该插件基于Chrome DevTools CLI，由JetBrains与Google Chrome DevTools团队合作开发。它作为WebStorm 2026.2.1的内置技能提供，首次使用时只需一次性安装包，无需额外设置或MCP接线。这意味着开发者无需研究或配置浏览器自动化工具，降低了使用门槛。
设计到代码到浏览器验证的闭环
结合此前发布的Figma Connect，WebStorm现在覆盖了从设计导入、编码到浏览器验证的完整流程。Figma Connect将设计意图和规范带入IDE，Chrome DevTools Connect则让代理在浏览器中验证最终效果。这消除了两个关键的环境切换，使整个开发流程在IDE内闭环，提升了效率。
Q&A
WebStorm的Chrome DevTools Connect插件是什么？
Chrome DevTools Connect是JetBrains发布的一个插件，集成于WebStorm 2026.2.1，它允许AI代理直接与Chrome浏览器交互，查看渲染内容、控制台日志、网络请求，并截图和操作页面，无需离开IDE。
Chrome DevTools Connect是如何开发的？
该插件是与Google Chrome DevTools团队合作开发的，基于Chrome DevTools CLI，无需额外设置或MCP接线。
Chrome DevTools Connect如何帮助复现和修复bug？
用户只需描述问题，AI代理会自动在浏览器中执行操作序列来复现bug，读取控制台状态，定位原因，应用修复，并再次验证。例如，对于结账流程中价格显示过时的问题，代理会模拟用户操作，检查状态，修复依赖问题，并确认修复有效。
使用Chrome DevTools Connect需要哪些设置？
首次使用时，WebStorm会提示安装一个包，之后自动运行，无需额外配置或MCP接线。
Chrome DevTools Connect与Figma Connect如何协同工作？
Figma Connect将设计意图、组件规格和设计令牌从Figma导入WebStorm，而Chrome DevTools Connect在编码后提供浏览器验证，两者结合使得设计、编码和浏览器验证的完整工作流程都在WebStorm内完成，无需切换环境。
Chrome DevTools Connect对前端开发工作流程有什么影响？
它消除了在IDE和浏览器之间切换的需要，AI代理可以直接在浏览器中验证和调试，开发者不再需要手动复现bug或向代理描述浏览器状态，从而提高了开发效率。
