[chrome扩展]前端好助手—code cola

code cola是一款前端学习与使用好助手，在浏览器中能即时的展现修改后的效果，设置简单，类似与chrome查看元素与firebug，但是更加简单，完全视觉化设置。对于初学前端的人来说是极为方便的。
我们先看一下软件的效果图。刚打开时是看不到任务设置项的，只有在页面中选中页面中的区块或链接才会显示出效果。
图中可以看出，能够在软件中视觉化设置字体、字号、行高等等，甚至可以设置各种特效。下面我就我爱玩应用网站中推荐部分的红色区块设置一下看一下效果：
这里是原图：
软件使用方法：
首先鼠标在浏览器右上角点击该扩展后图标会由绿色多变为黑色多，好像黑门关上了一下，然后就会弹出软件界面，接下来我们鼠标在网页中滑动时就会显示出一个个区块让我们选择。我们选中要修改的地方，在右边扩展左上角可以看到是一个链接：A*1。接下来就可以看到可以设置各个效果了：我们修改了字体，字号，圆角等。看下效果图：
接下来我们就可以查看代码了：在下图中的红框区域为工具栏，第一个是默认设置：第二个{}是查看设置后的代码，第三个<>是查看所有代码，一般用不上，只有在全是html页面时才会用上。第四个是获取修改结果的链接需要把php文件上传到你的服务器后，修改后可直接保存在远程。最后一个是主页。
我们在下图中可以看到我们修改的一些代码：无须手动输入，直接复制到css文件中即可。
下图为查看整个源代码的效果图：
使和方法就是这样，十分简单。来试试吧。
chrome扩展下载
code-cola下载
原文链接：http://www.wooaii.com/archives/2788.html