在 cursor 成为流行的开发方式后，作为普通开发我们能做什么

Cursor AI Editor（通常简称为 Cursor ）是一款由 Anysphere Inc. 开发的 AI 驱动集成开发环境 ，专为提升软件开发效率而设计。

自从笔者订阅200$/月的套餐后，目前的所有的需求全都是 Cursor 帮笔者完成，笔者已经离不开 Cursor 了。

笔者对 AI 辅助工具认识很早很早，最早的时候使用 GitHub Copilot 试用版，那个时候非常惊艳，后来推出正式版后，准确度反而降低，后面陆续使用几年 GitHub Copilot 正式版，提效一般般。而 Cursor 横空出世，让AI 辅助编码进行新里程碑，可以说到现在为止，我已经不怎么写代码，日常的开发工作主要交给 Cursor 来做。

其实 AI 辅助工具发展如此之快，也曾令我对技术追求产生深深质疑，陷入迷茫。但是思来想去承认 AI 的确是来革自己的命（职业生涯），但是秉承打不过就加入的原则，那么就变成是最会使用 AI 工具的那波人。所以引入我对后开发时代的深深思考，在 cursor 成为流行的开发方式后，作为普通开发我们能做什么，尤其是前端开发人员应该学习什么对自己的职业生涯有真实的帮助，笔者总结以下四点（个人能力有限），实际上远远不止

需求拆分

在 AI 辅助开发时代，需求拆分能力变得更加关键。AI 可以生成代码、改写逻辑、甚至设计部分架构，但 AI 并不懂你的业务背景、产品目标或隐含需求。因此开发人员必须能够将复杂的需求拆解成清晰、可执行的小任务，每个任务都可以交给 AI 来实现

笔者知道很多开发人员喜欢埋头做被安排的事，很多前端开发人员认为梳理需求、需求拆分等工作属于产品经理的工作，也不主动去关注需求的整个过程，那么现在是 AI 时代，前端开发人员真的需要掌握梳理需求、需求拆分的方方面面的事

是什么内容？预期效果是什么？

作为前端开发人员需要关注需求的两方面，其一是需求的内容，剩下的是需求的预期效果。

必须明白这个需求是干嘛的？要做一件什么事，比如实现一个购物车功能，比如实现一个收集用户反馈的功能。除了了解需求是什么外，还需要了解产品经理或者老板需求的续期效果，比如购物车能干嘛等等

需求拆分为技术方案

当我们了解需求内容和预期效果后，还需要出一份技术实现文档，这份文档包含实现需求的一些技术细节，请看下面的小例子

例如一个"实现购物车功能"的需求，需要先拆解成：

前端界面展示：商品列表、购物车列表、数量修改、价格计算
状态管理：使用 Vuex/Pinia/Redux 管理购物车状态
后端接口：商品获取、订单提交
校验逻辑：库存检查、优惠券应用

上述只是一个小例子，展示拆分的任务思路，实际上这还不是 AI 能够听懂的话术，在这个基础上，还要转换为 AI 能听懂的语言，请看下列示例

请写出 ProductList.vue 组件，用于展示商品列表
请写出 BuyCar.vue 组件，包含计算 BuyCar 组件内总价格功能
使用 Pinia 状态管理工具维护 BuyCar 中的商品

对 AI 而言，越具体的任务，AI 可以做的非常准确，输出的结果准确度更高，而开发人员只需负责整体逻辑的把控和关键业务判断。

验收标准

验收标准是笔者非常看重的一点，因为 Cursor 解放前端开发人员生产力后，前端开发人员聚焦的方向出产品经理的角色之外，另一个角色就是测试的角色，也就是说前端开发人员要当好测试这个角色

上面提到拆分需求后，把需求任务转为 AI 能听懂的话，AI 帮开发人员写代码，那么如何判断 AI 是否成功完成任务就是一个新问题了

所以开发人员就要变身为测试人员，根据产品经理或者老板提出的需求的预期结果，形成一份完整的需求验收标准。如果可以的话，开发人员需要写出这份验收文档

验收文档可以从三个层面定义：

功能层面：功能是否按需求完成，如按钮点击是否触发对应逻辑
体验层面：界面是否符合设计规范，交互是否流畅
健壮性：异常情况是否被考虑，如接口异常、边界值处理、内存泄漏

开发人员结合这份验收标准对做的功能一一验收

调试能力

调试能力是任何时候都非常重要的一种能力，这种能力必须掌握。AI 生成的代码虽然快速，但不会保证完全无错。调试能力依然是前端开发者不可替代的技能。

Vue或者React的基本原理和使用规范

理解框架的基本原理 与使用规范都是前端开发的必备技能。AI 可以根据你的指令生成 Vue 或 React 代码，但如果你不理解这些代码的运行机制，就无法判断它是否高效、是否存在隐患。

组件化思想

Vue 和 React 都采用组件化开发，将页面拆分成一个个独立的、可复用的 UI 单元，每个组件内部维护自己的状态和逻辑。这种模式不仅提升了代码复用率，也让复杂项目更易维护。
虚拟 DOM

两者都使用虚拟 DOM 作为性能优化手段。它会在内存中维护一个虚拟节点树，当状态变化时，框架会对比新旧虚拟 DOM（Diff 算法），只更新变化的部分，减少真实 DOM 操作，提高性能。
单向数据流

React 天然是单向数据流（props → UI → events），Vue 虽然有双向绑定的能力（v-model），但底层依然是基于单向数据流实现的。理解数据流方向，可以帮助你避免状态混乱、数据不可控的问题。
响应式原理

Vue2 使用 Object.defineProperty 劫持数据变化；Vue3 改用 Proxy 实现更强大的响应式能。React 通过 Hooks（如 useState、useEffect）与 Fiber 架构来实现状态更新和渲染调度

在这里笔者尤其强调使用Vue 或者 React 的时候，不要使用反模式的代码风格

console && alert

在前端调试和用户交互中，console 与 alert 是两个最常用的原生工具，但它们的作用与使用场景有明显区别。合理运用它们，可以在开发和排错时提高效率，同时保证用户体验不受影响。这也是很多前端开发人员常用的输出工具。alert 应该用的比较少了

前端小伙伴对 console 应该都很熟，笔者在这里就不赘述了

VueDevTool和ReactDevTool

Vue DevTools

Vue DevTools 是官方提供的 Vue.js 专用浏览器调试工具，可作为 Chrome/Firefox 扩展或独立应用使用。它的主要作用是让开发者在浏览器中可视化地查看和调试 Vue 应用的状态、组件树和路由信息。

组件树浏览

可直接查看整个 Vue 应用的组件层级结构，并可选中组件进行调试。
实时状态查看与修改

支持查看组件的 props、data、computed、refs 等数据，并可在面板中直接修改，页面会即时响应。
Vuex/Pinia 状态调试

专门的 Store 面板可以查看全局状态、触发的 mutations/actions，以及状态快照回放（time-travel debugging）。
路由信息查看

如果使用 Vue Router，可以直接在 DevTools 中查看当前路由信息、路由历史。
性能分析

Vue DevTools 在 Vue3 中提供了简单的性能分析功能，用于查看渲染耗时。

React DevTools

React DevTools 是 React 官方提供的 React 应用调试工具，同样可作为浏览器扩展或独立应用使用。它让开发者能够直接在浏览器中探索和调试 React 组件结构和 Hooks 状态。

组件树浏览

可查看整个 React 应用的组件层级，支持快速定位到某个 DOM 元素对应的 React 组件。
Props 与 State 查看

可以实时查看并修改组件的 props 和 state，从而方便调试 UI 和逻辑。
Hooks 调试

对使用 React Hooks 的组件，能直接查看每个 Hook 的值，例如 useState、useReducer、useContext 的当前状态。
Profiler 性能分析

Profiler 面板可以记录组件渲染的耗时、渲染频率，帮助进行性能优化。
Fiber 节点可视化

在底层，React DevTools 基于 React Fiber 架构，可以让开发者深入分析渲染逻辑。

Chrome DevTools

Chrome DevTools 是 Google Chrome 浏览器内置的一套 前端开发调试工具 （Developer Tools），主要用于 网页调试、性能分析、网络监控、代码检查 等。它是前端开发人员日常必用的工具之一，也常用于测试和优化 Web 应用。

. Elements 面板（元素面板）

查看与修改 DOM 结构：实时查看网页的 HTML 结构，可以直接编辑节点、属性、文本内容。
查看与修改 CSS 样式：在右侧的 Styles 栏编辑、禁用或添加样式，立即看到效果。
查看计算样式（Computed） ：展示最终生效的样式值（继承、权重、浏览器默认样式）。
盒模型（Box Model） ：可视化元素的 margin、border、padding 和 content。
事件监听器：查看绑定到元素的事件（点击、鼠标移入等）。

2. Console 面板（控制台）

日志输出 ：使用 console.log、console.warn、console.error 打印信息。
调试代码：可直接在控制台输入 JavaScript 代码并执行。
查看错误信息：JS 运行时错误、网络错误会显示在此处。
变量检查：可直接在页面上下文访问变量，甚至调用页面中的函数。

3. Sources 面板（源码面板）

浏览和搜索源代码：HTML、CSS、JavaScript、图片等资源文件。
断点调试：支持行断点、条件断点、DOM 断点、XHR 断点。
调用栈（Call Stack） ：分析函数调用链，快速定位问题。
代码实时编辑：修改后立即在页面生效。
本地覆盖（Local Overrides） ：保存修改的文件到本地，刷新页面仍然保持修改。

4. Network 面板（网络面板）

监控所有网络请求：XHR、Fetch、图片、脚本、字体、CSS 等。
查看请求与响应：包括请求头、响应头、请求参数、返回数据。
分析加载时间：包括 DNS 查询、连接、TTFB（首字节时间）、内容下载时间。
过滤与搜索：可按资源类型或关键字筛选请求。
模拟慢网速：测试弱网环境下的性能。

5. Performance 面板（性能分析）

录制性能快照：捕捉页面运行过程中的渲染、脚本执行、绘制等。
FPS（帧率）监控：检查动画是否流畅（目标是 60 FPS）。
火焰图分析：找出性能瓶颈代码。
CPU、内存占用分析：帮助优化代码和资源。

6. Application 面板（应用面板）

存储管理：查看和清理 LocalStorage、SessionStorage、Cookies、IndexedDB、Web SQL。
缓存分析：Service Workers、Cache Storage。
清除站点数据：一键清理页面所有数据。
Manifest 查看：用于 PWA（渐进式网页应用）的应用配置。

7. Memory 面板（内存分析）

Heap Snapshot（堆快照） ：定位内存泄漏问题。
Allocation Timeline：分析内存分配和释放情况。
垃圾回收分析：帮助找出未被释放的对象。

8. Lighthouse 面板

自动化性能与质量分析：
- 性能（Performance）
- 无障碍（Accessibility）
- 最佳实践（Best Practices）
- SEO
- PWA 检查

9. Device Mode（设备模式）

模拟移动端设备：不同屏幕尺寸、DPR、触控事件。
模拟网络状况：慢 3G、离线等。
模拟地理位置：测试定位相关功能。

毫不夸张的说上面九大功能，前端开发人员都需要掌握，每一个功能都非常重要，没有优先级之分，任何一个项目中，上述功能都会使用到，每一个功能展开来讲，都能写很多篇技术文章

断点调试

断点调试本来是Chrome DevTools中的功能，笔者在这里拿出来单独讲。

重点关注笔者标注的四块内容，分别是在行号槽位置添加断点、然后在断点操作栏调试断点，最后在 Scope 查看变量值和函数调用栈的执行情况，通过这一系列操作判断这个交互状态

对于 Scope 中的使用方式可以阅读这篇文章不得不说的 Chrome DevTools 中的 Scope

局部架构设计能力

不想当将军的士兵不是好士兵，但是在开发领域，真不是人人可以当架构师。但是笔者认为可以拥有局部架构设计的能力。

拿 CSS 的技术方案来讲，AI 辅助编码工具可能直接使用一种 CSS 解决方案然后就把需求实现了，但是 CSS 的解决方案有很多，比如 CSS module、原子化的 CSS、BEM 和 Scss 等等，非常非常多。那么前端开发人员在考虑 CSS 解决方案时，要从项目中已有的技术方案、团队对某个技术方案的接纳程度，然后对后续 AI 辅助编码工具提出使用规范。

再说一个Vue3中的状态管理的例子，解决跨组件的消息通信的方案有 pinia、也有 provide和 inject 、甚至是简单的发布订阅模式，但是 AI 在实现局部功能的时候，只会实现功能不会全盘思考整体解决方案，那么作为前端开发人员，需要站在项目整体上确定使用哪种解决方案，这些内容不是 AI 来决定，而是开发自己确定

综上所述，AI 可以生成模块、组件甚至完整页面，但它不具备对业务全局架构的理解和长期维护的能力。

组件复用：判断哪些 UI 组件可以拆分复用
状态管理优化：设计合理的 store 或 context，使数据流清晰
模块边界定义：明确模块之间的接口，降低耦合
可扩展性考虑：AI 生成代码是一次性方案，但局部架构设计保证未来需求增加时，代码仍易维护

其实还有很多很多的内容依旧需要开发人员做决定！这些内容就是 AI 目前无法实现