Codex支持实时预览与所见即所得编辑：启动Browser预览后可圈选元素并用自然语言调整样式，自动映射源码；支持自动检测本地服务端口或手动配置URL；提供复现问题、Developer mode调试及截图辅助定位三种验证方式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在本地开发过程中实时看到HTML/CSS/JS改动效果，并基于渲染后的页面直接调整样式或结构，而不是反复切屏、保存、刷新、比对。
启动内置浏览器预览
打开Codex项目后，在右侧工具栏点击Browser图标（地球形状），或使用快捷键 CMD+Shift+P（Mac） / Ctrl+Shift+P（Windows） → 输入“Open Browser Preview”→ 回车。
首次启用时，Codex会自动检测当前项目根目录下的 index.html；若不存在，将弹出提示框询问是否创建基础模板——选“是”，它会生成含基本结构的 index.html 并立即加载。
【注意：预览窗口仅对当前项目根目录下的文件生效】。子文件夹中的 .html 文件（如 /src/page.html）需手动在地址栏输入相对路径才能访问。
立即学习“前端免费学习笔记（深入）”；
绑定本地开发服务器
方法一：自动识别常用端口服务
在终端中运行 npm run dev、python3 -m http.server 8000 或 live-server 后，Codex内置浏览器会在几秒内自动扫描活跃端口（如 3000、5173、8000、8080），并在预览窗口顶部显示“Detected local server at http://localhost:3000”提示条，点击即可跳转。
方法二：手动设置自定义URL
点击预览窗口右上角三个点 → “Settings” → 在“Startup URL”字段填入完整地址，例如 http://localhost:4000。此设置仅对当前项目生效，切换项目后需重新配置。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
【务必确认终端中服务确已启动且未被防火墙拦截】。Codex不会自动帮你启动服务进程。
所见即所得修改页面
第一步：在预览窗口中用鼠标圈选目标元素（比如标题、按钮、表单区域）；
第二步：在侧边栏输入自然语言指令，例如：“把这个按钮背景改成深蓝色，圆角调到 8px，悬停时加轻微阴影”；
第三步：Codex自动定位该元素对应的源码位置（CSS 类名或内联样式行号），生成最小改动并应用；
第四步：页面实时刷新，无需手动保存或切换窗口。
这一步操作起来很简单，直接圈选+说话就行。Codex底层使用 Atlas 渲染引擎，能理解空间上下文，不是靠猜类名，而是靠视觉锚点精准映射代码。
如果页面尚未加载完成或元素动态生成，可先输入“等待页面完全加载后再执行后续操作”，避免指令被提前触发。
调试与验证流程
方法一：复现问题不改代码
输入：“使用@Browser打开 http://localhost:3000/login → 按顺序输入账号→输入密码→点击登录 → 记录控制台错误、网络请求状态、页面跳转结果 → 先不要修改任何文件，向我汇报最可能的原因。”
方法二：开启 Developer mode 深度排查
在Codex应用设置中开启 Browser 的 Developer mode，即可通过受控的 Chrome DevTools Protocol 查看 DOM 变更、样式计算、JS 执行栈等信息。
方法三：截图辅助定位
上传截图后明确标注：“请重点检查左上角 logo 和导航栏之间的间距是否超出设计稿 12px 要求”，避免 AI 自行猜测修改范围。
