跳到主要内容

本文为非官方中文翻译，内容以 OpenAI 官方英文文档为准。
官方来源：https://developers.openai.com/codex/app/browser

应用内浏览器

在 Codex 中预览网页应用并添加评论

应用内浏览器为你和 Codex 提供了线程内已渲染网页的共享视图。在构建或调试网页应用，并且想要预览页面和附加可视化评论时，请使用它。

可将其用于本地开发服务器、基于文件的预览，以及不需要登录的公开页面。对于任何依赖登录状态或浏览器扩展的内容，请使用你的常规浏览器或 Codex Chrome extension。

可以通过工具栏打开应用内浏览器、点击 URL、在浏览器中手动导航，或按下 Cmd+Shift+B（Windows 上为 Ctrl+Shift+B）。

应用内浏览器不支持认证流程、已登录页面、你的常规浏览器配置文件、Cookie、扩展或现有标签页。请将其用于 Codex 无需登录即可打开的页面。

将页面内容视为不受信任的上下文。不要在浏览器流程中粘贴密钥。

Codex 应用展示了对本地网页应用预览的浏览器评论

浏览器使用​

浏览器使用允许 Codex 直接操作应用内浏览器。当 Codex 需要点击、输入、检查渲染状态、截图或在页面中验证修复时，可将其用于本地开发服务器和基于文件的预览。

要使用它，请安装并启用 Browser 插件。然后在任务中要求 Codex 使用浏览器，或直接用 @Browser 引用它。应用会将浏览器使用限制在应用内浏览器中，并允许你在设置中管理允许和阻止的网站。

示例：

使用浏览器打开 http://localhost:3000/settings，复现布局
bug，并且只修复溢出的控件。

除非你已允许某个网站，否则 Codex 在使用该网站前会先询问。将某个站点从允许列表中移除，意味着 Codex 在再次使用它前会重新询问；将某个站点从阻止列表中移除，则意味着 Codex 可以再次发起询问，而不是继续将其视为被阻止。

对于 Chrome 中已登录的网站，请参见 Codex Chrome extension。

预览页面​

  1. 在integrated terminal中启动你应用的开发服务器，或使用本地环境操作。
  2. 通过点击 URL 或在浏览器中手动导航，打开一个无需认证的本地路由、基于文件的页面或公开页面。
  3. 结合代码 diff 查看渲染状态。
  4. 在需要修改的元素或区域上留下浏览器评论。
  5. 请求 Codex 处理这些评论，并将范围保持尽可能小。

示例反馈：

我已经在应用内浏览器中的定价页面上留下了评论。请处理移动端
布局问题，并保持卡片结构不变。

在页面上评论​

当某个 bug 仅在渲染后的页面中可见时，使用浏览器评论向 Codex 提供页面上的精确反馈。

  • 打开评论模式，选择一个元素或区域，并提交评论。
  • 在评论模式下，按住 Shift 并点击以选择一个区域。
  • 点击时按住 Cmd 可立即发送评论。

留下评论后，在该线程中发送一条消息，请求 Codex 处理这些评论。当 Codex 需要做精确的视觉修改时，评论最有用。

良好的反馈应当具体明确：

这个按钮在移动端溢出了。如果放得下，就让标签保持在一行，
否则就换行，但不要改变卡片高度。
这个提示框遮住了光标下的数据点。重新定位提示框，使其保持
在图表边界内。

让浏览器任务范围明确​

应用内浏览器用于审查和迭代。请将每个浏览器任务控制得足够小，以便一次就能审查完成。

  • 指明页面、路由或本地 URL。
  • 指明你关注的视觉状态，例如 loading、empty、error 或 success。
  • 在需要修改的确切元素或区域上留下评论。
  • 在 Codex 修改代码后，审查更新后的路由。
  • 在 Codex 使用浏览器之前，请求它启动或检查开发服务器。

对于仓库更改，请使用审查面板来检查更改并留下评论。