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