当前位置: Chrome插件首页 > 开发者插件 > Emmet LiveStyle:实时高效的CSS编辑器 Chrome插件

Emmet LiveStyle:实时高效的CSS编辑器 Chrome插件

插件分类:开发者插件

Emmet LiveStyle:实时高效的CSS编辑器 Chrome插件图文教程

Emmet LiveStyle插件概述

Emmet LiveStyle是什么?Emmet LiveStyle是一款可以提高开发效率的CSS编辑器开发者插件LiveStyle目前不仅仅支持一Chrome浏览器,还支持Safari浏览器,可以实时进行CSS调试插件工具,非常适合前端工程师的使用,用以提供前端工程师的开发效率,同时还可以利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用。
emmet livestyle

Emmet LiveStyle插件功能介绍

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

Emmet LiveStyle插件下载安装

Emmet LiveStyle插件哪里可以下载?你可以从chrome应用商店里找到Emmet LiveStyle,如果你的chrome应用商店无法打开,你可以在本站的下方找到Emmet LiveStyle插件下载地址。

Emmet LiveStyle插件怎么安装?
1. 如果你能够打开chrome应用商店,并且可以找到
Emmet LiveStyle插件,那么直接点击“添加至chrome”,如下图所示:

安装livestyle
2.如果你的chrome应用商店无法打开,你从本站或者其他途径获得了
Emmet LiveStyle插件,那么就选择离线安装该插件。由于Emmet LiveStyle插件同其他chrome插件一样都是CRX格式的,所以具体的安装方法请参照:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件? 如果CRX格式插件不能离线安装怎么办

Emmet LiveStyle插件使用说明

Emmet LiveStyle插件怎么使用?
1.chrome浏览器安装好livestyle后,用Chrome打开需要编辑的地址,右键点击查看网页元素,可看到下图所示:
livestyle使用方法1
2.此时在Chrome代码查看器中编辑您的CSS,即可同步到您在Sublime Text中打开的CSS文件中。或者在Sublime Text中编辑您的CSS也可义在浏览器中同步显示页面效果!
livestyle使用方法2


Emmet LiveStyle插件注意事项

更多优秀chrome插件推荐


Emmet LiveStyle插件英文介绍

Live bi-directional CSS editing of new generation
---------------------------------------------------
Must be used with Sublime Text editor.
For more info, read http://livestyle.emmet.io/install/
---------------------------------------------------

Unlike other similar tools, LiveStyle doesn't replace CSS file in browser (or file system) to display changes, it performs structural analysis as-you-type and maps changes from one CSS source into another.

Benefits are:
* Easily live edit you production web-site with original CSS source, even if web-site contains minified and concatenated CSS.
* No file saving, no page reloading
* You need only web browser and editor for live editing: no special web-server or file watcher required.
* It doesn't matter where your CSS file comes from: local file system, FTP or some fancy network mount — if it can be opened in editor, you can use it for live editing.
* Use multiple windows to tweak responsive design: changes made in editor or DevTools are automatically spanned across windows.

More info and how to use it: http://livestyle.emmet.io

Emmet LiveStyle:实时高效的CSS编辑器 Chrome插件图片

  • Emmet LiveStyle:实时高效的CSS编辑器插件图片

Emmet LiveStyle:实时高效的CSS编辑器基本信息

插件名称:Emmet LiveStyle:实时高效的CSS编辑器 插件作者:emmet.io 插件语言:English 官方站点:http://livestyle.emmet.io/ 插件唯一标识:diebikgmpmeppiilkaijjbdgciafajmg

Emmet LiveStyle:实时高效的CSS编辑器用户数和评分

下载次数:45728 用户评分:4.74375 (共5分) 参与评分人数:160

Emmet LiveStyle:实时高效的CSS编辑器文件信息

当前版本:0.8.2.1230 最后更新日期:2020-07-09 文件大小:159KB

Emmet LiveStyle:实时高效的CSS编辑器下载地址

Emmet LiveStyle:实时高效的CSS编辑器相关插件

Emmet LiveStyle:实时高效的CSS编辑器

开发者插件 2020-12-23 23:20:42

Emmet LiveStyle是一款可以提高开发效率的CSS编辑器开发者插件。LiveStyle目前不仅仅支持一Chrome浏览器,还支持Safari浏览器,可以实时进行CSS调试插件工具,非常适合前端工程师的使用,用

Stylist:自定义网页CSS

开发者插件 2019-12-30 22:51:57

我们在上时间对着电脑上网后,即使不厌倦了网页的字体也很可能会出现视力疲劳的情况,有事会想自己给Google写CSS?想恶搞网页?或者修改一下网页的字体或者背景色等!这一切的需

网站样式管理器-Stylish

开发者插件 2018-05-09 17:40:29

Restyle网络与时尚,一个用户样式管理器。时尚让你轻松安装主题和外观的许多著名景点。
用户风格主题的网站。用户样式赋予你的浏览体验,让你自定义的网站。拿出不相关的内容

CSS remove and combine

开发者插件 2019-12-31 00:20:27

CSS remove and combine是一款可以通过创建仅包含正在使用的选择器的新CSS样式表来删除页面上未使用的CSS规则的插件

Code Cola - CSS样式可视化插件

开发者插件 2019-11-04 09:45:31

Code Cola是一款能查看网页代码样式的chrome CSS样式可视化插件,主要能查看页面板块中的所有样式元素,并能通过配置到服务器上的文件进行在线编辑。相信大家都知道,网页设计出来以

css auto reload

开发者插件 2019-11-15 15:31:09

css auto reload 是一个web开发者工具,一款chrome 插件。在写 css 的时候,经常需要不断的切换窗口,刷新页面,查看效果,css auto reload 插件可以在你改变了css并保存好后,自动在页面上重新

ChroPath

开发者插件 2020-03-02 20:14:41

ChroPath插件使您可以轻松地在任何网页上编写,编辑,提取和评估XPath和CSS查询。 ChroPath还用作最佳CSS扩展。

JSON-handle

开发者插件 2019-10-31 09:23:38

JSON-handle 是一款功能强大的 JSON 数据解析 Chrome 插件。它以简单清晰的树形图样式展现 JSON 文档,并可实时编辑。针对数据量大的场景,可以做局部选取分析。

Online Excel Viewer And Editor

办公插件 2019-02-11 11:11:20

Online Excel Viewer And Editor是一款可以在线编辑和阅读excel的chrome插件。使用上下文菜单选项打开指向Excel文件的链接。 对于本地Excel文件,使用键盘快捷键Alt + Shift + X启动Zoho Sheet Viewer。支

JSON-handle v0.5.6

开发者插件 2019-10-31 09:23:01

JSON-handle 是一款功能强大的 JSON 数据解析 Chrome 插件。它以简单清晰的树形图样式展现 JSON 文档,并可实时编辑。针对数据量大的场景,可以做局部选取分析。

JSON-handle2

开发者插件 2019-10-30 17:12:57

JSON-handle 是一款功能强大的 JSON 数据解析 Chrome 插件。它以简单清晰的树形图样式展现 JSON 文档,并可实时编辑。针对数据量大的场景,可以做局部选取分析。

Emmet LiveStyle:实时高效的CSS编辑器同类插件推荐

DevTools Theme: Zero Dark Matrix v3.0.5.1 Chrome插件

开发者插件 2020-04-23 04:49:44

这是开发人员工具 [CTRL/CMD SHIFT I] 的主题。安装说明
---------------------------------------------------------
-添加此主题
-Goto chrome: 使能-devtools-实验和使能开发工具实验。在页面底部选择 [立即重新启动]。
-打开开发人员工具设置,将主题模式设置为 “

Accessibility Developer Tools Chrome插件

开发者插件 2015-02-11 12:41:10

辅助审计和元素属性
这个扩展将增加一个辅助审计,并在元素标签的辅助功能的侧边栏面板,为您的Chrome开发人员工具

要使用审核: 。进入审核选项卡,选择辅助审计,然后单击运行。审计结果将作为规则它们由页违反(如有的话) ,以示出其结果为每个规则在网页上的一个或多个元素的列表。

要使用边栏窗格:检查一个元素的元素选项卡,然后展开侧边栏辅助窗格(请注意,它可能离屏如果样式窗格中打开) 。如果检查元素有相关的辅助功能的任何属性,这些属性会显示在侧边栏窗格中。您也

Web Developer Form Filler Chrome插件

开发者插件 2014-12-17 21:12:26

此扩展开发人员使用,以方便填写表格
此扩展开发人员使用,以方便填写表格,同时开发网络页面
提供
的源代码在GitHub上的https : //github.com/abzubarev/web-developer-form-filler-ext

Rax Tools Chrome插件

开发者插件 2020-01-31 04:35:13

Rax 开发周边工具套装,主要功能包括地址栏快捷搜索文档和 Demo ,Weex bundle 扫码,性能及页面稳定性分析等

RaxTools 0.1.1 版本新增更多的学习入口,帮助您更好的学习 Weex 和 Rax。H5 页面性能检测项由原有的 17 项增加至 28 项,检测更加全面。新提供了加载时间分析工具和页面打分系统,帮助开发者更加直观的了解页面性能情况。

Web Sniffer - 查看HTTP请求 Chrome插件

开发者插件 2019-12-14 15:06:46

查看所有HTTP请求和响应Web浏览器和Web服务器之间发送
对于,显示以下信息每个HTTP请求(可以隐藏) 。
- 标签ID ,标题[过滤]
- 请求ID
- 类型请求[过滤]
- 时间[过滤

梯度造物主 Chrome插件

开发者插件 2019-07-21 23:09:17

如果你正在尋找一種快速,琅琅上口,可定制的漸變背景為您的博客,個人網站,簡報或封面頁;沒有進一步看。梯度造物主給你一個有效的,非常直觀,即時的方式來增加額外的優雅觸摸到任何你可能會創作是肯定給你介紹和有效性值得。

可以使用應用程序本身進行微調只是在合適的色調和顏色強度你在四焦點梯度渴望,然後複製您的網頁上使用電子表格的代碼如果張貼;或只是導入它直接到Word或其他任何標準的文本編

Vulcan by Firebase Chrome插件

开发者插件 2015-04-02 18:19:31

一个火力地堡数据检查和编辑器中的Chrome Devtools 。
火神是一个强大的工具检查,并直接从Chrome DevTools操纵你的火力地堡数据。

Xdebug helper Chrome插件

开发者插件 2019-12-06 11:21:12

每个人都必须拥有使用Xdebug调试,分析和跟踪PHP代码的功能。 此扩展将帮助您轻松地启用/禁用调试,性能分析和跟踪,而不必费力地处理POST / GET变量或cookie。对于使用带有Xdebug支持的

aXe Chrome插件

开发者插件 2016-04-05 01:09:08

Accessibility testing in Chrome Developer Tools
Automated tool to find Accessibility defects on your web site by using the aXe Chrome extension. Drop the aXe on your accessibility defects!

烽火台网络助手 Chrome插件

开发者插件 2020-01-29 20:57:44

更新日志:
1.3(2017/06/16)
取消后台运行,bugfix

1.2.8(2017/01/03)
版本号提示位置修改

1.2.7(2017/01/04)
修复上报参数

1.2.6(2016/12/20)
修复bug

1.2(2016/12/9)
新增常用链接功能,可快速