Cursor+Codex 截图调试前端 Bug 实战（React/Chakra UI 案例）
前端开发中最令人头疼的莫过于那些难以定位的 UI 问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在，通过 Cursor 编辑器集成的 Codex 功能，你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始，掌握这套革命性的调试工作流。
1. 环境准备与基础配置
在开始之前，确保你已经具备以下环境：
- Cursor 编辑器最新版（v2.5+）
- Node.js 18.x 及以上版本
- React 18 项目（本文以 Chakra UI 2.x 为例）
首先在 Cursor 中安装 Codex 插件：
- 点击左侧扩展图标
- 搜索"Codex"并安装
- 登录你的 OpenAI 账户（需要 ChatGPT Plus 订阅）
关键配置项：
// 在项目根目录创建.codexrc 文件
{ "model": "gpt-5-codex-medium", "autoApply": false, "imageUnderstanding": true, "contextLevel": "project" }
提示：将 autoApply 设为 false 可以在应用修改前预览变更，这对重要项目特别有用
2. 截图调试工作流详解
2.1 捕获 UI 问题
当发现界面异常时：
- 使用系统截图工具（Mac: Cmd+Shift+4 / Win: Win+Shift+S）
- 截取问题区域（包含周边相关元素）
- 保存为 PNG 格式（保持较高清晰度）
最佳实践：确保截图清晰且包含相关组件结构，以便模型准确理解布局上下文。
