《高效率的前端开发工具集》的文章提到除了browser-sync之外的另一个神器，支持在浏览器上修改了样式同步到编辑器之中，而不用来回切换编辑器，支持实时预览，无须刷新。
相信大家都有使用编辑器开发CSS的经验，经常遇到的情况是，我们需要在编辑器修改后，保存，再到浏览器里查看效果，可是往往有的时候我们是反向操作的，即，在浏览器里修改CSS，直接看到效果，但是如果自动能把修改映射到编辑里，将是一个非常有帮助并且极大提高工作效率的事情，在今天这篇文章里，我们将介绍强大的Emmet LiveStyle
Emmet LiveStyle是一个款功能超强大的浏览器和编辑器双向实时编辑的工具类插件，支持Google Chrome，Safari和Sublime Text。
主要特性
- Instant updates: see changes as-you-type. No file saving, no page reloading.
- 实时更新：输入即可看到效果，无须保存，也无须重新加载
- 不需要本地文件
- 跨平台
- 多视图多设备支持
- 多站支持
- 安装简单
安装Subliem Text插件：
1. 打开命令面板：ctrl + shift + p
2. 输入：install Package
3. 搜索：LiveStyle
注：LiveStyle和Emmet一样，需要PyV8插件的支持。建议先安装Emmet，因为安装Emmet的同时会自动安装PyV8。
安装浏览器扩展程序：
可以在Chrome网上应用商店中搜索” Emmet LiveStyle ”
使用方法：
1. Sublime Text中打开该页面的CSS文件。如果是远程修改，可以新建个CSS文件(例：debug.css)。
2. 打开需要调试的页面，按F12(打开开发者工具)，选择LiveStyle(在Console/控制台右边)。
3. 把Enable LiveStyle for current page前面的勾打上。
4. 选择对应的样式，即关联CSS。
注：此时Chrome的Matched CSS Rules和Sublime Text的修改都会双向同步。
