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

发布时间: 编辑:chromegood 0人评论 15772次浏览 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 - 网页样式实时编辑预览工具

转载必须注明来自:https://huajiakeji.com/web-development/2019-07/2765.html

JSON-handle

JSON-handle

3 人评论 100465 次人浏览 4.7分 4.7 分
JSON-handle是一款对JSON格式的内容进行浏览和编辑,以树形图样式展现JSON文档,并可实时编辑。
颜色增强工具(Color Enhancer)

颜色增强工具(Color Enhancer)

0 人评论 16332 次人浏览 4.0分 4.0 分
颜色增强工具(Color Enhancer)是一种可自定义的颜色滤镜,可应用于网页以增强颜色的辨识度的谷歌官方浏览器插件。
JetBrains IDE Support

JetBrains IDE Support

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

CSSPeeper

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

极简Json格式化插件

0 人评论 53491 次人浏览 3.2分 3.2 分
极简Json格式化是一个非常简单的Chrome插件,用于将JSON接口返回值格式化成可读方式。
Mathtype - 数学公式编辑器

Mathtype - 数学公式编辑器

0 人评论 8995 次人浏览 3.0分 3.0 分
Mathtype是由美国Design Science公司开发的一款强大的数学公式编辑器, 可帮助用户在各种文档中插入复杂的数学公式和符号,数学公式编辑器工具可以轻松输入各种复杂的公式和符号。它让你在做测试、网页、展示或撰写研究文件时,可以创建复杂的数值方程或技术表达式。
Stylish插件V2.0.9

Stylish插件V2.0.9

0 人评论 10909 次人浏览 3.0分 3.0 分
Stylish插件是一款非常知名的能为网站定制各种各样的主题的浏览器网站主题样式修改工具,Stylish插件为世界各地的网站和Web应用提供主题和皮肤,支持自定义修改、CSS编辑器创建主题。
Brackets - 一款免费的前端开发工具

Brackets - 一款免费的前端开发工具

0 人评论 10021 次人浏览 3.0分 3.0 分
Brackets是一款现代化的文本编辑器,具有集中的可视化工具和预处理器支持,可轻松在浏览器中进行设计。它是专为网页设计师和前端开发人员设计的。
Clearly - Chrome 阅读扩展

Clearly - Chrome 阅读扩展

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

老司机编码助手

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

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