[{"data":1,"prerenderedAt":150},["ShallowReactive",2],{"content-/blog/debugging-tips":3,"related-blog":125},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":119,"_id":120,"_source":121,"_file":122,"_stem":123,"_extension":124},"/blog/debugging-tips","blog",false,"","调试技巧分享","浏览器调试工具、日志分析、性能分析等调试技巧","调试技巧分享, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":111},"root",[18,26,32,47,52,65,70,83,88,101,106],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","调试是开发效率的重要组成部分。本文分享前端与后端常用的调试技巧与工具组合，帮助更快定位问题。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"前端调试技巧",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36,42],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"使用浏览器 DevTools：网络、性能（Performance）、元素与控制台。",{"type":19,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"使用断点与条件断点定位逻辑分支问题；使用黑箱脚本（blackbox）忽略第三方库堆栈。",{"type":19,"tag":27,"props":48,"children":50},{"id":49},"后端调试技巧",[51],{"type":24,"value":49},{"type":19,"tag":33,"props":53,"children":54},{},[55,60],{"type":19,"tag":37,"props":56,"children":57},{},[58],{"type":24,"value":59},"在开发环境使用可复现的输入与单元测试进行快速回归。",{"type":19,"tag":37,"props":61,"children":62},{},[63],{"type":24,"value":64},"使用日志级别与 trace-id 串联请求路径，结合断点调试或 replay 请求。",{"type":19,"tag":27,"props":66,"children":68},{"id":67},"进阶方法",[69],{"type":24,"value":67},{"type":19,"tag":33,"props":71,"children":72},{},[73,78],{"type":19,"tag":37,"props":74,"children":75},{},[76],{"type":24,"value":77},"借助快照测试与视觉回归防止样式回退。",{"type":19,"tag":37,"props":79,"children":80},{},[81],{"type":24,"value":82},"在复杂异步流程中引入可追踪的上下文（如 AsyncLocalStorage 或 carrier headers）。",{"type":19,"tag":27,"props":84,"children":86},{"id":85},"工具链建议",[87],{"type":24,"value":85},{"type":19,"tag":33,"props":89,"children":90},{},[91,96],{"type":19,"tag":37,"props":92,"children":93},{},[94],{"type":24,"value":95},"Frontend: Chrome/Firefox DevTools, React/Vue devtools, Storybook。",{"type":19,"tag":37,"props":97,"children":98},{},[99],{"type":24,"value":100},"Backend: IDE 断点、APM（Datadog、NewRelic）、日志聚合（ELK/EFK）。",{"type":19,"tag":27,"props":102,"children":104},{"id":103},"小结",[105],{"type":24,"value":103},{"type":19,"tag":20,"props":107,"children":108},{},[109],{"type":24,"value":110},"高效调试依赖工具链、良好日志与可复现场景。把诊断信息（日志、trace、用户动作）结构化保存，能大幅缩短修复时间。",{"title":7,"searchDepth":112,"depth":112,"links":113},3,[114,115,116,117,118],{"id":29,"depth":112,"text":29},{"id":49,"depth":112,"text":49},{"id":67,"depth":112,"text":67},{"id":85,"depth":112,"text":85},{"id":103,"depth":112,"text":103},"markdown","content:blog:debugging-tips.md","content","blog/debugging-tips.md","blog/debugging-tips","md",[126,134,142],{"_path":127,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":128,"description":129,"keywords":130,"author":11,"date":12,"category":13,"image":14,"_type":119,"_id":131,"_source":121,"_file":132,"_stem":133,"_extension":124},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":135,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":136,"description":137,"keywords":138,"author":11,"date":12,"category":13,"image":14,"_type":119,"_id":139,"_source":121,"_file":140,"_stem":141,"_extension":124},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":143,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":144,"description":145,"keywords":146,"author":11,"date":12,"category":13,"image":14,"_type":119,"_id":147,"_source":121,"_file":148,"_stem":149,"_extension":124},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945285399]