本文使用开源的monaco-editor（https://github.com/Microsoft/monaco-editor）编辑工具来实现一个在线的code工具。在线预览http://code.yardwill.com/, 因为懒得上cdn，所以目前访问速度可能有点慢。
image.png
1. monaco-editor
左边一块就是我们的editor，在这里我们可以实时编辑code。并且具有代码提示。
image.png
2. console结果
右边一块是我们的console结果。我们可以来测试一下。输入代码之后点击运行。
image.png
当然也会对错误进行处理。
image.png
可以通过清除日志来删除所有的console内容。
3. 原理
原理也很简单，获取editor里的text，然后通过eval在浏览器端执行代码，最后覆盖浏览器内的console方法，来达到console内容的获取。
