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