Debugger for Chrome/Edge 是最稳的 JS 调试入口，需配置 launch.json、显式指定 url 和 webRoot，启用 source-map 并禁用预览版调试器；JavaScript Booster 语义化重构代码；Quokka.js 提供即时表达式验证；ESLint + Error Lens 在运行前拦截错误。
Debugger for Chrome / Edge 是最稳的 JS 调试入口
它不是“增强调试体验”的可选项，而是现代前端 JS 调试的事实起点。只要你用浏览器跑代码（本地服务、file://、甚至 localhost:3000），它就能把 VS Code 和 DevTools 的断点、变量监视、调用栈完全打通。
常见错误现象： breakpoints not hit（断点不触发）、Uncaught SyntaxError: Unexpected token 'export' 报错后无法进 debugger、源码映射（source map）失效导致跳转到打包后代码。
实操建议：
- 必须配置
.vscode/launch.json，不能只靠自动检测；url和webRoot必须显式指定，比如"webRoot": "${workspaceFolder}/src" - 如果项目用 Vite 或 Webpack 5+，确保构建时开启
devtool: 'source-map'（Vite 默认已开） - 遇到
Cannot find module或路径错乱，加"sourceMapPathOverrides"映射，例如："webpack:///./src/*": "${webRoot}/*" - 禁用预览版 JS 调试器：在设置里关掉
debug.javascript.usePreview，避免和旧版行为不一致
JavaScript Booster 让调试前的代码更干净
调试卡住，往往不是断点问题，而是代码本身难读、副作用难追踪。这个插件不直接介入运行时，但它能让你在下断点前，把 var 换成 const、把 if-else 压成三元、把函数转成箭头——所有操作都带语义安全检查，改完立刻可 debug。
为什么这样做：临时变量作用域混乱、重复赋值、隐式类型转换，都会让 debugger 中看到的值和你“以为的”不一致。重构不是炫技，是降低调试心智负担。
实操建议：
- 光标停在任意一行，左侧出现黄色灯泡（
light bulb）就说明有可应用的重构；别手动改，点它 - 对
console.log行点灯泡，可一键转为debugger语句，比删 log 再敲更可靠 - 慎用 “Split into declaration and initialization”，它会拆开声明与赋值，在闭包或异步上下文中可能改变执行顺序
Quokka.js 是轻量级运行验证的即时反馈环
当你不确定某段 JS 表达式结果、想快速验证数组 filter 逻辑、或测试一个正则是否匹配，不用起服务、不用写 test 文件、不用切到浏览器 console——Quokka 就是那个“Ctrl+K J”新建即执行的沙盒。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
容易踩的坑：Quokka 默认不加载项目 node_modules，遇到 Cannot find module 'lodash' 不要慌，它只支持当前文件内联 require 或 ES import（且需在顶部）；也不支持 JSX 或 Vue SFC。
实操建议：
- 对纯逻辑片段（如工具函数、数据处理 pipeline）右键 →
Start on Current File，比全局启动更可控 - 用
//?后缀写期望输出，Quokka 会实时比对，例如：[1,2,3].map(x => x * 2) //? [2,4,6] - 关闭
quokka.runOnSave，避免保存即执行带来干扰；手动触发更符合调试节奏
ESLint + Error Lens 让错误在 debug 前就暴露
很多“调试半天发现是拼写错误”的情况，本质是语法/逻辑问题没被提前拦截。ESLint 不是格式化工具，它是静态分析层的守门人；而 Error Lens 插件把它变成视觉强提示——错误直接在行尾高亮，悬停看详情，不用等运行。
性能影响很小，但关键在于它能捕获 ReferenceError 类错误（比如 undefined 变量）、no-unused-vars（调试残留的未用变量）、no-console（上线前漏删的 log）等 runtime 前就能发现的问题。
实操建议：
- 必须配
.eslintrc.js，至少启用eslint:recommended；空配置等于没装 -
Error Lens的高亮颜色太刺眼？在设置里调低errorLens.foreground的透明度，别关掉 - 不要依赖
eslint --fix自动修所有问题，像eqeqeq或no-implicit-globals这类规则，必须人工确认语义
调试真正卡住的地方，往往不在断点位置，而在你按下 F5 前那几秒——变量命名是否清晰、逻辑分支是否收束、副作用是否隔离。这些插件不是替代 debugger，而是让 debugger 有更干净的输入。
