今天，Codex 开发者模式上线了。

如果你之前用编程工具调过前端页面的 Bug，很可能有过这种体验：描述了半天它还是一脸懵，改出来的东西跟你的预期差十万八千里。原因很简单，就是模型和你看到的从来不是同一个画面，它也不会动手去试。

现在不一样了。

Codex 不仅能和你看到同一个网页页面，还能直接操控浏览器帮你做事。点按钮、输文字、截图验证，这些它都会。

打开开发者模式之后，Codex 还能像资深前端工程师那样，直接诊断浏览器里的问题：卡顿是哪个函数造成的、控制台报了什么错、网络请求哪个拖了后腿、页面结构对不对……你指哪，它不仅能"看到"哪，还能直接"动手"改哪。

内置浏览器：让 AI "看到"你看到的

这是这次更新最直观的变化。

以前让 Codex 帮你调 Bug，你得自己截图、反复描述问题，有时为了解释清楚一个布局问题，能来回聊十几轮。现在，你打开 Codex 的内置浏览器，它会直接渲染你的网页——你看到什么，它就看到什么，完全同步。

举个例子：你在页面上发现某个按钮溢出了，直接点那个按钮，留下一句评论："这里溢出了"。Codex 立刻精准定位到你说的那个元素，不用你再多费口舌。

打开内置浏览器有以下几种方式：

• 从工具栏直接打开
• 点击一个 URL
• 手动在浏览器里导航
• 按快捷键 Cmd+Shift+B（Windows 是 Ctrl+Shift+B）

内置浏览器最适合这几类场景：

• 本地开发服务器，比如你跑在 localhost:3000 上的项目
• 文件预览模式
• 不需要登录的公开页面但有些场景它搞不定：需要登录的页面、依赖浏览器扩展的功能、已有的标签页——这些情况你还是得用 Codex 的 Chrome 扩展。

需要注意的是，内置浏览器里的页面内容被视为不受信任的上下文，不要往里面粘贴任何敏感信息，比如密码、Token 之类的。

预览页面：怎么让 Codex 知道你的页面在哪

光有内置浏览器还不够，得告诉 Codex 你的页面在哪。官方文档给了一个具体流程：

第一步：在 Codex 的集成终端里启动你的开发服务器。

第二步：点击一个不需要登录的本地路由、文件预览页面或公开页面，让 Codex 在内置浏览器里打开它。

第三步：对照代码改动（code diff）来 review 渲染结果。Codex 改完代码后，你要亲眼在浏览器里确认效果。

第四步：在有问题的地方留下浏览器评论。

第五步：让 Codex 来处理这些评论，记得把范围控制小一点——一次只修一个问题。

一个典型对话长这样：

"我在定价页面留了几个评论，都是关于移动端布局的。你处理一下，但保持卡片结构不变。"

浏览器评论：比打字更精准的反馈方式。

当一个 Bug 只有在渲染后的页面上才能看出来的时候，文字描述往往不够精准。浏览器评论功能就是来解决这个问题的。

打开 Annotation mode，在你想要评论的元素或区域上点击，提交评论就行了。有几个快捷操作很好用：

• Shift + 点击：可以框选一整块区域，而不是单个元素
• Cmd + 点击（Mac）或 Ctrl + 点击（Windows）：直接发送评论，不用再点确认好的评论是什么样的？官方给了两个正面例子：

This button overflows on mobile. Keep the label on one line if it fits,otherwise wrap it without changing the card height.

（这个按钮在移动端溢出了。能放下就单行显示，放不下就换行，但别改变卡片高度。）

This tooltip covers the data point under the cursor. Reposition the tooltip soit stays inside the chart bounds.

（这个工具提示盖住了光标下的数据点。把它移到图表边界内。）

不好的评论是："这个按钮不太对"。

还有一个很实用的功能：Styling feedback。选中一块区域添加评论时，点击文本输入框旁边的配置图标，可以直接调整样式参数——字体、文本、间距、颜色……调好之后直接在页面上预览效果，满意了再发送。这样 Codex 拿到的指令更精准，省得来回沟通。

开发者模式：CDP 直接用，这才是大招

如果说内置浏览器是让 AI 和你"看到"同一画面，那开发者模式就是让它真正能"动手"的关键。

OpenAI 这次给 Codex 开放了 Chrome DevTools Protocol（CDP） 的访问权限。这是 Chrome 浏览器给开发者提供的底层调试接口，现在 Codex 也会用了。

具体来说，Codex 可以帮你做这些：

Profile JavaScript 性能 —— 页面卡顿了？Codex 能抓一段性能轨迹，告诉你哪个函数最耗时。

检查控制台输出 —— 控制台报了一堆错，不知道哪个是根源？Codex 能帮你梳理，找到真正的罪魁祸首。

审查网络流量 —— 接口请求慢？Codex 能分析每个请求的耗时，看看到底谁在拖后腿。

检查页面状态 —— DOM 结构对不对、CSS 有没有意外覆盖、样式有没有生效……这些 Codex 都能直接看。

开启方式：Settings > Browser > Developer mode > Enable full CDP access。不过 OpenAI 也特别说明，这个权限很大，Codex 在检查任何网站之前，都会先征求你的同意。

另外要记住两个调用方式的区别：内置浏览器用 @Browser ，Chrome 浏览器用 @Chrome ——后者需要先安装 Codex 的 Chrome 扩展。

浏览器操作：Codex 替你点按钮、输文字、截截图

内置浏览器加上开发者模式，Codex 能做的就不仅仅是"看"了——它还能直接操作。

你让它打开一个本地页面，它能：

• 点击按钮、输入文字，帮你复现一个交互 Bug
• 截一张页面截图，展示问题所在
• 检查页面渲染状态，看看元素有没有按预期显示
• 下载页面需要的资源文件
• 运行只读的 JavaScript，检查某些 DOM 状态
• 验证它自己给出的修复是不是真的生效了使用方法很简单：先安装并启用 Browser 插件，然后在任务里让 Codex 使用浏览器，或者直接用 @Browser 引用。

一个典型场景：

"用浏览器打开 http://localhost:3000/settings，复现那个布局 Bug，只修复溢出的控件。"

Codex 会自动打开页面，定位到问题区域，修复，然后告诉你结果。

关于权限管理：Codex 在使用任何网站之前都会先询问，除非你已经把这个网站加入允许列表。如果你想取消授权，从允许列表里移除即可；如果某网站老是弹窗让你确认，加入阻止列表就好了。

怎么用好这次更新？

结合官方文档的建议，有几个值得注意的最佳实践：

保持任务粒度小。内置浏览器是用来 review 和迭代的，每次让 Codex 处理一个问题就行。别让它一次改完全站。

指明页面和状态。告诉 Codex 具体是哪个页面、哪种状态（加载中、空状态、报错、成功），越具体越好。"首页的加载状态"比"首页"有用得多。

评论要具体。不好的评论："这个按钮不太对"。好的评论："这个按钮在 375px 宽度下溢出了，能放下就单行，放不下就换行，但别改变卡片高度"。

修复后要 review。Codex 改完代码后，用内置浏览器再看一遍，确认问题真的解决了。

必要时让 Codex 先启动开发服务器。在让它用浏览器之前，先让它检查或启动开发服务器，免得它去访问一个还没启动的服务。

对于代码仓库的改动，官方还建议配合 review pane 来检查改动内容、留下评论，这样 Codex 拿到的上下文更完整。

写在最后。

这次更新让 Codex 从一个"代码助手"，变成了真正的"浏览器调试搭档"。

以前，你描述问题靠打字，AI 靠脑补，它只能在你给的代码里来回扫；后来 AI 能看到同一个页面了，但它依然不会动手。现在，三件事打通了——你指出问题，Codex 直接在浏览器里复现问题、诊断原因、动手修复。

对于前端开发者来说，这可能是AI编程助手更好用的一个转折点。

参考资料：

https://developers.openai.com/codex/app/browser#developer-mode