通常我们做前端开发的时候，总是通过修改HTML、CSS和JS代码后在浏览器刷新界面后查看效果，再修改再刷新，反复操作直到满意。这种开发效率很低，接下来我就向大家介绍两种可以实时可视化前端开发的工具，帮助我们提高开发效率。
推荐一
livestyle
LiveStyle是一款支持Chrome和Safari浏览器的实时CSS调试插件工具，非常适合前端工程师的使用，用以提供前端工程师的开发效率，同时还可以利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发，一次配置，简单易用。
Animation.gif由于此插件需要在谷歌应用中心下载，因此我们需要翻墙。这里我推荐大家使用，安装天行客户端后每天可以领取1个小时免费上网时长。 tianxing.png
翻墙后就可以在谷歌应用中心搜索liveStyle了
google.png然后添加就可以了
tianjia.png注意
nodejs.png推荐二
sync-demo.gif scroll-demo.gifBrowser-Sync
打开一个终端窗口，用我们之前安装过的node.js的包管理工具npm去安装
npm install -g browser-sync安装成功之后我们就可以通过输入命令来监听我们的文件
browser-sync start --server --files "css/*.css"
注意：files路径一定要在你服务器项目路径下
browsersync.png其中为browser-sync的配置页面 brow.png
今天就写到这里，喜欢的话别忘了点个关注。