不知道怎么起标题

最近想学着用 G2 (https://g2.alipay.com/start/)

但是不知道合适的工作流是怎样的？

我是在 IDE 里写好代码

<script src="https://as.alipayobjects.com/g/datavis/g2/2.0.4/index.js"></script>
<div id="c1"></div>
<script>
  var data = [
    {name: 'Microsoft Internet Explorer', value: 56.33 },
    {name: 'Chrome', value: 24.03},
    {name: 'Firefox', value: 10.38},
    {name: 'Safari',  value: 4.77},
    {name: 'Opera', value: 0.91},
    {name: 'Proprietary or Undetectable', value: 0.2}
  ];
  var Stat = G2.Stat;
  var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 500
  });
  chart.source(data);
  // 重要：绘制饼图时，必须声明 theta 坐标系
  chart.coord('theta', {
    radius: 0.8 // 设置饼图的大小
  });
  chart.legend('name', {
    position: 'bottom'
  });
  chart.intervalStack()
      .position(Stat.summary.percent('value'))
      .color('name')
      .label('name*..percent',function(name, percent){
        percent = (percent * 100).toFixed(2) + '%';
        return name + ' ' + percent;
      });
  chart.render();
  // 设置默认选中
  var geom = chart.getGeoms()[0]; // 获取所有的图形
  var items = geom.getData(); // 获取图形对应的数据
  geom.setSelected(items[1]); // 设置选中
</script>
<!-- G2 code end -->

然后再到浏览器里面刷新。但是这样太麻烦了。改一次代码，要从 IDE 里面切回浏览器一次，然后按一次刷新

有什么比较快的方法？比如免去刷新的过程？或者直接在浏览器里面左边起一个 js 编辑器，右边就是生成的效果，类似 jsfiddle 那种？