打断点、单步执行

在左侧编辑器里写 JavaScript,点行号槽设断点（红点），按「开始调试」后用 单步 / 步过 / 步入 / 步出 / 继续 逐行执行，右侧实时看 变量 · 作用域 · 调用栈 · console 输出。浏览器内置的 debugger 语句必须打开 DevTools 才会停，这里则不依赖 DevTools——页面自带一个 从零手写的 JavaScript 解释器（词法 → 递归下降 parser → generator 树遍历执行），把代码逐语句执行、在任意一行真正暂停下来，因此能直接在页面里观察每一步的状态变化。

支持的语法子集：var / let / const（含解构）· 函数声明 / 函数表达式 / 箭头函数 / 闭包 · if / else · for / for-of / for-in / while / do-while · break / continue / return · 对象 / 数组字面量与展开 · 模板字符串 · 一应运算符 · console.log 与 Math / JSON / Object / Array 等内置。数组的 map / filter / reduce / sort 等方法可正常调用（传入的回调按真实 JavaScript 执行，但单步不会进入其内部）；暂不支持 class / async / 正则字面量。

1 · 它如何停在某一行

传统「插桩 + 改写」做断点很繁琐，这里走的是另一条路——把解释器的每个求值函数都写成 generator。执行到一条语句前先 yield 出一个「停点」（当前行号 + 调用深度），驱动层就此挂起；想继续就再 next() 一下。于是单步=拉一个停点，步过=一直拉到调用深度不大于当前，步入=直接进下一个停点，步出=拉到深度更浅，继续=拉到某个停点的行号命中断点。暂停时整条作用域链与调用栈都「活」在挂起的 generator 里，直接读出来就是右侧那几块面板。