DevTools

嵌入式浏览器让你可以访问完整的 Chrome DevTools —— 与常规 Chrome 窗口中使用的检查器、控制台和网络监控器相同。用它来调试 AI agent 构建的内容、检查 JavaScript 错误或查看请求的构造方式。

打开 DevTools

点击浏览器面板标题栏中的 DevTools 按钮（🔧）。Chrome DevTools 会在一个独立窗口中打开，与你的工作区并列。你可以将此窗口放在任何方便的位置 —— 大多数开发者会把它放在第二个显示器上或停靠在浏览器面板下方。

你也可以像在 Chrome 中一样打开 DevTools：在浏览器面板内的页面上任意位置右键点击，然后选择 检查。DevTools 会打开，Elements 标签页会聚焦到你右键点击的元素上。

可用功能

完整的 DevTools 工具集都可用：

• Elements —— 检查和修改页面上任何元素的 HTML 和 CSS。点击树中的元素会在浏览器中高亮它，或点击页面上的元素会在树中找到它。内联编辑样式来尝试更改，无需修改源文件。
• Console —— 查看 console.log 输出、JavaScript 错误和警告。直接在控制台中运行 JavaScript 表达式来测试，无需编辑文件。
• Network —— 监控你的应用发出的每个 HTTP 请求。查看请求头、响应体、时间和状态码。用于检查 API 调用是否正确发送以及响应是否正常。
• Sources —— 使用断点逐步调试 JavaScript。设置断点，在浏览器中触发动作，执行会暂停以便你检查变量值。
• Application —— 检查本地存储、会话存储、cookie 和 IndexedDB。用于调试认证状态或存储在浏览器中的任何内容。

常见调试场景

检查 AI agent 构建的内容： 打开 Elements 面板并探索 HTML 结构。这可以告诉你 agent 是否正确连接了所有内容 —— 正确的类名、正确的嵌套和正确的属性。

查找 JavaScript 错误： 在加载页面前打开 Console。任何未捕获的错误都会在这里显示，带有文件名和行号。将错误信息分享给你的 AI agent，让它修复根本原因。

调试 API 调用： 打开 Network 标签页，点击应用中触发请求的操作（如点击登录按钮）。请求会出现在列表中。点击它查看完整的请求和响应 —— 用于诊断认证问题或格式错误的请求体。

提示： 在 AI agent 进行更改时保持 Console 标签页打开。错误会在页面上可见之前就出现在这里，让你更早获得需要修复的反馈。