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