Emmet livestyle浏览器和编辑器样式实时同步

文章目录

高效率的前端开发工具集》的文章提到除了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的修改都会双向同步。

网站地址:http://livestyle.emmet.io/

原创文章:Emmet livestyle浏览器和编辑器样式实时同步 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/emmet-livestyle.html)

发表评论

请登录后发表评论: