[{"data":1,"prerenderedAt":3398},["ShallowReactive",2],{"article-/topics/ai/recommender-system-frontend-implementation-guide":3,"related-ai":360,"content-query-icrudhviF1":3136},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":23,"_type":354,"_id":355,"_source":356,"_file":357,"_stem":358,"_extension":359},"/topics/ai/recommender-system-frontend-implementation-guide","ai",false,"","推荐系统前端实现方案：从召回结果呈现到交互闭环的关键设计","推荐系统在前端的难点不只是渲染推荐位，而是曝光、反馈、排序解释和性能开销的综合平衡。本文从推荐位形态、埋点和交互策略出发，讲清前端实现方法。","2026-04-23","HTMLPAGE 团队",[13,14,15,16,17],"Recommendation System","AI","Frontend","Personalization","Product Engineering","/images/topics/ai/recommender-system-frontend-implementation-guide.jpg","recommendation dashboard product analytics interface laptop",36950633,"https://www.pexels.com/photo/analyst-using-tablet-for-data-visualization-36950633/",15,{"type":24,"children":25,"toc":343},"root",[26,34,39,64,69,76,81,86,104,109,115,120,138,143,149,154,159,182,187,192,197,202,220,225,231,236,259,264,269,297,302,307,312],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","很多团队谈推荐系统时，注意力都放在模型和算法上。",{"type":27,"tag":28,"props":35,"children":36},{},[37],{"type":32,"value":38},"但用户真正接触到的，是前端这一层：",{"type":27,"tag":40,"props":41,"children":42},"ul",{},[43,49,54,59],{"type":27,"tag":44,"props":45,"children":46},"li",{},[47],{"type":32,"value":48},"推荐位放在哪",{"type":27,"tag":44,"props":50,"children":51},{},[52],{"type":32,"value":53},"为什么出现这些内容",{"type":27,"tag":44,"props":55,"children":56},{},[57],{"type":32,"value":58},"点击后系统怎么反馈",{"type":27,"tag":44,"props":60,"children":61},{},[62],{"type":32,"value":63},"页面性能会不会被拖慢",{"type":27,"tag":28,"props":65,"children":66},{},[67],{"type":32,"value":68},"所以推荐系统前端实现方案的核心，不是把结果渲染出来，而是把推荐变成可感知、可反馈、可持续优化的交互闭环。",{"type":27,"tag":70,"props":71,"children":73},"h2",{"id":72},"推荐系统前端先解决的是位置与上下文",[74],{"type":32,"value":75},"推荐系统前端先解决的是“位置与上下文”",{"type":27,"tag":28,"props":77,"children":78},{},[79],{"type":32,"value":80},"同样一组推荐内容，放在不同位置，效果可能完全不同。",{"type":27,"tag":28,"props":82,"children":83},{},[84],{"type":32,"value":85},"前端通常需要先决定：",{"type":27,"tag":40,"props":87,"children":88},{},[89,94,99],{"type":27,"tag":44,"props":90,"children":91},{},[92],{"type":32,"value":93},"首页推荐位承担发现任务还是转化任务",{"type":27,"tag":44,"props":95,"children":96},{},[97],{"type":32,"value":98},"详情页推荐位是补充相关内容还是促进下一步动作",{"type":27,"tag":44,"props":100,"children":101},{},[102],{"type":32,"value":103},"列表页推荐插槽会不会打断浏览路径",{"type":27,"tag":28,"props":105,"children":106},{},[107],{"type":32,"value":108},"如果这些上下文不清楚，推荐再智能，也很容易变成噪声。",{"type":27,"tag":70,"props":110,"children":112},{"id":111},"展示层不能只看-ctr还要看解释成本",[113],{"type":32,"value":114},"展示层不能只看 CTR，还要看解释成本",{"type":27,"tag":28,"props":116,"children":117},{},[118],{"type":32,"value":119},"推荐系统常常会输出一组“相关内容”，但前端展示时还要考虑：",{"type":27,"tag":40,"props":121,"children":122},{},[123,128,133],{"type":27,"tag":44,"props":124,"children":125},{},[126],{"type":32,"value":127},"用户能不能理解为什么推荐这些内容",{"type":27,"tag":44,"props":129,"children":130},{},[131],{"type":32,"value":132},"推荐标签是否需要解释理由",{"type":27,"tag":44,"props":134,"children":135},{},[136],{"type":32,"value":137},"是否要区分相关推荐与个性化推荐",{"type":27,"tag":28,"props":139,"children":140},{},[141],{"type":32,"value":142},"推荐的解释程度，会直接影响用户信任感。",{"type":27,"tag":70,"props":144,"children":146},{"id":145},"曝光点击与负反馈必须形成统一埋点闭环",[147],{"type":32,"value":148},"曝光、点击与负反馈必须形成统一埋点闭环",{"type":27,"tag":28,"props":150,"children":151},{},[152],{"type":32,"value":153},"推荐系统在前端最重要的一层基础设施，就是埋点闭环。",{"type":27,"tag":28,"props":155,"children":156},{},[157],{"type":32,"value":158},"通常至少要记录：",{"type":27,"tag":40,"props":160,"children":161},{},[162,167,172,177],{"type":27,"tag":44,"props":163,"children":164},{},[165],{"type":32,"value":166},"什么时候曝光",{"type":27,"tag":44,"props":168,"children":169},{},[170],{"type":32,"value":171},"曝光了什么排序结果",{"type":27,"tag":44,"props":173,"children":174},{},[175],{"type":32,"value":176},"用户点了什么",{"type":27,"tag":44,"props":178,"children":179},{},[180],{"type":32,"value":181},"用户跳过、关闭、不感兴趣的反馈是什么",{"type":27,"tag":28,"props":183,"children":184},{},[185],{"type":32,"value":186},"如果前端只负责渲染，不负责稳定反馈，推荐系统很难真正迭代。",{"type":27,"tag":70,"props":188,"children":190},{"id":189},"推荐位不能明显拖慢页面",[191],{"type":32,"value":189},{"type":27,"tag":28,"props":193,"children":194},{},[195],{"type":32,"value":196},"推荐内容通常会带来额外请求、额外卡片组件和额外图片资源。",{"type":27,"tag":28,"props":198,"children":199},{},[200],{"type":32,"value":201},"如果这层处理不好，系统很可能出现：",{"type":27,"tag":40,"props":203,"children":204},{},[205,210,215],{"type":27,"tag":44,"props":206,"children":207},{},[208],{"type":32,"value":209},"首页推荐位把首屏拖慢",{"type":27,"tag":44,"props":211,"children":212},{},[213],{"type":32,"value":214},"详情页推荐卡片比正文还重",{"type":27,"tag":44,"props":216,"children":217},{},[218],{"type":32,"value":219},"多个推荐模块同时请求，造成级联等待",{"type":27,"tag":28,"props":221,"children":222},{},[223],{"type":32,"value":224},"所以推荐位通常要有自己的性能策略：懒加载、局部刷新、资源优先级和占位控制。",{"type":27,"tag":70,"props":226,"children":228},{"id":227},"一个常见失败案例推荐看起来很多但用户并不信任也不愿互动",[229],{"type":32,"value":230},"一个常见失败案例：推荐看起来很多，但用户并不信任也不愿互动",{"type":27,"tag":28,"props":232,"children":233},{},[234],{"type":32,"value":235},"这种情况通常说明：",{"type":27,"tag":40,"props":237,"children":238},{},[239,244,249,254],{"type":27,"tag":44,"props":240,"children":241},{},[242],{"type":32,"value":243},"推荐位置不对",{"type":27,"tag":44,"props":245,"children":246},{},[247],{"type":32,"value":248},"推荐理由不清",{"type":27,"tag":44,"props":250,"children":251},{},[252],{"type":32,"value":253},"反馈入口缺失",{"type":27,"tag":44,"props":255,"children":256},{},[257],{"type":32,"value":258},"页面性能和信息密度被破坏",{"type":27,"tag":28,"props":260,"children":261},{},[262],{"type":32,"value":263},"问题不在模型一定不行，而在前端没有把推荐体验组织成闭环。",{"type":27,"tag":70,"props":265,"children":267},{"id":266},"一份可直接复用的检查清单",[268],{"type":32,"value":266},{"type":27,"tag":40,"props":270,"children":271},{},[272,277,282,287,292],{"type":27,"tag":44,"props":273,"children":274},{},[275],{"type":32,"value":276},"推荐位是否先按页面上下文明确了任务目标",{"type":27,"tag":44,"props":278,"children":279},{},[280],{"type":32,"value":281},"是否区分了相关推荐、热门推荐和个性化推荐",{"type":27,"tag":44,"props":283,"children":284},{},[285],{"type":32,"value":286},"曝光、点击和负反馈是否形成完整埋点闭环",{"type":27,"tag":44,"props":288,"children":289},{},[290],{"type":32,"value":291},"推荐模块是否做了懒加载与资源开销控制",{"type":27,"tag":44,"props":293,"children":294},{},[295],{"type":32,"value":296},"用户是否能理解推荐结果并表达偏好",{"type":27,"tag":70,"props":298,"children":300},{"id":299},"总结",[301],{"type":32,"value":299},{"type":27,"tag":28,"props":303,"children":304},{},[305],{"type":32,"value":306},"推荐系统前端实现的关键，不是多放几个卡片，而是让推荐在位置、解释、反馈和性能之间保持平衡。只要先把这些基础面搭稳，推荐系统才会真正对产品增长产生帮助。",{"type":27,"tag":28,"props":308,"children":309},{},[310],{"type":32,"value":311},"进一步阅读：",{"type":27,"tag":40,"props":313,"children":314},{},[315,325,334],{"type":27,"tag":44,"props":316,"children":317},{},[318],{"type":27,"tag":319,"props":320,"children":322},"a",{"href":321},"/topics/ai/ai-driven-ab-testing-optimization",[323],{"type":32,"value":324},"AI 驱动的 A/B 测试优化",{"type":27,"tag":44,"props":326,"children":327},{},[328],{"type":27,"tag":319,"props":329,"children":331},{"href":330},"/topics/frontend/frontend-monitoring-system-design-implementation",[332],{"type":32,"value":333},"前端监控系统设计与实现",{"type":27,"tag":44,"props":335,"children":336},{},[337],{"type":27,"tag":319,"props":338,"children":340},{"href":339},"/topics/performance/big-data-visualization-performance-solutions",[341],{"type":32,"value":342},"大数据可视化性能方案",{"title":7,"searchDepth":344,"depth":344,"links":345},3,[346,348,349,350,351,352,353],{"id":72,"depth":347,"text":75},2,{"id":111,"depth":347,"text":114},{"id":145,"depth":347,"text":148},{"id":189,"depth":347,"text":189},{"id":227,"depth":347,"text":230},{"id":266,"depth":347,"text":266},{"id":299,"depth":347,"text":299},"markdown","content:topics:ai:recommender-system-frontend-implementation-guide.md","content","topics/ai/recommender-system-frontend-implementation-guide.md","topics/ai/recommender-system-frontend-implementation-guide","md",[361,1523,2472],{"_path":362,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":363,"description":364,"date":365,"topic":5,"author":11,"tags":366,"image":372,"imageAlt":373,"pexelsPhotoId":374,"pexelsUrl":375,"readingTime":376,"body":377,"_type":354,"_id":1520,"_source":356,"_file":1521,"_stem":1522,"_extension":359},"/topics/ai/cursor-keyboard-shortcuts-cheatsheet","Cursor 快捷键速查表（macOS/Windows）：从“会用”到“能提效”的 10 个工作流","把 Cursor 常用快捷键按任务分组（查代码、改代码、多文件、对话、审查与回滚），给出可直接照抄的工作流与最小回归清单，避免“快捷键背了也没变快”。","2026-03-02",[367,368,369,370,371],"Cursor","快捷键","AI IDE","VS Code","开发效率","/images/topics/ai/cursor-keyboard-shortcuts-cheatsheet.jpg","彩色机械键盘与鼠标的工作台面",34563105,"https://www.pexels.com/photo/colorful-mechanical-keyboard-and-mouse-setup-34563105/",12,{"type":24,"children":378,"toc":1494},[379,384,402,407,436,441,477,481,487,492,525,530,553,556,562,567,792,801,804,810,817,836,844,865,870,876,891,922,927,940,946,965,983,991,996,1002,1007,1028,1036,1042,1047,1070,1075,1081,1094,1100,1118,1136,1142,1153,1171,1177,1188,1194,1199,1242,1245,1251,1259,1312,1315,1321,1327,1332,1337,1360,1378,1383,1408,1411,1417,1423,1428,1434,1439,1445,1450,1453,1459],{"type":27,"tag":28,"props":380,"children":381},{},[382],{"type":32,"value":383},"如果你在搜“Cursor 快捷键”，你大概率不是想背一张表，而是想解决这类问题：",{"type":27,"tag":40,"props":385,"children":386},{},[387,392,397],{"type":27,"tag":44,"props":388,"children":389},{},[390],{"type":32,"value":391},"为什么我用了 AI，还是很慢？（对话来回太多、改动不可控）",{"type":27,"tag":44,"props":393,"children":394},{},[395],{"type":32,"value":396},"为什么它“看起来懂了”，却改错文件/改出回归？（上下文与范围没锁住）",{"type":27,"tag":44,"props":398,"children":399},{},[400],{"type":32,"value":401},"多文件改动怎么做得安全？（验收、回滚、最小回归集）",{"type":27,"tag":28,"props":403,"children":404},{},[405],{"type":32,"value":406},"这篇文章给你两份东西：",{"type":27,"tag":408,"props":409,"children":410},"ol",{},[411,424],{"type":27,"tag":44,"props":412,"children":413},{},[414,416,422],{"type":32,"value":415},"一张",{"type":27,"tag":417,"props":418,"children":419},"strong",{},[420],{"type":32,"value":421},"按任务分组",{"type":32,"value":423},"的快捷键表（不是按功能堆在一起）",{"type":27,"tag":44,"props":425,"children":426},{},[427,429,434],{"type":32,"value":428},"一套“从需求到落地”的",{"type":27,"tag":417,"props":430,"children":431},{},[432],{"type":32,"value":433},"最小闭环工作流",{"type":32,"value":435},"（每一步都有快捷键）",{"type":27,"tag":28,"props":437,"children":438},{},[439],{"type":32,"value":440},"想看系统玩法：",{"type":27,"tag":40,"props":442,"children":443},{},[444,455,466],{"type":27,"tag":44,"props":445,"children":446},{},[447,449],{"type":32,"value":448},"入门教程看：",{"type":27,"tag":319,"props":450,"children":452},{"href":451},"/topics/ai/cursor-tutorial",[453],{"type":32,"value":454},"Cursor 使用教程（2026）",{"type":27,"tag":44,"props":456,"children":457},{},[458,460],{"type":32,"value":459},"进阶玩法看：",{"type":27,"tag":319,"props":461,"children":463},{"href":462},"/topics/ai/cursor-editor-guide",[464],{"type":32,"value":465},"Cursor 编辑器深度玩法",{"type":27,"tag":44,"props":467,"children":468},{},[469,471],{"type":32,"value":470},"规则与忽略看：",{"type":27,"tag":319,"props":472,"children":474},{"href":473},"/topics/ai/cursor-rules-cursorrules",[475],{"type":32,"value":476},"Cursor Rules 与 .cursorrules",{"type":27,"tag":478,"props":479,"children":480},"hr",{},[],{"type":27,"tag":70,"props":482,"children":484},{"id":483},"先给结论提效不是按得快而是闭环更短",[485],{"type":32,"value":486},"先给结论：提效不是“按得快”，而是“闭环更短”",{"type":27,"tag":28,"props":488,"children":489},{},[490],{"type":32,"value":491},"你可以把 Cursor 的快捷键理解为 3 条流水线：",{"type":27,"tag":40,"props":493,"children":494},{},[495,505,515],{"type":27,"tag":44,"props":496,"children":497},{},[498,503],{"type":27,"tag":417,"props":499,"children":500},{},[501],{"type":32,"value":502},"改一小段",{"type":32,"value":504},"（内联编辑）：把改动限制在一个函数/一段样式",{"type":27,"tag":44,"props":506,"children":507},{},[508,513],{"type":27,"tag":417,"props":509,"children":510},{},[511],{"type":32,"value":512},"改一组文件",{"type":32,"value":514},"（Composer）：把改动限制在一组明确文件，并要求输出 diff + 验收点",{"type":27,"tag":44,"props":516,"children":517},{},[518,523],{"type":27,"tag":417,"props":519,"children":520},{},[521],{"type":32,"value":522},"聊清楚再动手",{"type":32,"value":524},"（侧边对话）：先对齐目标、范围、验收、回滚",{"type":27,"tag":28,"props":526,"children":527},{},[528],{"type":32,"value":529},"当你觉得“它乱改/改太大”时，往往不是快捷键没记住，而是缺了两件事：",{"type":27,"tag":40,"props":531,"children":532},{},[533,543],{"type":27,"tag":44,"props":534,"children":535},{},[536,538],{"type":32,"value":537},"没有在动手前锁定",{"type":27,"tag":417,"props":539,"children":540},{},[541],{"type":32,"value":542},"范围",{"type":27,"tag":44,"props":544,"children":545},{},[546,548],{"type":32,"value":547},"没有在接受改动前准备",{"type":27,"tag":417,"props":549,"children":550},{},[551],{"type":32,"value":552},"验收/回滚",{"type":27,"tag":478,"props":554,"children":555},{},[],{"type":27,"tag":70,"props":557,"children":559},{"id":558},"快捷键速查表按任务分组",[560],{"type":32,"value":561},"快捷键速查表（按任务分组）",{"type":27,"tag":28,"props":563,"children":564},{},[565],{"type":32,"value":566},"说明：下表按“你正在做什么”组织，而不是按“功能名字”组织。不同版本快捷键可能略有差异，但核心逻辑一致。",{"type":27,"tag":568,"props":569,"children":570},"table",{},[571,600],{"type":27,"tag":572,"props":573,"children":574},"thead",{},[575],{"type":27,"tag":576,"props":577,"children":578},"tr",{},[579,585,590,595],{"type":27,"tag":580,"props":581,"children":582},"th",{},[583],{"type":32,"value":584},"任务",{"type":27,"tag":580,"props":586,"children":587},{},[588],{"type":32,"value":589},"macOS",{"type":27,"tag":580,"props":591,"children":592},{},[593],{"type":32,"value":594},"Windows",{"type":27,"tag":580,"props":596,"children":597},{},[598],{"type":32,"value":599},"你该在什么时候用",{"type":27,"tag":601,"props":602,"children":603},"tbody",{},[604,637,668,699,730,761],{"type":27,"tag":576,"props":605,"children":606},{},[607,613,623,632],{"type":27,"tag":608,"props":609,"children":610},"td",{},[611],{"type":32,"value":612},"改一小段（最安全）",{"type":27,"tag":608,"props":614,"children":615},{},[616],{"type":27,"tag":617,"props":618,"children":620},"code",{"className":619},[],[621],{"type":32,"value":622},"Cmd + K",{"type":27,"tag":608,"props":624,"children":625},{},[626],{"type":27,"tag":617,"props":627,"children":629},{"className":628},[],[630],{"type":32,"value":631},"Ctrl + K",{"type":27,"tag":608,"props":633,"children":634},{},[635],{"type":32,"value":636},"只想改一个函数/一段 CSS，不想动别的",{"type":27,"tag":576,"props":638,"children":639},{},[640,645,654,663],{"type":27,"tag":608,"props":641,"children":642},{},[643],{"type":32,"value":644},"打开 AI 对话（先对齐再动手）",{"type":27,"tag":608,"props":646,"children":647},{},[648],{"type":27,"tag":617,"props":649,"children":651},{"className":650},[],[652],{"type":32,"value":653},"Cmd + L",{"type":27,"tag":608,"props":655,"children":656},{},[657],{"type":27,"tag":617,"props":658,"children":660},{"className":659},[],[661],{"type":32,"value":662},"Ctrl + L",{"type":27,"tag":608,"props":664,"children":665},{},[666],{"type":32,"value":667},"需要澄清目标、制定步骤、给验收点",{"type":27,"tag":576,"props":669,"children":670},{},[671,676,685,694],{"type":27,"tag":608,"props":672,"children":673},{},[674],{"type":32,"value":675},"多文件编辑（有组织地改一组文件）",{"type":27,"tag":608,"props":677,"children":678},{},[679],{"type":27,"tag":617,"props":680,"children":682},{"className":681},[],[683],{"type":32,"value":684},"Cmd + I",{"type":27,"tag":608,"props":686,"children":687},{},[688],{"type":27,"tag":617,"props":689,"children":691},{"className":690},[],[692],{"type":32,"value":693},"Ctrl + I",{"type":27,"tag":608,"props":695,"children":696},{},[697],{"type":32,"value":698},"改动涉及多个文件：组件+样式+测试",{"type":27,"tag":576,"props":700,"children":701},{},[702,707,716,725],{"type":27,"tag":608,"props":703,"children":704},{},[705],{"type":32,"value":706},"把选中代码加入对话上下文",{"type":27,"tag":608,"props":708,"children":709},{},[710],{"type":27,"tag":617,"props":711,"children":713},{"className":712},[],[714],{"type":32,"value":715},"Cmd + Shift + L",{"type":27,"tag":608,"props":717,"children":718},{},[719],{"type":27,"tag":617,"props":720,"children":722},{"className":721},[],[723],{"type":32,"value":724},"Ctrl + Shift + L",{"type":27,"tag":608,"props":726,"children":727},{},[728],{"type":32,"value":729},"让 AI 只看你选的片段（降低噪音）",{"type":27,"tag":576,"props":731,"children":732},{},[733,738,747,756],{"type":27,"tag":608,"props":734,"children":735},{},[736],{"type":32,"value":737},"接受当前建议",{"type":27,"tag":608,"props":739,"children":740},{},[741],{"type":27,"tag":617,"props":742,"children":744},{"className":743},[],[745],{"type":32,"value":746},"Cmd + Y",{"type":27,"tag":608,"props":748,"children":749},{},[750],{"type":27,"tag":617,"props":751,"children":753},{"className":752},[],[754],{"type":32,"value":755},"Ctrl + Y",{"type":27,"tag":608,"props":757,"children":758},{},[759],{"type":32,"value":760},"你已经准备好验收/回滚，并确认改动范围",{"type":27,"tag":576,"props":762,"children":763},{},[764,769,778,787],{"type":27,"tag":608,"props":765,"children":766},{},[767],{"type":32,"value":768},"拒绝当前建议",{"type":27,"tag":608,"props":770,"children":771},{},[772],{"type":27,"tag":617,"props":773,"children":775},{"className":774},[],[776],{"type":32,"value":777},"Cmd + N",{"type":27,"tag":608,"props":779,"children":780},{},[781],{"type":27,"tag":617,"props":782,"children":784},{"className":783},[],[785],{"type":32,"value":786},"Ctrl + N",{"type":27,"tag":608,"props":788,"children":789},{},[790],{"type":32,"value":791},"改得太大、改错方向，立刻收手",{"type":27,"tag":793,"props":794,"children":795},"blockquote",{},[796],{"type":27,"tag":28,"props":797,"children":798},{},[799],{"type":32,"value":800},"小技巧：把“改一小段”当默认路径。只有当你能清晰写出“会改哪几类文件、怎么验收”时再进入多文件。",{"type":27,"tag":478,"props":802,"children":803},{},[],{"type":27,"tag":70,"props":805,"children":807},{"id":806},"_10-个可直接照抄的提效工作流每个都能闭环",[808],{"type":32,"value":809},"10 个可直接照抄的提效工作流（每个都能闭环）",{"type":27,"tag":811,"props":812,"children":814},"h3",{"id":813},"工作流-1需求计划小步改新手最稳",[815],{"type":32,"value":816},"工作流 1：需求→计划→小步改（新手最稳）",{"type":27,"tag":408,"props":818,"children":819},{},[820,831],{"type":27,"tag":44,"props":821,"children":822},{},[823,829],{"type":27,"tag":617,"props":824,"children":826},{"className":825},[],[827],{"type":32,"value":828},"Cmd/Ctrl + L",{"type":32,"value":830}," 打开对话",{"type":27,"tag":44,"props":832,"children":833},{},[834],{"type":32,"value":835},"先发这段（可复制）：",{"type":27,"tag":793,"props":837,"children":838},{},[839],{"type":27,"tag":28,"props":840,"children":841},{},[842],{"type":32,"value":843},"目标：……\n范围：只修改以下文件/模块：……\n非目标：……（明确不做）\n验收：……（可测试/可手动检查）\n输出格式：先给计划，再逐步执行；每一步写出 diff 摘要。",{"type":27,"tag":408,"props":845,"children":846},{"start":344},[847,852],{"type":27,"tag":44,"props":848,"children":849},{},[850],{"type":32,"value":851},"让 AI 先给“计划（3~6 步）”，你确认后再执行",{"type":27,"tag":44,"props":853,"children":854},{},[855,857,863],{"type":32,"value":856},"任何一步涉及改代码：优先回到编辑区，选中片段用 ",{"type":27,"tag":617,"props":858,"children":860},{"className":859},[],[861],{"type":32,"value":862},"Cmd/Ctrl + K",{"type":32,"value":864}," 小步改",{"type":27,"tag":28,"props":866,"children":867},{},[868],{"type":32,"value":869},"为什么有效：你把“想法”变成了“可执行约束”，这就是 GEO（面向 AI/模型的可理解结构）。",{"type":27,"tag":811,"props":871,"children":873},{"id":872},"工作流-2只改一个函数高频低风险",[874],{"type":32,"value":875},"工作流 2：只改一个函数（高频、低风险）",{"type":27,"tag":40,"props":877,"children":878},{},[879],{"type":27,"tag":44,"props":880,"children":881},{},[882,884,889],{"type":32,"value":883},"选中函数 → ",{"type":27,"tag":617,"props":885,"children":887},{"className":886},[],[888],{"type":32,"value":862},{"type":32,"value":890}," → 输入指令：",{"type":27,"tag":793,"props":892,"children":893},{},[894,899],{"type":27,"tag":28,"props":895,"children":896},{},[897],{"type":32,"value":898},"把这段改成更可读：",{"type":27,"tag":40,"props":900,"children":901},{},[902,907,912,917],{"type":27,"tag":44,"props":903,"children":904},{},[905],{"type":32,"value":906},"用 async/await",{"type":27,"tag":44,"props":908,"children":909},{},[910],{"type":32,"value":911},"错误处理不要吞掉",{"type":27,"tag":44,"props":913,"children":914},{},[915],{"type":32,"value":916},"添加类型（若可推断）",{"type":27,"tag":44,"props":918,"children":919},{},[920],{"type":32,"value":921},"不要改函数签名",{"type":27,"tag":28,"props":923,"children":924},{},[925],{"type":32,"value":926},"验收方式（强制）：",{"type":27,"tag":40,"props":928,"children":929},{},[930,935],{"type":27,"tag":44,"props":931,"children":932},{},[933],{"type":32,"value":934},"输出前后函数行为一致（输入/输出）",{"type":27,"tag":44,"props":936,"children":937},{},[938],{"type":32,"value":939},"失败分支有可观测日志（不要悄悄 return null）",{"type":27,"tag":811,"props":941,"children":943},{"id":942},"工作流-3多文件改动先定文件清单",[944],{"type":32,"value":945},"工作流 3：多文件改动（先定“文件清单”）",{"type":27,"tag":408,"props":947,"children":948},{},[949,960],{"type":27,"tag":44,"props":950,"children":951},{},[952,958],{"type":27,"tag":617,"props":953,"children":955},{"className":954},[],[956],{"type":32,"value":957},"Cmd/Ctrl + I",{"type":32,"value":959}," 进入多文件",{"type":27,"tag":44,"props":961,"children":962},{},[963],{"type":32,"value":964},"先让 AI 输出：",{"type":27,"tag":40,"props":966,"children":967},{},[968,973,978],{"type":27,"tag":44,"props":969,"children":970},{},[971],{"type":32,"value":972},"预计会改哪些文件（最多 5 个）",{"type":27,"tag":44,"props":974,"children":975},{},[976],{"type":32,"value":977},"每个文件改什么",{"type":27,"tag":44,"props":979,"children":980},{},[981],{"type":32,"value":982},"每一步怎么验收",{"type":27,"tag":408,"props":984,"children":985},{"start":344},[986],{"type":27,"tag":44,"props":987,"children":988},{},[989],{"type":32,"value":990},"你确认文件清单后再开始生成改动",{"type":27,"tag":28,"props":992,"children":993},{},[994],{"type":32,"value":995},"关键点：多文件最容易翻车的是“它把你没想到的文件也改了”。所以文件清单是第一道闸门。",{"type":27,"tag":811,"props":997,"children":999},{"id":998},"工作流-4把上下文噪音砍掉防跑偏",[1000],{"type":32,"value":1001},"工作流 4：把“上下文噪音”砍掉（防跑偏）",{"type":27,"tag":28,"props":1003,"children":1004},{},[1005],{"type":32,"value":1006},"当你怀疑它在胡说/乱改时：",{"type":27,"tag":40,"props":1008,"children":1009},{},[1010,1023],{"type":27,"tag":44,"props":1011,"children":1012},{},[1013,1015,1021],{"type":32,"value":1014},"只选择关键代码片段 → ",{"type":27,"tag":617,"props":1016,"children":1018},{"className":1017},[],[1019],{"type":32,"value":1020},"Cmd/Ctrl + Shift + L",{"type":32,"value":1022}," 加入对话",{"type":27,"tag":44,"props":1024,"children":1025},{},[1026],{"type":32,"value":1027},"然后在对话里要求：",{"type":27,"tag":793,"props":1029,"children":1030},{},[1031],{"type":27,"tag":28,"props":1032,"children":1033},{},[1034],{"type":32,"value":1035},"只基于我提供的代码片段回答，不要假设其它文件存在。",{"type":27,"tag":811,"props":1037,"children":1039},{"id":1038},"工作流-5生成变更说明让-code-review-变快",[1040],{"type":32,"value":1041},"工作流 5：生成变更说明（让 code review 变快）",{"type":27,"tag":28,"props":1043,"children":1044},{},[1045],{"type":32,"value":1046},"改完后在对话里让它输出：",{"type":27,"tag":40,"props":1048,"children":1049},{},[1050,1055,1060,1065],{"type":27,"tag":44,"props":1051,"children":1052},{},[1053],{"type":32,"value":1054},"改动摘要（3~7 条）",{"type":27,"tag":44,"props":1056,"children":1057},{},[1058],{"type":32,"value":1059},"风险点（依赖/边界条件）",{"type":27,"tag":44,"props":1061,"children":1062},{},[1063],{"type":32,"value":1064},"回滚方式",{"type":27,"tag":44,"props":1066,"children":1067},{},[1068],{"type":32,"value":1069},"验收步骤",{"type":27,"tag":28,"props":1071,"children":1072},{},[1073],{"type":32,"value":1074},"这套结构能直接贴进 PR 描述。",{"type":27,"tag":811,"props":1076,"children":1078},{"id":1077},"工作流-6写最小回归集不写回归-等事故",[1079],{"type":32,"value":1080},"工作流 6：写“最小回归集”（不写回归 = 等事故）",{"type":27,"tag":28,"props":1082,"children":1083},{},[1084,1086,1092],{"type":32,"value":1085},"每次改动都至少做 10 条最小回归（见下文清单）。你可以把它写在 ",{"type":27,"tag":617,"props":1087,"children":1089},{"className":1088},[],[1090],{"type":32,"value":1091},"README",{"type":32,"value":1093}," 或团队 wiki。",{"type":27,"tag":811,"props":1095,"children":1097},{"id":1096},"工作流-7把接受建议变成最后一步",[1098],{"type":32,"value":1099},"工作流 7：把“接受建议”变成最后一步",{"type":27,"tag":28,"props":1101,"children":1102},{},[1103,1109,1111,1116],{"type":27,"tag":617,"props":1104,"children":1106},{"className":1105},[],[1107],{"type":32,"value":1108},"Cmd/Ctrl + Y",{"type":32,"value":1110}," 应该是",{"type":27,"tag":417,"props":1112,"children":1113},{},[1114],{"type":32,"value":1115},"最后一步",{"type":32,"value":1117},"：",{"type":27,"tag":40,"props":1119,"children":1120},{},[1121,1126,1131],{"type":27,"tag":44,"props":1122,"children":1123},{},[1124],{"type":32,"value":1125},"你已经看过 diff",{"type":27,"tag":44,"props":1127,"children":1128},{},[1129],{"type":32,"value":1130},"你能说清楚“怎么验收”",{"type":27,"tag":44,"props":1132,"children":1133},{},[1134],{"type":32,"value":1135},"你知道“怎么回滚”",{"type":27,"tag":811,"props":1137,"children":1139},{"id":1138},"工作流-8拒绝建议不是失败是风控动作",[1140],{"type":32,"value":1141},"工作流 8：拒绝建议不是失败，是风控动作",{"type":27,"tag":28,"props":1143,"children":1144},{},[1145,1151],{"type":27,"tag":617,"props":1146,"children":1148},{"className":1147},[],[1149],{"type":32,"value":1150},"Cmd/Ctrl + N",{"type":32,"value":1152}," 的使用时机：",{"type":27,"tag":40,"props":1154,"children":1155},{},[1156,1161,1166],{"type":27,"tag":44,"props":1157,"children":1158},{},[1159],{"type":32,"value":1160},"它开始改你没提过的东西（范围漂移）",{"type":27,"tag":44,"props":1162,"children":1163},{},[1164],{"type":32,"value":1165},"它改了 10 个文件但你只想改 1 个",{"type":27,"tag":44,"props":1167,"children":1168},{},[1169],{"type":32,"value":1170},"它为了“更优雅”引入新依赖/新抽象",{"type":27,"tag":811,"props":1172,"children":1174},{"id":1173},"工作流-9重复任务做成模板提示词不是一次性",[1175],{"type":32,"value":1176},"工作流 9：重复任务做成模板（提示词不是一次性）",{"type":27,"tag":28,"props":1178,"children":1179},{},[1180,1182,1186],{"type":32,"value":1181},"把高频任务（比如“写组件+样式+验收”）固化成模板，放进 Rules（见：",{"type":27,"tag":319,"props":1183,"children":1184},{"href":473},[1185],{"type":32,"value":476},{"type":32,"value":1187},"）。",{"type":27,"tag":811,"props":1189,"children":1191},{"id":1190},"工作流-10把快捷键表做成你自己的任务表",[1192],{"type":32,"value":1193},"工作流 10：把“快捷键表”做成你自己的任务表",{"type":27,"tag":28,"props":1195,"children":1196},{},[1197],{"type":32,"value":1198},"你不需要记住所有快捷键，只需要记住：",{"type":27,"tag":40,"props":1200,"children":1201},{},[1202,1212,1222,1232],{"type":27,"tag":44,"props":1203,"children":1204},{},[1205,1207],{"type":32,"value":1206},"小步改：",{"type":27,"tag":617,"props":1208,"children":1210},{"className":1209},[],[1211],{"type":32,"value":862},{"type":27,"tag":44,"props":1213,"children":1214},{},[1215,1217],{"type":32,"value":1216},"先对齐：",{"type":27,"tag":617,"props":1218,"children":1220},{"className":1219},[],[1221],{"type":32,"value":828},{"type":27,"tag":44,"props":1223,"children":1224},{},[1225,1227],{"type":32,"value":1226},"多文件：",{"type":27,"tag":617,"props":1228,"children":1230},{"className":1229},[],[1231],{"type":32,"value":957},{"type":27,"tag":44,"props":1233,"children":1234},{},[1235,1237],{"type":32,"value":1236},"上下文聚焦：",{"type":27,"tag":617,"props":1238,"children":1240},{"className":1239},[],[1241],{"type":32,"value":1020},{"type":27,"tag":478,"props":1243,"children":1244},{},[],{"type":27,"tag":70,"props":1246,"children":1248},{"id":1247},"必交付物-1最小回归任务清单10-条通用",[1249],{"type":32,"value":1250},"必交付物 1：最小回归任务清单（10 条，通用）",{"type":27,"tag":793,"props":1252,"children":1253},{},[1254],{"type":27,"tag":28,"props":1255,"children":1256},{},[1257],{"type":32,"value":1258},"这份清单的意义：让每次 AI 改动都能“被验证”。否则你只是把不可控变成了更快的不可控。",{"type":27,"tag":408,"props":1260,"children":1261},{},[1262,1267,1272,1277,1282,1287,1292,1297,1302,1307],{"type":27,"tag":44,"props":1263,"children":1264},{},[1265],{"type":32,"value":1266},"关键路径能跑通（手动点击/请求一次）",{"type":27,"tag":44,"props":1268,"children":1269},{},[1270],{"type":32,"value":1271},"错误路径能触发（模拟一次失败输入）",{"type":27,"tag":44,"props":1273,"children":1274},{},[1275],{"type":32,"value":1276},"控制台无新增错误（至少关注 1 次真实操作）",{"type":27,"tag":44,"props":1278,"children":1279},{},[1280],{"type":32,"value":1281},"关键 UI 未错位（移动端/桌面端各看一眼）",{"type":27,"tag":44,"props":1283,"children":1284},{},[1285],{"type":32,"value":1286},"刷新后状态正确（尤其是表单/列表）",{"type":27,"tag":44,"props":1288,"children":1289},{},[1290],{"type":32,"value":1291},"路由跳转没断（从入口到目标页）",{"type":27,"tag":44,"props":1293,"children":1294},{},[1295],{"type":32,"value":1296},"相关接口未改变契约（字段名/类型）",{"type":27,"tag":44,"props":1298,"children":1299},{},[1300],{"type":32,"value":1301},"性能没有明显退化（首屏、交互卡顿）",{"type":27,"tag":44,"props":1303,"children":1304},{},[1305],{"type":32,"value":1306},"回滚方案可执行（知道回滚哪几个文件/commit）",{"type":27,"tag":44,"props":1308,"children":1309},{},[1310],{"type":32,"value":1311},"写下“这次改动解决了什么、风险是什么”（可贴 PR）",{"type":27,"tag":478,"props":1313,"children":1314},{},[],{"type":27,"tag":70,"props":1316,"children":1318},{"id":1317},"必交付物-2失败案例复盘真实会发生",[1319],{"type":32,"value":1320},"必交付物 2：失败案例复盘（真实会发生）",{"type":27,"tag":811,"props":1322,"children":1324},{"id":1323},"现象快捷键用得很熟但交付还是慢",[1325],{"type":32,"value":1326},"现象：快捷键用得很熟，但交付还是慢",{"type":27,"tag":28,"props":1328,"children":1329},{},[1330],{"type":32,"value":1331},"典型原因：你把 Cursor 当成“更聪明的搜索框”，不断对话，直到它给出你想要的答案。",{"type":27,"tag":28,"props":1333,"children":1334},{},[1335],{"type":32,"value":1336},"复现路径：",{"type":27,"tag":40,"props":1338,"children":1339},{},[1340,1345,1350,1355],{"type":27,"tag":44,"props":1341,"children":1342},{},[1343],{"type":32,"value":1344},"你直接说“把页面做得更好看、更高级”",{"type":27,"tag":44,"props":1346,"children":1347},{},[1348],{"type":32,"value":1349},"AI 开始大改样式、抽象组件、甚至引入新依赖",{"type":27,"tag":44,"props":1351,"children":1352},{},[1353],{"type":32,"value":1354},"你为了省事按了“接受建议”",{"type":27,"tag":44,"props":1356,"children":1357},{},[1358],{"type":32,"value":1359},"最后发现：设计没统一、移动端崩、甚至埋了性能问题",{"type":27,"tag":28,"props":1361,"children":1362},{},[1363,1365,1369,1371,1376],{"type":32,"value":1364},"根因：缺少",{"type":27,"tag":417,"props":1366,"children":1367},{},[1368],{"type":32,"value":542},{"type":32,"value":1370},"与",{"type":27,"tag":417,"props":1372,"children":1373},{},[1374],{"type":32,"value":1375},"验收",{"type":32,"value":1377},"。",{"type":27,"tag":28,"props":1379,"children":1380},{},[1381],{"type":32,"value":1382},"修复方式（可照抄）：",{"type":27,"tag":40,"props":1384,"children":1385},{},[1386,1391,1403],{"type":27,"tag":44,"props":1387,"children":1388},{},[1389],{"type":32,"value":1390},"把需求拆成 3 个可验证目标：例如“按钮样式统一”“首屏 CTA 更明显”“移动端间距不挤”",{"type":27,"tag":44,"props":1392,"children":1393},{},[1394,1396,1401],{"type":32,"value":1395},"每个目标只用 ",{"type":27,"tag":617,"props":1397,"children":1399},{"className":1398},[],[1400],{"type":32,"value":862},{"type":32,"value":1402}," 改一个局部",{"type":27,"tag":44,"props":1404,"children":1405},{},[1406],{"type":32,"value":1407},"每次接受建议前跑一遍“最小回归集”",{"type":27,"tag":478,"props":1409,"children":1410},{},[],{"type":27,"tag":70,"props":1412,"children":1414},{"id":1413},"faq高频问题",[1415],{"type":32,"value":1416},"FAQ（高频问题）",{"type":27,"tag":811,"props":1418,"children":1420},{"id":1419},"q1我应该先记快捷键还是先学工作流",[1421],{"type":32,"value":1422},"Q1：我应该先记快捷键还是先学工作流？",{"type":27,"tag":28,"props":1424,"children":1425},{},[1426],{"type":32,"value":1427},"先学工作流。快捷键只是把工作流的步骤变短。",{"type":27,"tag":811,"props":1429,"children":1431},{"id":1430},"q2为什么我一用多文件就容易翻车",[1432],{"type":32,"value":1433},"Q2：为什么我一用多文件就容易翻车？",{"type":27,"tag":28,"props":1435,"children":1436},{},[1437],{"type":32,"value":1438},"因为多文件意味着范围更大、依赖更多、验收更难。先锁定“文件清单 + 每步验收”，再让它动手。",{"type":27,"tag":811,"props":1440,"children":1442},{"id":1441},"q3有没有万能提示词",[1443],{"type":32,"value":1444},"Q3：有没有“万能提示词”？",{"type":27,"tag":28,"props":1446,"children":1447},{},[1448],{"type":32,"value":1449},"没有，但有“万能结构”：目标、范围、非目标、验收、输出格式。",{"type":27,"tag":478,"props":1451,"children":1452},{},[],{"type":27,"tag":70,"props":1454,"children":1456},{"id":1455},"延伸阅读建议按顺序",[1457],{"type":32,"value":1458},"延伸阅读（建议按顺序）",{"type":27,"tag":40,"props":1460,"children":1461},{},[1462,1469,1476,1483],{"type":27,"tag":44,"props":1463,"children":1464},{},[1465],{"type":27,"tag":319,"props":1466,"children":1467},{"href":451},[1468],{"type":32,"value":454},{"type":27,"tag":44,"props":1470,"children":1471},{},[1472],{"type":27,"tag":319,"props":1473,"children":1474},{"href":462},[1475],{"type":32,"value":465},{"type":27,"tag":44,"props":1477,"children":1478},{},[1479],{"type":27,"tag":319,"props":1480,"children":1481},{"href":473},[1482],{"type":32,"value":476},{"type":27,"tag":44,"props":1484,"children":1485},{},[1486,1488],{"type":32,"value":1487},"如果你更关心“网页制作落地”：看这篇 ",{"type":27,"tag":319,"props":1489,"children":1491},{"href":1490},"/topics/practical-tips/htmlpage-quick-landing-page",[1492],{"type":32,"value":1493},"3 分钟用 HTMLPAGE 做落地页",{"title":7,"searchDepth":344,"depth":344,"links":1495},[1496,1497,1498,1510,1511,1514,1519],{"id":483,"depth":347,"text":486},{"id":558,"depth":347,"text":561},{"id":806,"depth":347,"text":809,"children":1499},[1500,1501,1502,1503,1504,1505,1506,1507,1508,1509],{"id":813,"depth":344,"text":816},{"id":872,"depth":344,"text":875},{"id":942,"depth":344,"text":945},{"id":998,"depth":344,"text":1001},{"id":1038,"depth":344,"text":1041},{"id":1077,"depth":344,"text":1080},{"id":1096,"depth":344,"text":1099},{"id":1138,"depth":344,"text":1141},{"id":1173,"depth":344,"text":1176},{"id":1190,"depth":344,"text":1193},{"id":1247,"depth":347,"text":1250},{"id":1317,"depth":347,"text":1320,"children":1512},[1513],{"id":1323,"depth":344,"text":1326},{"id":1413,"depth":347,"text":1416,"children":1515},[1516,1517,1518],{"id":1419,"depth":344,"text":1422},{"id":1430,"depth":344,"text":1433},{"id":1441,"depth":344,"text":1444},{"id":1455,"depth":347,"text":1458},"content:topics:ai:cursor-keyboard-shortcuts-cheatsheet.md","topics/ai/cursor-keyboard-shortcuts-cheatsheet.md","topics/ai/cursor-keyboard-shortcuts-cheatsheet",{"_path":1524,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1525,"description":1526,"date":1527,"topic":5,"author":11,"tags":1528,"image":1532,"imageAlt":1533,"pexelsPhotoId":1534,"pexelsUrl":1535,"readingTime":22,"body":1536,"_type":354,"_id":2469,"_source":356,"_file":2470,"_stem":2471,"_extension":359},"/topics/ai/cursor-vs-copilot-vscode-workflow","Cursor vs GitHub Copilot vs VS Code：怎么选、怎么搭配、怎么把风险关在笼子里","用“任务类型×风险×验收成本”的选择矩阵解释 Cursor/Copilot/VS Code 的差异，并给出一套可落地的协作工作流（范围闸门、最小回归集、回滚策略）。","2026-03-01",[367,1529,370,1530,1531],"GitHub Copilot","AI 编程","工作流","/images/topics/ai/cursor-vs-copilot-vscode-workflow.jpg","团队在电脑前进行协作讨论",1181371,"https://www.pexels.com/photo/man-wearing-blue-dress-shirt-1181371/",{"type":24,"children":1537,"toc":2447},[1538,1543,1548,1566,1571,1589,1592,1598,1603,1634,1639,1642,1648,1656,1860,1868,1881,1884,1890,1896,1909,1914,1927,1933,1938,1971,1977,1982,2000,2003,2009,2014,2020,2025,2058,2064,2077,2082,2095,2101,2113,2119,2124,2137,2142,2145,2151,2156,2277,2280,2286,2296,2305,2323,2332,2340,2349,2367,2370,2376,2382,2387,2393,2398,2401,2406],{"type":27,"tag":28,"props":1539,"children":1540},{},[1541],{"type":32,"value":1542},"“Cursor 和 Copilot 到底有什么区别？”",{"type":27,"tag":28,"props":1544,"children":1545},{},[1546],{"type":32,"value":1547},"这个问题问得越早越好，因为你一旦把工具选错，后面所有痛苦都不是“提示词不够好”，而是：",{"type":27,"tag":40,"props":1549,"children":1550},{},[1551,1556,1561],{"type":27,"tag":44,"props":1552,"children":1553},{},[1554],{"type":32,"value":1555},"改动不可控（范围漂移、改错文件）",{"type":27,"tag":44,"props":1557,"children":1558},{},[1559],{"type":32,"value":1560},"验收成本爆炸（不知道要测什么）",{"type":27,"tag":44,"props":1562,"children":1563},{},[1564],{"type":32,"value":1565},"团队协作崩盘（没有闸门、没有回滚）",{"type":27,"tag":28,"props":1567,"children":1568},{},[1569],{"type":32,"value":1570},"这篇文章用一张选择矩阵 + 一套可执行工作流，帮你做到两件事：",{"type":27,"tag":408,"props":1572,"children":1573},{},[1574,1579],{"type":27,"tag":44,"props":1575,"children":1576},{},[1577],{"type":32,"value":1578},"知道什么时候用 Cursor、什么时候用 Copilot、什么时候“纯 VS Code 更快”",{"type":27,"tag":44,"props":1580,"children":1581},{},[1582,1584],{"type":32,"value":1583},"就算用 AI，也能把风险关在笼子里：",{"type":27,"tag":417,"props":1585,"children":1586},{},[1587],{"type":32,"value":1588},"可审查、可验证、可回滚",{"type":27,"tag":478,"props":1590,"children":1591},{},[],{"type":27,"tag":70,"props":1593,"children":1595},{"id":1594},"结论先说三者不是互斥而是分工",[1596],{"type":32,"value":1597},"结论先说：三者不是互斥，而是分工",{"type":27,"tag":28,"props":1599,"children":1600},{},[1601],{"type":32,"value":1602},"你可以把它们看成三层能力：",{"type":27,"tag":40,"props":1604,"children":1605},{},[1606,1615,1625],{"type":27,"tag":44,"props":1607,"children":1608},{},[1609,1613],{"type":27,"tag":417,"props":1610,"children":1611},{},[1612],{"type":32,"value":370},{"type":32,"value":1614},"：编辑器与生态（调试、插件、任务、终端、语言服务）",{"type":27,"tag":44,"props":1616,"children":1617},{},[1618,1623],{"type":27,"tag":417,"props":1619,"children":1620},{},[1621],{"type":32,"value":1622},"Copilot",{"type":32,"value":1624},"：代码补全与局部建议（“我正在写这一行/这一段”）",{"type":27,"tag":44,"props":1626,"children":1627},{},[1628,1632],{"type":27,"tag":417,"props":1629,"children":1630},{},[1631],{"type":32,"value":367},{"type":32,"value":1633},"：以项目为单位的 AI 协作（对话、索引、多文件编辑、规则）",{"type":27,"tag":28,"props":1635,"children":1636},{},[1637],{"type":32,"value":1638},"最常见的误区是：把“局部补全能力”当作“能做架构与多文件落地”。",{"type":27,"tag":478,"props":1640,"children":1641},{},[],{"type":27,"tag":70,"props":1643,"children":1645},{"id":1644},"选择矩阵按任务类型选工具不是按偏好",[1646],{"type":32,"value":1647},"选择矩阵：按任务类型选工具（不是按偏好）",{"type":27,"tag":793,"props":1649,"children":1650},{},[1651],{"type":27,"tag":28,"props":1652,"children":1653},{},[1654],{"type":32,"value":1655},"你只要把自己的任务放进表格，就能得到推荐路径。",{"type":27,"tag":568,"props":1657,"children":1658},{},[1659,1691],{"type":27,"tag":572,"props":1660,"children":1661},{},[1662],{"type":27,"tag":576,"props":1663,"children":1664},{},[1665,1670,1676,1681,1686],{"type":27,"tag":580,"props":1666,"children":1667},{},[1668],{"type":32,"value":1669},"任务类型",{"type":27,"tag":580,"props":1671,"children":1673},{"align":1672},"right",[1674],{"type":32,"value":1675},"风险",{"type":27,"tag":580,"props":1677,"children":1678},{"align":1672},[1679],{"type":32,"value":1680},"验收成本",{"type":27,"tag":580,"props":1682,"children":1683},{},[1684],{"type":32,"value":1685},"更推荐",{"type":27,"tag":580,"props":1687,"children":1688},{},[1689],{"type":32,"value":1690},"为什么",{"type":27,"tag":601,"props":1692,"children":1693},{},[1694,1721,1754,1780,1807,1834],{"type":27,"tag":576,"props":1695,"children":1696},{},[1697,1702,1707,1711,1716],{"type":27,"tag":608,"props":1698,"children":1699},{},[1700],{"type":32,"value":1701},"写一段代码/补一个 if",{"type":27,"tag":608,"props":1703,"children":1704},{"align":1672},[1705],{"type":32,"value":1706},"低",{"type":27,"tag":608,"props":1708,"children":1709},{"align":1672},[1710],{"type":32,"value":1706},{"type":27,"tag":608,"props":1712,"children":1713},{},[1714],{"type":32,"value":1715},"Copilot / Cursor 内联编辑",{"type":27,"tag":608,"props":1717,"children":1718},{},[1719],{"type":32,"value":1720},"局部建议足够，成本最低",{"type":27,"tag":576,"props":1722,"children":1723},{},[1724,1729,1734,1738,1749],{"type":27,"tag":608,"props":1725,"children":1726},{},[1727],{"type":32,"value":1728},"重构一个函数",{"type":27,"tag":608,"props":1730,"children":1731},{"align":1672},[1732],{"type":32,"value":1733},"中",{"type":27,"tag":608,"props":1735,"children":1736},{"align":1672},[1737],{"type":32,"value":1733},{"type":27,"tag":608,"props":1739,"children":1740},{},[1741,1743],{"type":32,"value":1742},"Cursor ",{"type":27,"tag":617,"props":1744,"children":1746},{"className":1745},[],[1747],{"type":32,"value":1748},"内联编辑",{"type":27,"tag":608,"props":1750,"children":1751},{},[1752],{"type":32,"value":1753},"需要解释、需要约束输出",{"type":27,"tag":576,"props":1755,"children":1756},{},[1757,1762,1766,1770,1775],{"type":27,"tag":608,"props":1758,"children":1759},{},[1760],{"type":32,"value":1761},"改一个组件 + 样式",{"type":27,"tag":608,"props":1763,"children":1764},{"align":1672},[1765],{"type":32,"value":1733},{"type":27,"tag":608,"props":1767,"children":1768},{"align":1672},[1769],{"type":32,"value":1733},{"type":27,"tag":608,"props":1771,"children":1772},{},[1773],{"type":32,"value":1774},"Cursor（小范围多文件）",{"type":27,"tag":608,"props":1776,"children":1777},{},[1778],{"type":32,"value":1779},"需要同时改模板与样式",{"type":27,"tag":576,"props":1781,"children":1782},{},[1783,1788,1793,1797,1802],{"type":27,"tag":608,"props":1784,"children":1785},{},[1786],{"type":32,"value":1787},"改 3~5 个文件（组件+api+测试）",{"type":27,"tag":608,"props":1789,"children":1790},{"align":1672},[1791],{"type":32,"value":1792},"高",{"type":27,"tag":608,"props":1794,"children":1795},{"align":1672},[1796],{"type":32,"value":1792},{"type":27,"tag":608,"props":1798,"children":1799},{},[1800],{"type":32,"value":1801},"Cursor Composer + 闸门",{"type":27,"tag":608,"props":1803,"children":1804},{},[1805],{"type":32,"value":1806},"需要计划、验收、回滚",{"type":27,"tag":576,"props":1808,"children":1809},{},[1810,1815,1820,1824,1829],{"type":27,"tag":608,"props":1811,"children":1812},{},[1813],{"type":32,"value":1814},"重写一段架构/引入新依赖",{"type":27,"tag":608,"props":1816,"children":1817},{"align":1672},[1818],{"type":32,"value":1819},"很高",{"type":27,"tag":608,"props":1821,"children":1822},{"align":1672},[1823],{"type":32,"value":1819},{"type":27,"tag":608,"props":1825,"children":1826},{},[1827],{"type":32,"value":1828},"先人脑设计 + VS Code 实现",{"type":27,"tag":608,"props":1830,"children":1831},{},[1832],{"type":32,"value":1833},"AI 易发散，最好先设计再执行",{"type":27,"tag":576,"props":1835,"children":1836},{},[1837,1842,1846,1850,1855],{"type":27,"tag":608,"props":1838,"children":1839},{},[1840],{"type":32,"value":1841},"排查线上问题/性能抖动",{"type":27,"tag":608,"props":1843,"children":1844},{"align":1672},[1845],{"type":32,"value":1792},{"type":27,"tag":608,"props":1847,"children":1848},{"align":1672},[1849],{"type":32,"value":1819},{"type":27,"tag":608,"props":1851,"children":1852},{},[1853],{"type":32,"value":1854},"VS Code + 工具链优先，AI 辅助归纳",{"type":27,"tag":608,"props":1856,"children":1857},{},[1858],{"type":32,"value":1859},"需要证据，不要“猜”",{"type":27,"tag":28,"props":1861,"children":1862},{},[1863],{"type":27,"tag":417,"props":1864,"children":1865},{},[1866],{"type":32,"value":1867},"一句话规则：",{"type":27,"tag":40,"props":1869,"children":1870},{},[1871,1876],{"type":27,"tag":44,"props":1872,"children":1873},{},[1874],{"type":32,"value":1875},"当你的改动可以用“10 条最小回归集”覆盖时，用 Cursor。",{"type":27,"tag":44,"props":1877,"children":1878},{},[1879],{"type":32,"value":1880},"当你的改动无法验证时，先别让 AI 动手。",{"type":27,"tag":478,"props":1882,"children":1883},{},[],{"type":27,"tag":70,"props":1885,"children":1887},{"id":1886},"差异拆解到底差在哪里",[1888],{"type":32,"value":1889},"差异拆解：到底差在哪里？",{"type":27,"tag":811,"props":1891,"children":1893},{"id":1892},"_1-上下文来源补全-vs-项目索引",[1894],{"type":32,"value":1895},"1) 上下文来源：补全 vs 项目索引",{"type":27,"tag":40,"props":1897,"children":1898},{},[1899,1904],{"type":27,"tag":44,"props":1900,"children":1901},{},[1902],{"type":32,"value":1903},"Copilot 更擅长：你正在写的这几行、当前文件的局部上下文",{"type":27,"tag":44,"props":1905,"children":1906},{},[1907],{"type":32,"value":1908},"Cursor 更擅长：项目级索引 + 多文件关联理解",{"type":27,"tag":28,"props":1910,"children":1911},{},[1912],{"type":32,"value":1913},"因此：",{"type":27,"tag":40,"props":1915,"children":1916},{},[1917,1922],{"type":27,"tag":44,"props":1918,"children":1919},{},[1920],{"type":32,"value":1921},"写代码片段：Copilot 速度更快",{"type":27,"tag":44,"props":1923,"children":1924},{},[1925],{"type":32,"value":1926},"改一坨工程：Cursor 更有胜算（但更需要闸门）",{"type":27,"tag":811,"props":1928,"children":1930},{"id":1929},"_2-交互方式你能不能控制范围",[1931],{"type":32,"value":1932},"2) 交互方式：你能不能控制范围",{"type":27,"tag":28,"props":1934,"children":1935},{},[1936],{"type":32,"value":1937},"范围控制的三个层级：",{"type":27,"tag":408,"props":1939,"children":1940},{},[1941,1951,1961],{"type":27,"tag":44,"props":1942,"children":1943},{},[1944,1946],{"type":32,"value":1945},"内联编辑（选中一段）→ ",{"type":27,"tag":417,"props":1947,"children":1948},{},[1949],{"type":32,"value":1950},"最强范围控制",{"type":27,"tag":44,"props":1952,"children":1953},{},[1954,1956],{"type":32,"value":1955},"Composer 多文件（先列文件清单）→ ",{"type":27,"tag":417,"props":1957,"children":1958},{},[1959],{"type":32,"value":1960},"可控但要闸门",{"type":27,"tag":44,"props":1962,"children":1963},{},[1964,1966],{"type":32,"value":1965},"大对话（泛目标）→ ",{"type":27,"tag":417,"props":1967,"children":1968},{},[1969],{"type":32,"value":1970},"最容易跑偏",{"type":27,"tag":811,"props":1972,"children":1974},{"id":1973},"_3-输出形态建议-vs-可审查的变更",[1975],{"type":32,"value":1976},"3) 输出形态：建议 vs 可审查的变更",{"type":27,"tag":28,"props":1978,"children":1979},{},[1980],{"type":32,"value":1981},"最好的 AI 输出不是“给我一段代码”，而是：",{"type":27,"tag":40,"props":1983,"children":1984},{},[1985,1990,1995],{"type":27,"tag":44,"props":1986,"children":1987},{},[1988],{"type":32,"value":1989},"改动摘要（做了什么）",{"type":27,"tag":44,"props":1991,"children":1992},{},[1993],{"type":32,"value":1994},"diff 级别的可审查变更",{"type":27,"tag":44,"props":1996,"children":1997},{},[1998],{"type":32,"value":1999},"验收步骤与回滚方案",{"type":27,"tag":478,"props":2001,"children":2002},{},[],{"type":27,"tag":70,"props":2004,"children":2006},{"id":2005},"一套可落地的团队工作流把风险关住",[2007],{"type":32,"value":2008},"一套可落地的团队工作流（把风险关住）",{"type":27,"tag":28,"props":2010,"children":2011},{},[2012],{"type":32,"value":2013},"下面这套流程，你可以直接写进团队规范：",{"type":27,"tag":811,"props":2015,"children":2017},{"id":2016},"step-1先写任务单geo-友好结构",[2018],{"type":32,"value":2019},"Step 1：先写任务单（GEO 友好结构）",{"type":27,"tag":28,"props":2021,"children":2022},{},[2023],{"type":32,"value":2024},"模板：",{"type":27,"tag":40,"props":2026,"children":2027},{},[2028,2033,2038,2043,2048,2053],{"type":27,"tag":44,"props":2029,"children":2030},{},[2031],{"type":32,"value":2032},"目标：……",{"type":27,"tag":44,"props":2034,"children":2035},{},[2036],{"type":32,"value":2037},"背景：……",{"type":27,"tag":44,"props":2039,"children":2040},{},[2041],{"type":32,"value":2042},"范围：只改这些文件/模块：……",{"type":27,"tag":44,"props":2044,"children":2045},{},[2046],{"type":32,"value":2047},"非目标：不做哪些事情：……",{"type":27,"tag":44,"props":2049,"children":2050},{},[2051],{"type":32,"value":2052},"验收：如何判断完成（可测试/可观察）：……",{"type":27,"tag":44,"props":2054,"children":2055},{},[2056],{"type":32,"value":2057},"回滚：如果失败怎么撤回：……",{"type":27,"tag":811,"props":2059,"children":2061},{"id":2060},"step-2用范围闸门限制-ai",[2062],{"type":32,"value":2063},"Step 2：用“范围闸门”限制 AI",{"type":27,"tag":40,"props":2065,"children":2066},{},[2067,2072],{"type":27,"tag":44,"props":2068,"children":2069},{},[2070],{"type":32,"value":2071},"单文件改动：优先 Cursor 内联编辑",{"type":27,"tag":44,"props":2073,"children":2074},{},[2075],{"type":32,"value":2076},"多文件改动：必须先让 AI 输出“文件清单（≤5）+ 每步验收”",{"type":27,"tag":28,"props":2078,"children":2079},{},[2080],{"type":32,"value":2081},"如果 AI 输出的文件清单超过 5 个：",{"type":27,"tag":40,"props":2083,"children":2084},{},[2085,2090],{"type":27,"tag":44,"props":2086,"children":2087},{},[2088],{"type":32,"value":2089},"不是它太强，是任务太大",{"type":27,"tag":44,"props":2091,"children":2092},{},[2093],{"type":32,"value":2094},"你需要拆任务，而不是继续推进",{"type":27,"tag":811,"props":2096,"children":2098},{"id":2097},"step-3最小回归集10-条",[2099],{"type":32,"value":2100},"Step 3：最小回归集（10 条）",{"type":27,"tag":28,"props":2102,"children":2103},{},[2104,2106,2111],{"type":32,"value":2105},"每次接受改动前必须跑（可参考：",{"type":27,"tag":319,"props":2107,"children":2108},{"href":362},[2109],{"type":32,"value":2110},"Cursor 快捷键速查表",{"type":32,"value":2112}," 里的清单）。",{"type":27,"tag":811,"props":2114,"children":2116},{"id":2115},"step-4回滚策略不用等事故才想",[2117],{"type":32,"value":2118},"Step 4：回滚策略（不用等事故才想）",{"type":27,"tag":28,"props":2120,"children":2121},{},[2122],{"type":32,"value":2123},"回滚最常见的两条路：",{"type":27,"tag":40,"props":2125,"children":2126},{},[2127,2132],{"type":27,"tag":44,"props":2128,"children":2129},{},[2130],{"type":32,"value":2131},"git 回滚 commit",{"type":27,"tag":44,"props":2133,"children":2134},{},[2135],{"type":32,"value":2136},"对关键文件保留前版本（至少能快速恢复）",{"type":27,"tag":28,"props":2138,"children":2139},{},[2140],{"type":32,"value":2141},"你需要做到：任何一轮 AI 改动都能在 5 分钟内撤回。",{"type":27,"tag":478,"props":2143,"children":2144},{},[],{"type":27,"tag":70,"props":2146,"children":2148},{"id":2147},"必交付物对比矩阵可复制",[2149],{"type":32,"value":2150},"必交付物：对比矩阵（可复制）",{"type":27,"tag":28,"props":2152,"children":2153},{},[2154],{"type":32,"value":2155},"下面这张表可以直接贴到你的团队 wiki：",{"type":27,"tag":568,"props":2157,"children":2158},{},[2159,2182],{"type":27,"tag":572,"props":2160,"children":2161},{},[2162],{"type":27,"tag":576,"props":2163,"children":2164},{},[2165,2170,2174,2178],{"type":27,"tag":580,"props":2166,"children":2167},{},[2168],{"type":32,"value":2169},"维度",{"type":27,"tag":580,"props":2171,"children":2172},{},[2173],{"type":32,"value":370},{"type":27,"tag":580,"props":2175,"children":2176},{},[2177],{"type":32,"value":1622},{"type":27,"tag":580,"props":2179,"children":2180},{},[2181],{"type":32,"value":367},{"type":27,"tag":601,"props":2183,"children":2184},{},[2185,2208,2231,2254],{"type":27,"tag":576,"props":2186,"children":2187},{},[2188,2193,2198,2203],{"type":27,"tag":608,"props":2189,"children":2190},{},[2191],{"type":32,"value":2192},"强项",{"type":27,"tag":608,"props":2194,"children":2195},{},[2196],{"type":32,"value":2197},"工具链、调试、生态",{"type":27,"tag":608,"props":2199,"children":2200},{},[2201],{"type":32,"value":2202},"补全与局部建议",{"type":27,"tag":608,"props":2204,"children":2205},{},[2206],{"type":32,"value":2207},"项目上下文、多文件落地",{"type":27,"tag":576,"props":2209,"children":2210},{},[2211,2216,2221,2226],{"type":27,"tag":608,"props":2212,"children":2213},{},[2214],{"type":32,"value":2215},"适合任务",{"type":27,"tag":608,"props":2217,"children":2218},{},[2219],{"type":32,"value":2220},"排查、调试、验证",{"type":27,"tag":608,"props":2222,"children":2223},{},[2224],{"type":32,"value":2225},"写一段、补一段",{"type":27,"tag":608,"props":2227,"children":2228},{},[2229],{"type":32,"value":2230},"改一段、改一组文件",{"type":27,"tag":576,"props":2232,"children":2233},{},[2234,2239,2244,2249],{"type":27,"tag":608,"props":2235,"children":2236},{},[2237],{"type":32,"value":2238},"最大风险",{"type":27,"tag":608,"props":2240,"children":2241},{},[2242],{"type":32,"value":2243},"无",{"type":27,"tag":608,"props":2245,"children":2246},{},[2247],{"type":32,"value":2248},"过度依赖建议",{"type":27,"tag":608,"props":2250,"children":2251},{},[2252],{"type":32,"value":2253},"范围漂移、多文件回归",{"type":27,"tag":576,"props":2255,"children":2256},{},[2257,2262,2267,2272],{"type":27,"tag":608,"props":2258,"children":2259},{},[2260],{"type":32,"value":2261},"必须搭配",{"type":27,"tag":608,"props":2263,"children":2264},{},[2265],{"type":32,"value":2266},"规范与检查",{"type":27,"tag":608,"props":2268,"children":2269},{},[2270],{"type":32,"value":2271},"代码评审",{"type":27,"tag":608,"props":2273,"children":2274},{},[2275],{"type":32,"value":2276},"闸门 + 最小回归集",{"type":27,"tag":478,"props":2278,"children":2279},{},[],{"type":27,"tag":70,"props":2281,"children":2283},{"id":2282},"失败案例多文件看似成功实际埋雷",[2284],{"type":32,"value":2285},"失败案例：多文件“看似成功”，实际埋雷",{"type":27,"tag":28,"props":2287,"children":2288},{},[2289,2294],{"type":27,"tag":417,"props":2290,"children":2291},{},[2292],{"type":32,"value":2293},"现象",{"type":32,"value":2295},"：AI 说“我已经把所有地方都改了”，你也接受了，结果上线后 404 或样式错位。",{"type":27,"tag":28,"props":2297,"children":2298},{},[2299,2304],{"type":27,"tag":417,"props":2300,"children":2301},{},[2302],{"type":32,"value":2303},"复现条件",{"type":32,"value":1117},{"type":27,"tag":40,"props":2306,"children":2307},{},[2308,2313,2318],{"type":27,"tag":44,"props":2309,"children":2310},{},[2311],{"type":32,"value":2312},"你给了一个大目标（例如“把所有按钮统一成主题色”）",{"type":27,"tag":44,"props":2314,"children":2315},{},[2316],{"type":32,"value":2317},"它改了组件、样式、甚至主题配置",{"type":27,"tag":44,"props":2319,"children":2320},{},[2321],{"type":32,"value":2322},"你没有按页面模块走一遍，直接合并",{"type":27,"tag":28,"props":2324,"children":2325},{},[2326,2331],{"type":27,"tag":417,"props":2327,"children":2328},{},[2329],{"type":32,"value":2330},"根因",{"type":32,"value":1117},{"type":27,"tag":40,"props":2333,"children":2334},{},[2335],{"type":27,"tag":44,"props":2336,"children":2337},{},[2338],{"type":32,"value":2339},"改动范围大，但验收仍按“小改动”的方式做（只看一处）",{"type":27,"tag":28,"props":2341,"children":2342},{},[2343,2348],{"type":27,"tag":417,"props":2344,"children":2345},{},[2346],{"type":32,"value":2347},"修复",{"type":32,"value":1117},{"type":27,"tag":40,"props":2350,"children":2351},{},[2352,2357,2362],{"type":27,"tag":44,"props":2353,"children":2354},{},[2355],{"type":32,"value":2356},"强制把任务拆成“模块级目标”：Hero、Feature、Pricing、Form",{"type":27,"tag":44,"props":2358,"children":2359},{},[2360],{"type":32,"value":2361},"每个模块改完就验收一次",{"type":27,"tag":44,"props":2363,"children":2364},{},[2365],{"type":32,"value":2366},"验收通过再进入下一个模块",{"type":27,"tag":478,"props":2368,"children":2369},{},[],{"type":27,"tag":70,"props":2371,"children":2373},{"id":2372},"faq",[2374],{"type":32,"value":2375},"FAQ",{"type":27,"tag":811,"props":2377,"children":2379},{"id":2378},"q1我已经用了-cursor为什么还要用-copilot",[2380],{"type":32,"value":2381},"Q1：我已经用了 Cursor，为什么还要用 Copilot？",{"type":27,"tag":28,"props":2383,"children":2384},{},[2385],{"type":32,"value":2386},"因为“补全”这种高频低风险任务，Copilot 的交互成本更低；Cursor 更适合需要解释与约束的改动。",{"type":27,"tag":811,"props":2388,"children":2390},{"id":2389},"q2什么时候应该完全不用-ai",[2391],{"type":32,"value":2392},"Q2：什么时候应该完全不用 AI？",{"type":27,"tag":28,"props":2394,"children":2395},{},[2396],{"type":32,"value":2397},"当你无法定义验收标准时。比如“更高级”“更好看”这种目标，先做信息结构与设计规则，再让 AI 帮你落地局部。",{"type":27,"tag":478,"props":2399,"children":2400},{},[],{"type":27,"tag":70,"props":2402,"children":2404},{"id":2403},"延伸阅读",[2405],{"type":32,"value":2403},{"type":27,"tag":40,"props":2407,"children":2408},{},[2409,2418,2427,2436],{"type":27,"tag":44,"props":2410,"children":2411},{},[2412,2414],{"type":32,"value":2413},"Cursor 入门：",{"type":27,"tag":319,"props":2415,"children":2416},{"href":451},[2417],{"type":32,"value":454},{"type":27,"tag":44,"props":2419,"children":2420},{},[2421,2423],{"type":32,"value":2422},"Cursor 进阶：",{"type":27,"tag":319,"props":2424,"children":2425},{"href":462},[2426],{"type":32,"value":465},{"type":27,"tag":44,"props":2428,"children":2429},{},[2430,2432],{"type":32,"value":2431},"规则配置：",{"type":27,"tag":319,"props":2433,"children":2434},{"href":473},[2435],{"type":32,"value":476},{"type":27,"tag":44,"props":2437,"children":2438},{},[2439,2441],{"type":32,"value":2440},"Copilot 实战：",{"type":27,"tag":319,"props":2442,"children":2444},{"href":2443},"/topics/ai/github-copilot-tips",[2445],{"type":32,"value":2446},"GitHub Copilot 实用技巧",{"title":7,"searchDepth":344,"depth":344,"links":2448},[2449,2450,2451,2456,2462,2463,2464,2468],{"id":1594,"depth":347,"text":1597},{"id":1644,"depth":347,"text":1647},{"id":1886,"depth":347,"text":1889,"children":2452},[2453,2454,2455],{"id":1892,"depth":344,"text":1895},{"id":1929,"depth":344,"text":1932},{"id":1973,"depth":344,"text":1976},{"id":2005,"depth":347,"text":2008,"children":2457},[2458,2459,2460,2461],{"id":2016,"depth":344,"text":2019},{"id":2060,"depth":344,"text":2063},{"id":2097,"depth":344,"text":2100},{"id":2115,"depth":344,"text":2118},{"id":2147,"depth":347,"text":2150},{"id":2282,"depth":347,"text":2285},{"id":2372,"depth":347,"text":2375,"children":2465},[2466,2467],{"id":2378,"depth":344,"text":2381},{"id":2389,"depth":344,"text":2392},{"id":2403,"depth":347,"text":2403},"content:topics:ai:cursor-vs-copilot-vscode-workflow.md","topics/ai/cursor-vs-copilot-vscode-workflow.md","topics/ai/cursor-vs-copilot-vscode-workflow",{"_path":2473,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2474,"description":2475,"date":2476,"topic":5,"author":11,"tags":2477,"image":2482,"featured":2483,"readingTime":22,"body":2484,"_type":354,"_id":3133,"_source":356,"_file":3134,"_stem":3135,"_extension":359},"/topics/ai/ai-debugging-troubleshooting-guide","AI 辅助调试与问题排查：让 AI 成为你的调试搭档","深入探讨如何利用 AI 工具提升调试效率，包括错误信息分析、日志解读、性能问题定位、复杂 bug 排查等实战场景，构建 AI 驱动的调试工作流。","2026-01-18",[2478,2479,2480,371,2481],"AI 调试","问题排查","Debug","错误处理","/images/topics/ai/ai-debugging-guide.jpg",true,{"type":24,"children":2485,"toc":3104},[2486,2492,2498,2503,2508,2513,2519,2525,2530,2538,2566,2574,2597,2603,2614,2623,2631,2639,2672,2680,2710,2723,2731,2736,2744,2752,2763,2769,2777,2788,2796,2805,2811,2817,2822,2831,2837,2842,2851,2857,2863,2872,2878,2887,2893,2904,2910,2916,2925,2931,2940,2946,2952,2960,2966,2975,2983,2991,2994,3000,3005,3024,3036,3039,3045,3050,3059,3064,3067,3073,3078,3096],{"type":27,"tag":70,"props":2487,"children":2489},{"id":2488},"ai-辅助调试与问题排查",[2490],{"type":32,"value":2491},"AI 辅助调试与问题排查",{"type":27,"tag":70,"props":2493,"children":2495},{"id":2494},"引言调试的痛与-ai-的解药",[2496],{"type":32,"value":2497},"引言：调试的痛与 AI 的解药",{"type":27,"tag":28,"props":2499,"children":2500},{},[2501],{"type":32,"value":2502},"调试是每个程序员的日常，也是最消耗时间和精力的工作之一。我们都有过这样的经历：盯着一个莫名其妙的错误信息，翻遍 Stack Overflow，尝试各种方案，几个小时后才发现是一个愚蠢的拼写错误。",{"type":27,"tag":28,"props":2504,"children":2505},{},[2506],{"type":32,"value":2507},"AI 工具的出现，正在改变调试的方式。不是替代你的思考，而是加速你的分析过程——帮你快速理解错误、缩小排查范围、验证假设。",{"type":27,"tag":28,"props":2509,"children":2510},{},[2511],{"type":32,"value":2512},"这篇文章分享我在实际项目中使用 AI 辅助调试的经验和方法论。",{"type":27,"tag":70,"props":2514,"children":2516},{"id":2515},"第一部分建立-ai-调试的思维模型",[2517],{"type":32,"value":2518},"第一部分：建立 AI 调试的思维模型",{"type":27,"tag":811,"props":2520,"children":2522},{"id":2521},"_11-ai-在调试中的角色",[2523],{"type":32,"value":2524},"1.1 AI 在调试中的角色",{"type":27,"tag":28,"props":2526,"children":2527},{},[2528],{"type":32,"value":2529},"把 AI 想象成一个经验丰富但不了解你项目的高级工程师。它：",{"type":27,"tag":28,"props":2531,"children":2532},{},[2533],{"type":27,"tag":417,"props":2534,"children":2535},{},[2536],{"type":32,"value":2537},"擅长的事情：",{"type":27,"tag":40,"props":2539,"children":2540},{},[2541,2546,2551,2556,2561],{"type":27,"tag":44,"props":2542,"children":2543},{},[2544],{"type":32,"value":2545},"解读错误信息的含义",{"type":27,"tag":44,"props":2547,"children":2548},{},[2549],{"type":32,"value":2550},"提供可能的原因列表",{"type":27,"tag":44,"props":2552,"children":2553},{},[2554],{"type":32,"value":2555},"给出排查方向建议",{"type":27,"tag":44,"props":2557,"children":2558},{},[2559],{"type":32,"value":2560},"解释复杂的技术概念",{"type":27,"tag":44,"props":2562,"children":2563},{},[2564],{"type":32,"value":2565},"生成调试代码片段",{"type":27,"tag":28,"props":2567,"children":2568},{},[2569],{"type":27,"tag":417,"props":2570,"children":2571},{},[2572],{"type":32,"value":2573},"不擅长的事情：",{"type":27,"tag":40,"props":2575,"children":2576},{},[2577,2582,2587,2592],{"type":27,"tag":44,"props":2578,"children":2579},{},[2580],{"type":32,"value":2581},"了解你的业务逻辑",{"type":27,"tag":44,"props":2583,"children":2584},{},[2585],{"type":32,"value":2586},"知道你的代码历史",{"type":27,"tag":44,"props":2588,"children":2589},{},[2590],{"type":32,"value":2591},"理解项目特定的约定",{"type":27,"tag":44,"props":2593,"children":2594},{},[2595],{"type":32,"value":2596},"做出架构级判断",{"type":27,"tag":811,"props":2598,"children":2600},{"id":2599},"_12-有效提问的结构",[2601],{"type":32,"value":2602},"1.2 有效提问的结构",{"type":27,"tag":2604,"props":2605,"children":2609},"pre",{"code":2606,"language":354,"meta":7,"className":2607},"## 高效的调试提问模板\n\n**问题描述**\n[简洁描述遇到的问题]\n\n**错误信息**\n",[2608],"language-markdown",[2610],{"type":27,"tag":617,"props":2611,"children":2612},{"__ignoreMap":7},[2613],{"type":32,"value":2606},{"type":27,"tag":28,"props":2615,"children":2616},{},[2617],{"type":27,"tag":2618,"props":2619,"children":2620},"span",{},[2621],{"type":32,"value":2622},"完整的错误信息，不要截断",{"type":27,"tag":2604,"props":2624,"children":2626},{"code":2625},"\n**相关代码**\n```javascript\n[精简但完整的相关代码]\n",[2627],{"type":27,"tag":617,"props":2628,"children":2629},{"__ignoreMap":7},[2630],{"type":32,"value":2625},{"type":27,"tag":28,"props":2632,"children":2633},{},[2634],{"type":27,"tag":417,"props":2635,"children":2636},{},[2637],{"type":32,"value":2638},"环境信息",{"type":27,"tag":40,"props":2640,"children":2641},{},[2642,2652,2662],{"type":27,"tag":44,"props":2643,"children":2644},{},[2645,2647],{"type":32,"value":2646},"运行环境：",{"type":27,"tag":2618,"props":2648,"children":2649},{},[2650],{"type":32,"value":2651},"Node 版本/浏览器版本",{"type":27,"tag":44,"props":2653,"children":2654},{},[2655,2657],{"type":32,"value":2656},"框架版本：",{"type":27,"tag":2618,"props":2658,"children":2659},{},[2660],{"type":32,"value":2661},"相关框架版本",{"type":27,"tag":44,"props":2663,"children":2664},{},[2665,2667],{"type":32,"value":2666},"操作系统：",{"type":27,"tag":2618,"props":2668,"children":2669},{},[2670],{"type":32,"value":2671},"如果相关",{"type":27,"tag":28,"props":2673,"children":2674},{},[2675],{"type":27,"tag":417,"props":2676,"children":2677},{},[2678],{"type":32,"value":2679},"已尝试的方案",{"type":27,"tag":40,"props":2681,"children":2682},{},[2683,2697],{"type":27,"tag":44,"props":2684,"children":2685},{},[2686,2691,2692],{"type":27,"tag":2618,"props":2687,"children":2688},{},[2689],{"type":32,"value":2690},"方案1",{"type":32,"value":1117},{"type":27,"tag":2618,"props":2693,"children":2694},{},[2695],{"type":32,"value":2696},"结果",{"type":27,"tag":44,"props":2698,"children":2699},{},[2700,2705,2706],{"type":27,"tag":2618,"props":2701,"children":2702},{},[2703],{"type":32,"value":2704},"方案2",{"type":32,"value":1117},{"type":27,"tag":2618,"props":2707,"children":2708},{},[2709],{"type":32,"value":2696},{"type":27,"tag":28,"props":2711,"children":2712},{},[2713,2718],{"type":27,"tag":417,"props":2714,"children":2715},{},[2716],{"type":32,"value":2717},"期望的结果",{"type":27,"tag":2618,"props":2719,"children":2720},{},[2721],{"type":32,"value":2722},"描述期望的行为",{"type":27,"tag":2604,"props":2724,"children":2726},{"code":2725},"\n### 1.3 分级调试策略\n\n",[2727],{"type":27,"tag":617,"props":2728,"children":2729},{"__ignoreMap":7},[2730],{"type":32,"value":2725},{"type":27,"tag":28,"props":2732,"children":2733},{},[2734],{"type":32,"value":2735},"┌───────────────────────────────────────────────────────────┐\n│                    AI 辅助调试决策树                        │\n├───────────────────────────────────────────────────────────┤\n│                                                           │\n│  Level 1：简单错误（5分钟内解决）                           │\n│  ├── 语法错误、拼写错误                                    │\n│  ├── 方法：直接复制错误信息给 AI                           │\n│  └── 工具：Copilot Chat / ChatGPT                        │\n│                                                           │\n│  Level 2：中等复杂度（30分钟内解决）                        │\n│  ├── 类型错误、逻辑错误、API 使用错误                      │\n│  ├── 方法：提供错误信息 + 相关代码 + 上下文                 │\n│  └── 工具：Cursor Chat / Claude                          │\n│                                                           │\n│  Level 3：复杂问题（需要深入分析）                          │\n│  ├── 竞态条件、内存泄漏、性能问题                          │\n│  ├── 方法：详细描述场景 + 提供多个文件 + 讨论               │\n│  └── 工具：Cursor Composer / 专门的 AI 会话                │\n│                                                           │\n│  Level 4：架构级问题                                       │\n│  ├── 设计缺陷、技术债务                                    │\n│  ├── 方法：AI 辅助分析 + 人工判断                          │\n│  └── 工具：与团队讨论 + AI 作为顾问                        │\n│                                                           │\n└───────────────────────────────────────────────────────────┘",{"type":27,"tag":2604,"props":2737,"children":2739},{"code":2738},"\n## 第二部分：错误信息分析\n\n### 2.1 前端错误分析\n\n**场景 1：React 错误边界触发**\n\n```typescript\n// 错误信息：\n// Error: Hydration failed because the initial UI does not match \n// what was rendered on the server.\n\n// 提问方式：\n/**\n * 我在 Next.js 14 App Router 项目中遇到这个错误：\n * \n * Error: Hydration failed because the initial UI does not match \n * what was rendered on the server.\n * \n * 相关代码：\n */\nfunction UserStatus() {\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n  \n  useEffect(() => {\n    setIsLoggedIn(localStorage.getItem('token') !== null);\n  }, []);\n  \n  return \u003Cdiv>{isLoggedIn ? '已登录' : '未登录'}\u003C/div>;\n}\n\n// AI 会分析出：\n// 1. 服务端渲染时 localStorage 不可用，默认 false\n// 2. 客户端 hydration 时可能是 true\n// 3. 导致服务端和客户端渲染结果不一致\n\n// AI 建议的解决方案：\nfunction UserStatus() {\n  const [isLoggedIn, setIsLoggedIn] = useState\u003Cboolean | null>(null);\n  \n  useEffect(() => {\n    setIsLoggedIn(localStorage.getItem('token') !== null);\n  }, []);\n  \n  // 初始状态显示加载中，避免 hydration 不匹配\n  if (isLoggedIn === null) {\n    return \u003Cdiv>加载中...\u003C/div>;\n  }\n  \n  return \u003Cdiv>{isLoggedIn ? '已登录' : '未登录'}\u003C/div>;\n}\n",[2740],{"type":27,"tag":617,"props":2741,"children":2742},{"__ignoreMap":7},[2743],{"type":32,"value":2738},{"type":27,"tag":28,"props":2745,"children":2746},{},[2747],{"type":27,"tag":417,"props":2748,"children":2749},{},[2750],{"type":32,"value":2751},"场景 2：Vue 响应式警告",{"type":27,"tag":2604,"props":2753,"children":2758},{"code":2754,"language":2755,"meta":7,"className":2756},"// 警告信息：\n// [Vue warn]: Property \"xxx\" was accessed during render but is not \n// defined on instance.\n\n// 提问方式：\n/**\n * Vue 3 项目中出现这个警告：\n * [Vue warn]: Property \"userInfo\" was accessed during render \n * but is not defined on instance.\n * \n * 组件代码：\n */\n\u003Ctemplate>\n  \u003Cdiv>{{ userInfo.name }}\u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst { data: userInfo } = await useFetch('/api/user');\n\u003C/script>\n\n// AI 分析：\n// 1. useFetch 是异步的，初始渲染时 userInfo 可能是 undefined\n// 2. 直接访问 userInfo.name 会报错\n\n// AI 建议：\n\u003Ctemplate>\n  \u003Cdiv v-if=\"userInfo\">{{ userInfo.name }}\u003C/div>\n  \u003Cdiv v-else>加载中...\u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst { data: userInfo, pending } = await useFetch('/api/user');\n\u003C/script>\n","typescript",[2757],"language-typescript",[2759],{"type":27,"tag":617,"props":2760,"children":2761},{"__ignoreMap":7},[2762],{"type":32,"value":2754},{"type":27,"tag":811,"props":2764,"children":2766},{"id":2765},"_22-后端错误分析",[2767],{"type":32,"value":2768},"2.2 后端错误分析",{"type":27,"tag":28,"props":2770,"children":2771},{},[2772],{"type":27,"tag":417,"props":2773,"children":2774},{},[2775],{"type":32,"value":2776},"场景 1：Node.js 内存问题",{"type":27,"tag":2604,"props":2778,"children":2783},{"code":2779,"language":2780,"meta":7,"className":2781},"// 错误信息：\n// FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - \n// JavaScript heap out of memory\n\n// 提问方式（包含上下文）：\n/**\n * Node.js 服务运行几小时后崩溃，错误信息：\n * FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - \n * JavaScript heap out of memory\n * \n * 服务功能：处理 CSV 文件上传，每次约 100MB\n * \n * 处理代码：\n */\nasync function processCSV(filePath) {\n  const content = fs.readFileSync(filePath, 'utf-8');\n  const rows = content.split('\\n');\n  const results = [];\n  \n  for (const row of rows) {\n    const processed = await processRow(row);\n    results.push(processed);\n  }\n  \n  return results;\n}\n\n// AI 分析会指出：\n// 1. 一次性读取整个文件到内存\n// 2. 所有处理结果累积在 results 数组\n// 3. 建议使用流式处理\n\n// AI 提供的优化方案：\nconst { createReadStream } = require('fs');\nconst { createInterface } = require('readline');\n\nasync function processCSVStream(filePath, onRow) {\n  const fileStream = createReadStream(filePath);\n  const rl = createInterface({\n    input: fileStream,\n    crlfDelay: Infinity\n  });\n  \n  let count = 0;\n  for await (const line of rl) {\n    await onRow(line);\n    count++;\n    \n    // 每处理 1000 行，给 GC 机会运行\n    if (count % 1000 === 0) {\n      await new Promise(r => setImmediate(r));\n    }\n  }\n}\n","javascript",[2782],"language-javascript",[2784],{"type":27,"tag":617,"props":2785,"children":2786},{"__ignoreMap":7},[2787],{"type":32,"value":2779},{"type":27,"tag":28,"props":2789,"children":2790},{},[2791],{"type":27,"tag":417,"props":2792,"children":2793},{},[2794],{"type":32,"value":2795},"场景 2：数据库连接问题",{"type":27,"tag":2604,"props":2797,"children":2800},{"code":2798,"language":2755,"meta":7,"className":2799},"// 错误信息：\n// Error: Connection pool exhausted - \n// max connections (10) already in use\n\n// 提问方式：\n/**\n * PostgreSQL 连接池耗尽错误，高并发时出现：\n * Error: Connection pool exhausted\n * \n * 当前配置：\n * - max connections: 10\n * - 并发请求: 约 100/秒\n * \n * 数据库调用代码：\n */\nasync function getUserData(userId: string) {\n  const client = await pool.connect();\n  try {\n    const user = await client.query('SELECT * FROM users WHERE id = $1', [userId]);\n    const orders = await client.query('SELECT * FROM orders WHERE user_id = $1', [userId]);\n    const payments = await client.query('SELECT * FROM payments WHERE user_id = $1', [userId]);\n    return { user: user.rows[0], orders: orders.rows, payments: payments.rows };\n  } finally {\n    client.release();\n  }\n}\n\n// AI 会分析出多个可能原因并给出综合方案\n",[2757],[2801],{"type":27,"tag":617,"props":2802,"children":2803},{"__ignoreMap":7},[2804],{"type":32,"value":2798},{"type":27,"tag":70,"props":2806,"children":2808},{"id":2807},"第三部分日志分析与问题定位",[2809],{"type":32,"value":2810},"第三部分：日志分析与问题定位",{"type":27,"tag":811,"props":2812,"children":2814},{"id":2813},"_31-结构化日志分析",[2815],{"type":32,"value":2816},"3.1 结构化日志分析",{"type":27,"tag":28,"props":2818,"children":2819},{},[2820],{"type":32,"value":2821},"当面对大量日志时，让 AI 帮你快速定位问题：",{"type":27,"tag":2604,"props":2823,"children":2826},{"code":2824,"language":2780,"meta":7,"className":2825},"// 提问示例：\n/**\n * 分析以下日志，找出导致请求失败的原因：\n * \n * 日志片段：\n */\nconst logs = `\n2024-01-15 10:23:45.123 INFO  [req-abc123] 收到请求 POST /api/order\n2024-01-15 10:23:45.125 DEBUG [req-abc123] 用户认证通过 userId=u001\n2024-01-15 10:23:45.130 DEBUG [req-abc123] 开始库存检查 productId=p001\n2024-01-15 10:23:45.145 DEBUG [req-abc123] 库存检查通过 available=50\n2024-01-15 10:23:45.150 DEBUG [req-abc123] 开始创建订单\n2024-01-15 10:23:45.200 DEBUG [req-abc123] 数据库连接获取成功\n2024-01-15 10:23:45.250 ERROR [req-abc123] 订单创建失败 error=\"deadlock detected\"\n2024-01-15 10:23:45.251 WARN  [req-abc123] 事务回滚\n2024-01-15 10:23:45.255 INFO  [req-abc123] 响应 500 耗时 132ms\n`;\n\n// AI 分析结果会包括：\n// 1. 问题定位：数据库死锁\n// 2. 可能原因：并发订单创建导致锁竞争\n// 3. 排查建议：检查事务隔离级别、锁顺序\n",[2782],[2827],{"type":27,"tag":617,"props":2828,"children":2829},{"__ignoreMap":7},[2830],{"type":32,"value":2824},{"type":27,"tag":811,"props":2832,"children":2834},{"id":2833},"_32-创建调试日志",[2835],{"type":32,"value":2836},"3.2 创建调试日志",{"type":27,"tag":28,"props":2838,"children":2839},{},[2840],{"type":32,"value":2841},"让 AI 帮你生成调试用的日志代码：",{"type":27,"tag":2604,"props":2843,"children":2846},{"code":2844,"language":2755,"meta":7,"className":2845},"// 请求：\n// \"为这个函数添加详细的调试日志，包括入参、关键步骤、耗时和结果\"\n\n// 原代码：\nasync function processOrder(order: Order): Promise\u003COrderResult> {\n  const inventory = await checkInventory(order.items);\n  const payment = await processPayment(order.userId, order.total);\n  const result = await createOrder(order, payment.transactionId);\n  return result;\n}\n\n// AI 生成的带日志版本：\nasync function processOrder(order: Order): Promise\u003COrderResult> {\n  const requestId = generateRequestId();\n  const startTime = performance.now();\n  \n  logger.info({\n    requestId,\n    event: 'order_processing_start',\n    orderId: order.id,\n    userId: order.userId,\n    itemCount: order.items.length,\n    total: order.total\n  });\n  \n  try {\n    // 库存检查\n    const inventoryStart = performance.now();\n    const inventory = await checkInventory(order.items);\n    logger.debug({\n      requestId,\n      event: 'inventory_check_complete',\n      duration: performance.now() - inventoryStart,\n      available: inventory.allAvailable\n    });\n    \n    // 支付处理\n    const paymentStart = performance.now();\n    const payment = await processPayment(order.userId, order.total);\n    logger.debug({\n      requestId,\n      event: 'payment_complete',\n      duration: performance.now() - paymentStart,\n      transactionId: payment.transactionId\n    });\n    \n    // 创建订单\n    const createStart = performance.now();\n    const result = await createOrder(order, payment.transactionId);\n    logger.debug({\n      requestId,\n      event: 'order_created',\n      duration: performance.now() - createStart,\n      resultOrderId: result.orderId\n    });\n    \n    logger.info({\n      requestId,\n      event: 'order_processing_complete',\n      duration: performance.now() - startTime,\n      success: true\n    });\n    \n    return result;\n  } catch (error) {\n    logger.error({\n      requestId,\n      event: 'order_processing_failed',\n      duration: performance.now() - startTime,\n      error: error.message,\n      stack: error.stack\n    });\n    throw error;\n  }\n}\n",[2757],[2847],{"type":27,"tag":617,"props":2848,"children":2849},{"__ignoreMap":7},[2850],{"type":32,"value":2844},{"type":27,"tag":70,"props":2852,"children":2854},{"id":2853},"第四部分性能问题排查",[2855],{"type":32,"value":2856},"第四部分：性能问题排查",{"type":27,"tag":811,"props":2858,"children":2860},{"id":2859},"_41-前端性能分析",[2861],{"type":32,"value":2862},"4.1 前端性能分析",{"type":27,"tag":2604,"props":2864,"children":2867},{"code":2865,"language":2755,"meta":7,"className":2866},"// 场景：页面加载慢，需要分析原因\n\n// 提问方式：\n/**\n * 页面首屏加载需要 5 秒，以下是 Performance API 数据，\n * 请分析性能瓶颈：\n */\nconst performanceData = {\n  // Navigation Timing\n  dns: 50,           // DNS 查询\n  tcp: 100,          // TCP 连接\n  ttfb: 800,         // 首字节时间\n  download: 200,     // 文档下载\n  domParsing: 300,   // DOM 解析\n  domContentLoaded: 1500,\n  load: 5000,\n  \n  // Resource Timing (主要资源)\n  resources: [\n    { name: 'main.js', size: '2.5MB', duration: 1200 },\n    { name: 'vendor.js', size: '1.8MB', duration: 900 },\n    { name: 'styles.css', size: '500KB', duration: 300 },\n    { name: 'hero-image.jpg', size: '3MB', duration: 1500 },\n  ],\n  \n  // Long Tasks\n  longTasks: [\n    { startTime: 1600, duration: 800, name: 'script-evaluation' },\n    { startTime: 2500, duration: 400, name: 'layout' }\n  ]\n};\n\n// AI 会分析出：\n// 1. JS bundle 过大（4.3MB），需要代码分割\n// 2. 图片未优化（3MB 的 hero 图片）\n// 3. 存在长任务阻塞主线程\n// 并给出具体优化建议\n",[2757],[2868],{"type":27,"tag":617,"props":2869,"children":2870},{"__ignoreMap":7},[2871],{"type":32,"value":2865},{"type":27,"tag":811,"props":2873,"children":2875},{"id":2874},"_42-内存泄漏排查",[2876],{"type":32,"value":2877},"4.2 内存泄漏排查",{"type":27,"tag":2604,"props":2879,"children":2882},{"code":2880,"language":2755,"meta":7,"className":2881},"// 场景：应用运行一段时间后变卡\n\n// 提问方式：\n/**\n * React 应用运行一段时间后内存持续增长，以下是 Heap Snapshot 对比：\n * \n * 初始状态：50MB\n * 运行 1 小时后：150MB\n * 运行 2 小时后：280MB\n * \n * Retained objects 增长最快的：\n * - (closure) - 增长 50MB\n * - HTMLDivElement - 增长 30MB\n * - Array - 增长 20MB\n * \n * 可疑代码：\n */\nfunction DataDashboard() {\n  const [data, setData] = useState([]);\n  const chartRef = useRef(null);\n  \n  useEffect(() => {\n    // 每秒刷新数据\n    const interval = setInterval(async () => {\n      const newData = await fetchLatestData();\n      setData(prev => [...prev, ...newData]);  // 数据不断累积\n    }, 1000);\n    \n    // 初始化图表\n    const chart = new Chart(chartRef.current, {\n      // 配置...\n    });\n    \n    // 没有 cleanup！\n  }, []);\n  \n  return \u003Ccanvas ref={chartRef} />;\n}\n\n// AI 会指出：\n// 1. interval 没有清理\n// 2. Chart 实例没有销毁\n// 3. data 无限增长\n// 并提供修复代码\n",[2757],[2883],{"type":27,"tag":617,"props":2884,"children":2885},{"__ignoreMap":7},[2886],{"type":32,"value":2880},{"type":27,"tag":811,"props":2888,"children":2890},{"id":2889},"_43-数据库查询优化",[2891],{"type":32,"value":2892},"4.3 数据库查询优化",{"type":27,"tag":2604,"props":2894,"children":2899},{"code":2895,"language":2896,"meta":7,"className":2897},"-- 场景：查询很慢，让 AI 分析执行计划\n\n-- 提问方式：\n-- 以下查询在数据量大时很慢（orders 表 1000 万行），\n-- 执行计划如下，请分析并优化：\n\nEXPLAIN ANALYZE\nSELECT o.*, u.name, u.email\nFROM orders o\nJOIN users u ON o.user_id = u.id\nWHERE o.status = 'pending'\n  AND o.created_at > '2024-01-01'\nORDER BY o.created_at DESC\nLIMIT 20;\n\n-- 执行计划：\n/*\nSort  (cost=156847.23..157847.23 rows=400000 width=250)\n  Sort Key: o.created_at DESC\n  ->  Hash Join  (cost=1500.00..89847.23 rows=400000 width=250)\n        Hash Cond: (o.user_id = u.id)\n        ->  Seq Scan on orders o  (cost=0.00..85000.00 rows=400000)\n              Filter: ((status = 'pending') AND (created_at > '2024-01-01'))\n        ->  Hash  (cost=1000.00..1000.00 rows=50000 width=100)\n              ->  Seq Scan on users u  (cost=0.00..1000.00 rows=50000)\nPlanning Time: 0.5 ms\nExecution Time: 3500 ms\n*/\n\n-- AI 会分析出问题并建议：\n-- 1. orders 表全表扫描 - 需要复合索引\n-- 2. 建议创建索引：\nCREATE INDEX idx_orders_status_created ON orders(status, created_at DESC);\n\n-- 3. 如果 status 选择性不高，考虑部分索引：\nCREATE INDEX idx_orders_pending ON orders(created_at DESC) \nWHERE status = 'pending';\n","sql",[2898],"language-sql",[2900],{"type":27,"tag":617,"props":2901,"children":2902},{"__ignoreMap":7},[2903],{"type":32,"value":2895},{"type":27,"tag":70,"props":2905,"children":2907},{"id":2906},"第五部分复杂-bug-排查",[2908],{"type":32,"value":2909},"第五部分：复杂 Bug 排查",{"type":27,"tag":811,"props":2911,"children":2913},{"id":2912},"_51-竞态条件",[2914],{"type":32,"value":2915},"5.1 竞态条件",{"type":27,"tag":2604,"props":2917,"children":2920},{"code":2918,"language":2755,"meta":7,"className":2919},"// 场景：偶发的数据不一致问题\n\n// 提问方式：\n/**\n * 用户反馈偶尔看到错误的账户余额，但刷新后正常。\n * 怀疑是竞态条件，以下是相关代码：\n */\nasync function updateBalance(userId: string, amount: number) {\n  // 读取当前余额\n  const user = await db.users.findOne({ id: userId });\n  const newBalance = user.balance + amount;\n  \n  // 更新余额\n  await db.users.update({ id: userId }, { balance: newBalance });\n  \n  // 记录交易\n  await db.transactions.create({\n    userId,\n    amount,\n    balanceAfter: newBalance,\n    createdAt: new Date()\n  });\n  \n  return newBalance;\n}\n\n// 并发调用场景：\n// 用户同时发起两笔交易：+100 和 -50\n// 期望结果：原余额 1000 → 1050\n// 实际可能：原余额 1000 → 1100 或 950\n\n// AI 会分析竞态条件并提供解决方案：\nasync function updateBalanceAtomic(userId: string, amount: number) {\n  // 方案 1：使用数据库原子操作\n  const result = await db.users.findOneAndUpdate(\n    { id: userId },\n    { $inc: { balance: amount } },\n    { returnDocument: 'after' }\n  );\n  \n  await db.transactions.create({\n    userId,\n    amount,\n    balanceAfter: result.balance,\n    createdAt: new Date()\n  });\n  \n  return result.balance;\n}\n\n// 方案 2：使用乐观锁\nasync function updateBalanceOptimistic(userId: string, amount: number) {\n  const maxRetries = 3;\n  \n  for (let i = 0; i \u003C maxRetries; i++) {\n    const user = await db.users.findOne({ id: userId });\n    const newBalance = user.balance + amount;\n    \n    const updated = await db.users.updateOne(\n      { id: userId, version: user.version },\n      { balance: newBalance, version: user.version + 1 }\n    );\n    \n    if (updated.modifiedCount === 1) {\n      await db.transactions.create({...});\n      return newBalance;\n    }\n    \n    // 版本冲突，重试\n    await sleep(10 * (i + 1));\n  }\n  \n  throw new Error('Update failed after retries');\n}\n",[2757],[2921],{"type":27,"tag":617,"props":2922,"children":2923},{"__ignoreMap":7},[2924],{"type":32,"value":2918},{"type":27,"tag":811,"props":2926,"children":2928},{"id":2927},"_52-分布式系统问题",[2929],{"type":32,"value":2930},"5.2 分布式系统问题",{"type":27,"tag":2604,"props":2932,"children":2935},{"code":2933,"language":2755,"meta":7,"className":2934},"// 场景：微服务间的数据不一致\n\n// 提问方式：\n/**\n * 订单服务和库存服务偶尔出现数据不一致：\n * - 订单显示已创建\n * - 库存未扣减\n * \n * 当前流程：\n */\n// Order Service\nasync function createOrder(orderData) {\n  // 1. 调用库存服务扣减库存\n  await inventoryService.deduct(orderData.items);\n  \n  // 2. 创建订单\n  const order = await orderRepository.create(orderData);\n  \n  // 3. 发送订单创建事件\n  await eventBus.publish('order.created', order);\n  \n  return order;\n}\n\n// 问题分析：如果步骤 2 或 3 失败，库存已经扣减但订单未创建\n\n// AI 会建议使用 Saga 模式或事务发件箱模式\n",[2757],[2936],{"type":27,"tag":617,"props":2937,"children":2938},{"__ignoreMap":7},[2939],{"type":32,"value":2933},{"type":27,"tag":70,"props":2941,"children":2943},{"id":2942},"第六部分ai-调试工作流",[2944],{"type":32,"value":2945},"第六部分：AI 调试工作流",{"type":27,"tag":811,"props":2947,"children":2949},{"id":2948},"_61-我的调试流程",[2950],{"type":32,"value":2951},"6.1 我的调试流程",{"type":27,"tag":2604,"props":2953,"children":2955},{"code":2954},"┌────────────────────────────────────────────────────────────┐\n│                    AI 辅助调试工作流                         │\n├────────────────────────────────────────────────────────────┤\n│                                                            │\n│  Step 1: 问题收集                                          │\n│  ├── 复制完整错误信息                                       │\n│  ├── 截图相关日志                                          │\n│  └── 记录复现步骤                                          │\n│                                                            │\n│  Step 2: 快速分析                                          │\n│  ├── 将错误信息发给 AI                                      │\n│  ├── 获取可能原因列表                                       │\n│  └── 评估哪些最可能                                         │\n│                                                            │\n│  Step 3: 深入调查                                          │\n│  ├── 根据 AI 建议添加日志/断点                              │\n│  ├── 收集更多信息                                          │\n│  └── 再次询问 AI（带新信息）                                │\n│                                                            │\n│  Step 4: 验证修复                                          │\n│  ├── AI 生成修复代码                                        │\n│  ├── 人工审查确认                                          │\n│  └── 测试验证                                               │\n│                                                            │\n│  Step 5: 预防措施                                          │\n│  ├── AI 建议类似问题的预防方法                              │\n│  ├── 添加相关测试用例                                       │\n│  └── 更新文档/知识库                                        │\n│                                                            │\n└────────────────────────────────────────────────────────────┘\n",[2956],{"type":27,"tag":617,"props":2957,"children":2958},{"__ignoreMap":7},[2959],{"type":32,"value":2954},{"type":27,"tag":811,"props":2961,"children":2963},{"id":2962},"_62-调试对话模板",[2964],{"type":32,"value":2965},"6.2 调试对话模板",{"type":27,"tag":2604,"props":2967,"children":2970},{"code":2968,"language":354,"meta":7,"className":2969},"## 第一轮：问题描述\n\n我遇到了一个问题：[简述问题]\n\n错误信息：\n",[2608],[2971],{"type":27,"tag":617,"props":2972,"children":2973},{"__ignoreMap":7},[2974],{"type":32,"value":2968},{"type":27,"tag":28,"props":2976,"children":2977},{},[2978],{"type":27,"tag":2618,"props":2979,"children":2980},{},[2981],{"type":32,"value":2982},"粘贴完整错误",{"type":27,"tag":2604,"props":2984,"children":2986},{"code":2985},"\n相关代码：\n```javascript\n[粘贴代码]\n",[2987],{"type":27,"tag":617,"props":2988,"children":2989},{"__ignoreMap":7},[2990],{"type":32,"value":2985},{"type":27,"tag":478,"props":2992,"children":2993},{},[],{"type":27,"tag":70,"props":2995,"children":2997},{"id":2996},"第二轮补充信息",[2998],{"type":32,"value":2999},"第二轮：补充信息",{"type":27,"tag":28,"props":3001,"children":3002},{},[3003],{"type":32,"value":3004},"根据你的建议，我添加了日志，发现：",{"type":27,"tag":40,"props":3006,"children":3007},{},[3008,3016],{"type":27,"tag":44,"props":3009,"children":3010},{},[3011],{"type":27,"tag":2618,"props":3012,"children":3013},{},[3014],{"type":32,"value":3015},"发现 1",{"type":27,"tag":44,"props":3017,"children":3018},{},[3019],{"type":27,"tag":2618,"props":3020,"children":3021},{},[3022],{"type":32,"value":3023},"发现 2",{"type":27,"tag":28,"props":3025,"children":3026},{},[3027,3029,3034],{"type":32,"value":3028},"这是否说明问题出在 ",{"type":27,"tag":2618,"props":3030,"children":3031},{},[3032],{"type":32,"value":3033},"你的猜测",{"type":32,"value":3035},"？",{"type":27,"tag":478,"props":3037,"children":3038},{},[],{"type":27,"tag":70,"props":3040,"children":3042},{"id":3041},"第三轮确认修复",[3043],{"type":32,"value":3044},"第三轮：确认修复",{"type":27,"tag":28,"props":3046,"children":3047},{},[3048],{"type":32,"value":3049},"我按照你的建议修改了代码：",{"type":27,"tag":2604,"props":3051,"children":3054},{"code":3052,"language":2780,"meta":7,"className":3053},"[粘贴修改后的代码]\n",[2782],[3055],{"type":27,"tag":617,"props":3056,"children":3057},{"__ignoreMap":7},[3058],{"type":32,"value":3052},{"type":27,"tag":28,"props":3060,"children":3061},{},[3062],{"type":32,"value":3063},"请确认这个修复是否正确，以及是否有其他潜在问题。",{"type":27,"tag":478,"props":3065,"children":3066},{},[],{"type":27,"tag":70,"props":3068,"children":3070},{"id":3069},"第四轮预防",[3071],{"type":32,"value":3072},"第四轮：预防",{"type":27,"tag":28,"props":3074,"children":3075},{},[3076],{"type":32,"value":3077},"这个问题已解决。请建议：",{"type":27,"tag":408,"props":3079,"children":3080},{},[3081,3086,3091],{"type":27,"tag":44,"props":3082,"children":3083},{},[3084],{"type":32,"value":3085},"如何防止类似问题再次发生？",{"type":27,"tag":44,"props":3087,"children":3088},{},[3089],{"type":32,"value":3090},"应该添加什么测试用例？",{"type":27,"tag":44,"props":3092,"children":3093},{},[3094],{"type":32,"value":3095},"有什么最佳实践可以参考？",{"type":27,"tag":2604,"props":3097,"children":3099},{"code":3098},"\n## 结语：AI 是放大器，不是替代品\n\nAI 调试工具能够显著加速问题排查过程，但它不能替代你的思考。最有价值的能力组合是：\n\n- **你的领域知识** + **AI 的广博见识**\n- **你对项目的理解** + **AI 的分析能力**\n- **你的判断力** + **AI 的执行速度**\n\n调试的本质是假设-验证的循环。AI 帮你更快地生成假设、更高效地验证假设，但做出最终判断的还是你。\n\n学会与 AI 高效协作调试，不是依赖 AI 给你答案，而是让 AI 帮你更快地找到自己的答案。\n\n---\n\n## 参考资源\n\n- [Chrome DevTools 官方文档](https://developer.chrome.com/docs/devtools)\n- [Node.js 调试指南](https://nodejs.org/en/docs/guides/debugging-getting-started)\n- [React DevTools 使用指南](https://react.dev/learn/react-developer-tools)\n",[3100],{"type":27,"tag":617,"props":3101,"children":3102},{"__ignoreMap":7},[3103],{"type":32,"value":3098},{"title":7,"searchDepth":344,"depth":344,"links":3105},[3106,3107,3108,3113,3117,3122,3126,3130,3131,3132],{"id":2488,"depth":347,"text":2491},{"id":2494,"depth":347,"text":2497},{"id":2515,"depth":347,"text":2518,"children":3109},[3110,3111,3112],{"id":2521,"depth":344,"text":2524},{"id":2599,"depth":344,"text":2602},{"id":2765,"depth":344,"text":2768},{"id":2807,"depth":347,"text":2810,"children":3114},[3115,3116],{"id":2813,"depth":344,"text":2816},{"id":2833,"depth":344,"text":2836},{"id":2853,"depth":347,"text":2856,"children":3118},[3119,3120,3121],{"id":2859,"depth":344,"text":2862},{"id":2874,"depth":344,"text":2877},{"id":2889,"depth":344,"text":2892},{"id":2906,"depth":347,"text":2909,"children":3123},[3124,3125],{"id":2912,"depth":344,"text":2915},{"id":2927,"depth":344,"text":2930},{"id":2942,"depth":347,"text":2945,"children":3127},[3128,3129],{"id":2948,"depth":344,"text":2951},{"id":2962,"depth":344,"text":2965},{"id":2996,"depth":347,"text":2999},{"id":3041,"depth":347,"text":3044},{"id":3069,"depth":347,"text":3072},"content:topics:ai:ai-debugging-troubleshooting-guide.md","topics/ai/ai-debugging-troubleshooting-guide.md","topics/ai/ai-debugging-troubleshooting-guide",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":3137,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":3138,"_type":354,"_id":355,"_source":356,"_file":357,"_stem":358,"_extension":359},[13,14,15,16,17],{"type":24,"children":3139,"toc":3389},[3140,3144,3148,3167,3171,3175,3179,3183,3198,3202,3206,3210,3225,3229,3233,3237,3241,3260,3264,3268,3272,3276,3291,3295,3299,3303,3322,3326,3330,3353,3357,3361,3365],{"type":27,"tag":28,"props":3141,"children":3142},{},[3143],{"type":32,"value":33},{"type":27,"tag":28,"props":3145,"children":3146},{},[3147],{"type":32,"value":38},{"type":27,"tag":40,"props":3149,"children":3150},{},[3151,3155,3159,3163],{"type":27,"tag":44,"props":3152,"children":3153},{},[3154],{"type":32,"value":48},{"type":27,"tag":44,"props":3156,"children":3157},{},[3158],{"type":32,"value":53},{"type":27,"tag":44,"props":3160,"children":3161},{},[3162],{"type":32,"value":58},{"type":27,"tag":44,"props":3164,"children":3165},{},[3166],{"type":32,"value":63},{"type":27,"tag":28,"props":3168,"children":3169},{},[3170],{"type":32,"value":68},{"type":27,"tag":70,"props":3172,"children":3173},{"id":72},[3174],{"type":32,"value":75},{"type":27,"tag":28,"props":3176,"children":3177},{},[3178],{"type":32,"value":80},{"type":27,"tag":28,"props":3180,"children":3181},{},[3182],{"type":32,"value":85},{"type":27,"tag":40,"props":3184,"children":3185},{},[3186,3190,3194],{"type":27,"tag":44,"props":3187,"children":3188},{},[3189],{"type":32,"value":93},{"type":27,"tag":44,"props":3191,"children":3192},{},[3193],{"type":32,"value":98},{"type":27,"tag":44,"props":3195,"children":3196},{},[3197],{"type":32,"value":103},{"type":27,"tag":28,"props":3199,"children":3200},{},[3201],{"type":32,"value":108},{"type":27,"tag":70,"props":3203,"children":3204},{"id":111},[3205],{"type":32,"value":114},{"type":27,"tag":28,"props":3207,"children":3208},{},[3209],{"type":32,"value":119},{"type":27,"tag":40,"props":3211,"children":3212},{},[3213,3217,3221],{"type":27,"tag":44,"props":3214,"children":3215},{},[3216],{"type":32,"value":127},{"type":27,"tag":44,"props":3218,"children":3219},{},[3220],{"type":32,"value":132},{"type":27,"tag":44,"props":3222,"children":3223},{},[3224],{"type":32,"value":137},{"type":27,"tag":28,"props":3226,"children":3227},{},[3228],{"type":32,"value":142},{"type":27,"tag":70,"props":3230,"children":3231},{"id":145},[3232],{"type":32,"value":148},{"type":27,"tag":28,"props":3234,"children":3235},{},[3236],{"type":32,"value":153},{"type":27,"tag":28,"props":3238,"children":3239},{},[3240],{"type":32,"value":158},{"type":27,"tag":40,"props":3242,"children":3243},{},[3244,3248,3252,3256],{"type":27,"tag":44,"props":3245,"children":3246},{},[3247],{"type":32,"value":166},{"type":27,"tag":44,"props":3249,"children":3250},{},[3251],{"type":32,"value":171},{"type":27,"tag":44,"props":3253,"children":3254},{},[3255],{"type":32,"value":176},{"type":27,"tag":44,"props":3257,"children":3258},{},[3259],{"type":32,"value":181},{"type":27,"tag":28,"props":3261,"children":3262},{},[3263],{"type":32,"value":186},{"type":27,"tag":70,"props":3265,"children":3266},{"id":189},[3267],{"type":32,"value":189},{"type":27,"tag":28,"props":3269,"children":3270},{},[3271],{"type":32,"value":196},{"type":27,"tag":28,"props":3273,"children":3274},{},[3275],{"type":32,"value":201},{"type":27,"tag":40,"props":3277,"children":3278},{},[3279,3283,3287],{"type":27,"tag":44,"props":3280,"children":3281},{},[3282],{"type":32,"value":209},{"type":27,"tag":44,"props":3284,"children":3285},{},[3286],{"type":32,"value":214},{"type":27,"tag":44,"props":3288,"children":3289},{},[3290],{"type":32,"value":219},{"type":27,"tag":28,"props":3292,"children":3293},{},[3294],{"type":32,"value":224},{"type":27,"tag":70,"props":3296,"children":3297},{"id":227},[3298],{"type":32,"value":230},{"type":27,"tag":28,"props":3300,"children":3301},{},[3302],{"type":32,"value":235},{"type":27,"tag":40,"props":3304,"children":3305},{},[3306,3310,3314,3318],{"type":27,"tag":44,"props":3307,"children":3308},{},[3309],{"type":32,"value":243},{"type":27,"tag":44,"props":3311,"children":3312},{},[3313],{"type":32,"value":248},{"type":27,"tag":44,"props":3315,"children":3316},{},[3317],{"type":32,"value":253},{"type":27,"tag":44,"props":3319,"children":3320},{},[3321],{"type":32,"value":258},{"type":27,"tag":28,"props":3323,"children":3324},{},[3325],{"type":32,"value":263},{"type":27,"tag":70,"props":3327,"children":3328},{"id":266},[3329],{"type":32,"value":266},{"type":27,"tag":40,"props":3331,"children":3332},{},[3333,3337,3341,3345,3349],{"type":27,"tag":44,"props":3334,"children":3335},{},[3336],{"type":32,"value":276},{"type":27,"tag":44,"props":3338,"children":3339},{},[3340],{"type":32,"value":281},{"type":27,"tag":44,"props":3342,"children":3343},{},[3344],{"type":32,"value":286},{"type":27,"tag":44,"props":3346,"children":3347},{},[3348],{"type":32,"value":291},{"type":27,"tag":44,"props":3350,"children":3351},{},[3352],{"type":32,"value":296},{"type":27,"tag":70,"props":3354,"children":3355},{"id":299},[3356],{"type":32,"value":299},{"type":27,"tag":28,"props":3358,"children":3359},{},[3360],{"type":32,"value":306},{"type":27,"tag":28,"props":3362,"children":3363},{},[3364],{"type":32,"value":311},{"type":27,"tag":40,"props":3366,"children":3367},{},[3368,3375,3382],{"type":27,"tag":44,"props":3369,"children":3370},{},[3371],{"type":27,"tag":319,"props":3372,"children":3373},{"href":321},[3374],{"type":32,"value":324},{"type":27,"tag":44,"props":3376,"children":3377},{},[3378],{"type":27,"tag":319,"props":3379,"children":3380},{"href":330},[3381],{"type":32,"value":333},{"type":27,"tag":44,"props":3383,"children":3384},{},[3385],{"type":27,"tag":319,"props":3386,"children":3387},{"href":339},[3388],{"type":32,"value":342},{"title":7,"searchDepth":344,"depth":344,"links":3390},[3391,3392,3393,3394,3395,3396,3397],{"id":72,"depth":347,"text":75},{"id":111,"depth":347,"text":114},{"id":145,"depth":347,"text":148},{"id":189,"depth":347,"text":189},{"id":227,"depth":347,"text":230},{"id":266,"depth":347,"text":266},{"id":299,"depth":347,"text":299},1777086812880]