Javascript 在浏览器中调试和编辑代码的Chrome扩展

我正在构建一个基于web的JS REPL（类似于），但我发现在Chrome开发者控制台和我自己的代码之间切换以进行调试真的很烦人。我在左侧有一个文本区域（使用奇妙的按钮），单击预览按钮将另一个窗口加载到右侧的iframe中，其中包含我正在编辑的代码。这让我想知道，如果我能够在浏览器窗口中将断点添加到我的代码编辑器中，当它到达断点时，我可以看到变量的状态，单步执行代码，并删除断点，而所有这些都仍然在编辑器中编辑代码，该怎么办。与实际调试非常相似，但在浏览器中而不是像Eclipse那样的编辑器中

我认为Chrome扩展是正确的选择。我可以使用调用调试器，然后使用添加断点、跨步、跳出等。这非常有效，我甚至可以在使用该命令命中断点时获取变量的当前状态

问题是……一旦我暂停代码进行调试，整个页面上的所有内容都会冻结（当然，因为我正在调试）。有人能想出一个办法来解决这个问题吗？理想的解决方案将允许我冻结和调试iframe右侧的结果，并仍然操作左侧的代码