我正在参加 码上掘金体验活动，详情：show出你的创意代码块
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 9 天，点击查看活动详情。
掘金上线了新的功能：码上掘金，一款能够在线预览的代码平台。为了体验一波新特性，决定把上次编写的油猴插件里的烟花效果搬过来。
设计烟花的思路见此文：# 🎇canvas 专场：烟花秀🎇
成品效果
后台开发界面
整个页面大体分为 html, css, js, 预览效果 四块。前 3 者可以调整布局为左侧、上方（如图）、右侧
出现的问题
因为我的代码块是纯 js 脚本，对浏览器加载页面做修改替换展现效果。为了在这个平台上正常显示效果，将用 js 插入的 canvas 元素，直接写到 html 区域
在转化的过程中，出现了如下的问题：
调试困难
通过 f12 对页面的元素进行分析，发现预览的模块，是用 iframe 来实现的。iframe 的优势在于可以隔离 html 中上下文的 css，js。
尝试在 js 模块中加入 debugger 关键字，可以断点，但无法进入到实际的 js 代码处
报错的信息不准确
当注释掉 js 前面定义的变量后，报错了，无法从控制台定位到具体位置，阅读报错的异常调用栈，发现错误的地方提示是 line 59，但实际是 line 58
严格定义变量
在 js 中，如果不使用关键字 let/var 来定义变量的话，默认该变量为 var 定义。当前，此项操作仅在非严格模式有效
但在 playground 会报错，应该是使用的严格模式，不算是坏事
布局有待改进
在实际的使用过程中，代码的编辑区域太小了，也不支持 ctrl+滚轮 按页滚动
一个改进的建议是，当我们专注于其中一项的代码编辑时，可以占用另外两块的空间区域
总结
可能是我的期望太高，现阶段的 playground，更像是一个在线跑代码的插件，即方便我们在文章中更加合适的展示我们的作品，读者还可以查看我们作品对应的源码
现阶段来说，我个人的感觉是，建议使用 IDE 开发好成品后，再搬到 playground
