Emmet LiveStyle - 网页样式实时编辑预览工具

chromegood 0人评论 1735次浏览 Chrome开发者工具插件
摘要 : LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件。利用LiveStyle和Sublime Text编辑器(经测试ST2 ST3均可以支持)结合可实现可视化开发,一次配置,简单易用!

Emmet LiveStyle插件背景简介

对于许多有经验的网页设计师而言,当要调整网页样式时,最常用的方法就是,通过Chrome浏览器的开发人员工具,将要调整的样式,加到开发人员工具的右下角的Styles面板中,就可以得到预览结果画面,这是一个相当快速且简易的方法,但这个方法有个小缺点就是,一旦重新整理网页就不见,或一次修改太多样式,就不易寻找与拷贝。试试Emmet LiveStyle插件吧,配合Sublime后,就可实现你想要的效果,甚至重新整理页面也不会不见,同时还可以修改在线网页,是一个非常好用的chrome插件

Emmet LiveStyle插件简介

emmet livestyle(CSS编辑器开发者插件)是一款可以提高开发效率的CSS编辑器开发者插件,LiveStyle目前不仅仅支持一Chrome浏览器,还支持Safari浏览器,可以实时进行CSS调试插件工具,非常适合前端工程师的使用,用以提供前端工程师的开发效率,同时还可以利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用,在文本编辑器中编辑CSS,LESS或SCSS文件时,即时更新网页样式表。 没有文件保存或页面重新加载:纯粹的实时体验! 这是第一个将DevTools更新以正确方式传回源代码的工具。包括远程视图:创建公开可用的URL(也称为“反向隧道”),以测试任何互联网连接设备或BrowserStack等服务上的本地网站。

Emmet LiveStyle插件功能

1. 即时更新(不会重新加载页面,样式修改以后无需保存也能预览);;
2. 多个页面同时预览(例:同时打开多个页面,并且关联到相同的CSS,此时修改该CSS,这些页面都能即时显示修改内容);
3. 双向修改(在Chrome开发者工具和Sublime Text中,只要有一处修改,两个工具的样式都会更改。)
4. 便捷的安装和使用。

Emmet LiveStyle插件使用方法

1.Emmet LiveStyle插件的离线安装方法参照:老版本chrome浏览器,首先在标签页输入【chrome://extensions/】进入chrome扩展程序,解压你在本站下载的插件,并拖入扩展程序页即可。

Emmet LiveStyle插件使用方法

2.最新版本的chrome浏览器直接拖放安装时会出现“程序包无效CRX-HEADER-INVALID”的报错信息,参照:Chrome插件安装时出现"CRX-HEADER-INVALID"解决方法安装好后即可使用。

3.当安装完毕后,在网址列后方,会出现Emmet的小图示。

Emmet LiveStyle插件使用方法

4.接着再到辅助工具的LiveStyle页面,点下方的「 Download App」钮。

Emmet LiveStyle插件使用方法

5.下载完毕解压缩后,接着再点一下「 Install Sublime Text 3 plugin」,而这款扩展需搭配Sublime Text的编辑器。

Emmet LiveStyle插件使用方法

6,当都安装完毕后,分别会看到绿色勾勾。

Emmet LiveStyle插件使用方法

7.接开启制作的专案页面,再点Emmet的小图示,再按ON将它开启。

Emmet LiveStyle插件使用方法

8.这时将专案的CSS档,开启到Sublime Text的编辑器中,这时再浏览器的Emmet的面板中,将style.min.css的下拉选单中,选择style.min.css也就是Sublime Text中的CSS档。

Emmet LiveStyle插件使用方法

9.当选定好后,就可开始调整CSS的样式。

Emmet LiveStyle插件使用方法

10.这时只要即时修改CSS的样式,在不用储存的情况下,浏览器就会立即的显示修改的结果。

Emmet LiveStyle插件使用方法

11.最酷的在这边,当今天浏览已上线的网页,接着开启Sublime Text并新增一个档案,再将文件类型设为 CSS。

Emmet LiveStyle插件使用方法

12.接着一样将浏览器中的Emmet图示设为on,这时在样式的下拉选单中,就会看到一个未命名的文件名称。

Emmet LiveStyle插件使用方法

13.选择后,这时浏览器中的样式,就会与Sublime Text中的档案联动。

Emmet LiveStyle插件使用方法

14.这时当在Sublime Text新增或修改任何的样式,浏览器也会即时显示,更棒的是即便是重新整理页面,那些设定档也不会不见,真是相当好用。

Emmet LiveStyle联系方式

提供方:emmet.io

官方网站:http://livestyle.emmet.io/

Emmet LiveStyle - 网页样式实时编辑预览工具下载地址

点击下载Emmet LiveStyle - 网页样式实时编辑预览工具

转载必须注明来自: Chrome插件 » Emmet LiveStyle - 网页样式实时编辑预览工具

黑客的浏览器:Vimium

黑客的浏览器:Vimium

0 人评论 108846 次人浏览 3.8分 3.8 分
Vimium是一款以模拟linux或Unix操作系统中的vim编辑器的操作方式来操作Chrome的谷歌浏览器插件,让那些熟悉linux或Unix的用户可以过把瘾。
老司机编码助手

老司机编码助手

0 人评论 11971 次人浏览 3.0分 3.0 分
老司机编码助手是一款可以将制定的文本内容进行编码和解码的chrome扩展程序。
JetBrains IDE Support

JetBrains IDE Support

0 人评论 35784 次人浏览 3.7分 3.7 分
JetBrains IDE Support是一款webstorm网页开发调试工具,支持HTML/CSS/JavaScript编辑和JavaScript调试。
JSON-handle

JSON-handle

3 人评论 48530 次人浏览 4.7分 4.7 分
JSON-handle是一款对JSON格式的内容进行浏览和编辑,以树形图样式展现JSON文档,并可实时编辑。
CSSPeeper

CSSPeeper

0 人评论 10243 次人浏览 4.0分 4.0 分
CSSPeeper是一款专为设计师量身打造的可视觉化网站CSS样式表检查插件。
极简Json格式化

极简Json格式化

0 人评论 20582 次人浏览 3.5分 3.5 分
极简Json格式化是一个非常简单的Chrome插件,用于将JSON接口返回值格式化成可读方式。
Clearly - Chrome 阅读扩展

Clearly - Chrome 阅读扩展

0 人评论 5862 次人浏览 3.0分 3.0 分
Clearly 是一款 Chrome 阅读扩展,可以将当前网页重新排版为易于阅读的界面。除了常规的主题、字体、字号等功能外,Clearly 还支持朗读网页内容
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?