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