Quokka需手动启动才生效:必须打开.js/.mjs文件,右键选“Quokka: Start on Current File”,状态栏出现绿色Quokka.js图标;console.log不内联显示,需用return或/*?/触发求值。

Quokka 和 Debugger 是 VSCode 里最直接、最轻量的 JS 动态监控组合,不用起服务、不依赖浏览器,改一行代码就能看到值变没变。
Quokka 怎么启动才真正生效
装完插件不代表它在跑——Quokka 默认不自动监听任何文件,必须手动激活。
- 确保当前打开的是
.js或.mjs文件(.ts、.jsx、未保存的临时文件都不行) - 右键编辑器空白处 → 选
Quokka: Start on Current File(比快捷键Ctrl+K Q更稳) - 看状态栏右下角:出现
Quokka.js并带绿色圆点,才算活了;灰色或没图标=没运行 - 项目有
package.json且含"type": "module",Quokka 才会按 ESM 规则解析import
为什么 console.log 没反应,但 return 可以
Quokka 不是控制台 REPL,它只对“表达式求值”做内联标注,console.log() 是语句,执行但不返回值,所以不显示。
详细的 Three.js 3D 图形参考,涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 想看结果:把变量或表达式单独写一行,比如
user.name、arr.length,Quokka 会在行尾标出值 - 想强制显示对象/结构体:用
return { a: 1, b: 2 },结果浮在右侧 - 更灵活:在任意位置加
/**?*/,例如getData() /**?*/,Quokka 就在此求值并内联 -
console.log()其实仍会输出,只是去到 VSCode 底部的Quokka输出面板,不是内联
Debugger 的 Watch 面板为啥总显示 undefined
Watch 不是全局监听器,它只在断点暂停的那一刻,对当前栈帧里“能访问到的变量”求值。
- 断点设在函数 A 内,却往 Watch 里输函数 B 的局部变量名 →
Cannot evaluate - 异步回调里的变量(如
setTimeout(() => { console.log(x) }, 100)),在同步断点处加x→ 显示undefined;得把断点挪进回调里再加 - 拼错名或大小写不对(
UserNamevsuserName)→ Watch 不报错,只给undefined - TypeScript 项目中,若
launch.json没配sourceMaps: true或outFiles指向错误,原始变量名可能无法解析
Quokka 和 Debugger 的分工边界在哪
两者目标一致,但适用阶段完全不同:Quokka 适合写代码时秒级验证逻辑片段,Debugger 适合定位运行时状态流转问题。
- Quokka 启动快、无上下文依赖,但只支持单文件、不模拟真实调用链,
require或模块作用域外的变量容易报ReferenceError - Debugger 必须进调试会话(F5 启动),能跨文件追踪、看调用栈、改变量值,但每次都要配置
launch.json,对简单脚本有点重 - 常见误用:在 Quokka 里写
fetch却没配代理或 mock,结果卡住或报 CORS;其实它默认走 Node 环境,fetch不可用,得换node-fetch或切浏览器沙箱模式 - 复杂对象嵌套深、有 getter 或 Proxy 时,Quokka 行尾标注可能只展开一层,Debugger 的 Variables 面板点开更可靠
真正难的不是启动工具,而是判断此刻该信 Quokka 的实时值,还是该信 Debugger 里断点那一瞬的真实上下文——尤其当变量被闭包捕获、被异步延迟、或被框架代理过之后。

















