`
xllily
  • 浏览: 120966 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用livestyle和chrome实现双向样式修改

阅读更多

最近看老外的ppt,看到了句话:

Use tools. not rules!

所以今天介绍个利器:liveStyle,liveStyle是Emmet团队开发的,Emmet就是大名鼎鼎的zen coding啊。

其实在订阅的weekly里面早就介绍过livestyle,真正用起来还是看了上面老外的这个ppt,试用了下liveStyle,结果一下子就喜欢上了,如果你开发遇见了下面的问题就可以使用liveStyle了:

  1. 在chrome DevTools中修改了样式,想同步到css文件中
  2. 修改了css文件,不想刷新chrome,就可以实时看到效果

嗯,livestyle解决了这两个问题,提高了开发效率!

livestyle安装

安装sublime text的liveStyle插件

package control搜索livestyle就可以了,或者去官方下载

安装chrome扩展

通过这个网址,安装livestyle,如果打不开,可能需要准备梯子,你懂的~ 感谢裆~

安装后,在chrome中按F12打开DevTools就可以看到在console后面多了个LiveStyle面板。

使用livestyle

  1. 用sublime text 打开一个css文件,例如a.css
  2. 随便打开个网址,然后F12 切换到LiveStyle
  3. 选中Enable LiveStyle for current page,这时会把页面的所有css都列出来
  4. 选择一个需要替换的css,在下拉框中选择要替换掉的sublime打开的css文件,例如:a.css;或者点击add file按钮
  5. 这时候在sublime中修改a.css,就可以在chrome中实时看到效果;在chrome修改样式,也可以将修改同步到a.css文件中
分享到:
评论

相关推荐

    chrome插件修改请求头

    修改chrome的请求头。 Header Editor是一款管理浏览器请求的Chrome扩展,包括修改请求头、修改响应头、重定向请求、取消请求。  您可以从Redirector导入规则  规则说明:  1、匹配类型  规则会应用到满足相应...

    chrome实现ie内核(chrome.r39.crx+ffactivex-setup-r39.exe+控件例子)

    标题中的“chrome实现ie内核”指的是在Google Chrome浏览器中模拟或使用Internet Explorer(IE)浏览器的内核来运行特定的网页或Web应用程序。这通常是因为一些旧的或企业内部的应用程序依赖于IE的ActiveX技术,而...

    checkbox radio select 样式修改样例

    /* 移除Safari和Chrome的默认样式 */ background-image: url('data:image/svg+xml;charset=utf8,...'); /* 自定义下拉箭头图标 */ background-position: right 10px center; background-repeat: no-repeat; } ``...

    alert及confirm弹出框样式,换不错

    总结来说,这个项目展示了如何利用HTML、CSS和JavaScript来增强`alert`和`confirm`的用户体验,通过自定义样式和行为,使对话框更加符合网页的整体设计风格和交互需求。这样的技术实践对于提升网站的专业性和用户...

    chrome浏览器实现打印预览打印功能.zip

    `真正好用的网页打印和分页方法-CSS+DIV或元素ID.url`链接指向的资源可能包含了一些CSS技巧,如使用`@media print`查询来定义打印样式,以及利用CSS的`page-break-after`或`page-break-inside`属性来控制页面断点,...

    Google Chrome浏览器无法显示hover样式的解决方法

    今天用做了一个导航效果,用到了hover样式,就是鼠标移上去导航背景变别的颜色,可是在Google Chrome浏览器中,把鼠标移到导航上不显示效果,背景无变化,最终在网上找到了解决方法,拿来做个备忘。 原因就是,在...

    emmet livestyle(CSS编辑器开发者插件) v0.8.2.1230 官方免费版.rar

    Emmet LiveStyle是一款专为前端开发者设计的CSS编辑器插件,它极大地提升了开发者在进行样式表编写时的效率和协同工作能力。该插件的主要功能是实现实时的CSS预览和同步编辑,允许开发者在编辑器中修改CSS代码后,...

    chrome-tabs:HTMLCSS中的Chrome样式的标签

    理解如何将它们正确地整合在一起,以及如何扩展或修改Chrome-Tabs的功能,是实现个性化标签页系统的关键。 8. **性能优化**: 当处理大量标签页时,性能优化是必要的。这可能涉及到懒加载内容、智能渲染策略或利用...

    dashboard样式修改

    2. **响应式设计**:现代dashboard需要适应不同的设备和屏幕尺寸,因此,样式修改也包括实现响应式设计,确保在手机、平板和桌面电脑上都能提供良好的用户体验。这通常通过媒体查询(media queries)来实现,根据...

    谷歌插件-打开网页修改网页标题

    总结来说,"谷歌插件-打开网页修改网页标题"是一个利用Chrome API来改变浏览器中打开网页标题的工具。它通过JavaScript代码实现功能,并且可能包含多个文件,如manifest.json、JavaScript脚本、HTML和CSS样式文件等...

    Chrome_autoit操作chrome_autoit3chrome_autoit_autoitchrome_chrome_源

    需要注意的是,由于安全原因,Google Chrome通常会阻止非用户交互的自动脚本操作,因此在使用AutoIt时可能需要调整Chrome的安全设置或者利用特定的扩展程序配合使用。 综上所述,"Chrome_autoit操作chrome_autoit3...

    chrome浏览器标签页修改美化插件

    修改chrome的新建标签页,使用如下: 编辑压缩包内的html文件,修改链接为你喜欢的网址,相当于把标签页做成一个导航页,自由定制。然后通过chrome://extensions/打包为crx后缀chrome可是别的扩展,打包好后直接拖入...

    fastadmin 后台 bootstrap样式库 样式替换文件

    2. **Bootstrap的类结构**:熟悉Bootstrap的类命名规则,例如`.container`、`.row`、`.col-*`等,可以让你更容易地找到和修改样式。 3. **自定义Bootstrap**:Bootstrap允许开发者通过定制工具(Bootstrap ...

    简单的chrome插件,实现自动登录.

    通过学习和理解这个自动登录的Chrome插件,开发者可以进一步提升对浏览器扩展开发的理解,同时也能掌握到如何利用JavaScript和Chrome API来解决实际问题。这不仅有助于个人技能提升,也为未来创建更多实用的浏览器...

    修改chrome插件白名单所需文件chrome.adm

    可以修改chrome插件白名单, 使用被停用的插件

    chrome浏览器自带字体怎么修改为默认雅黑?.docx

    chrome 浏览器自带字体修改为默认雅黑 chrome 浏览器自带字体修改为默认雅黑是一种简单而实用的浏览器自定义设置。通过以下步骤,即可将 chrome 浏览器的默认字体修改为微软雅黑。 知识点 1: 查看 chrome 浏览器...

    滚动条样式修改

    需要注意的是,这些样式主要适用于基于WebKit的浏览器,如Chrome和Safari。对于Firefox,你需要使用`-moz-`前缀,而对于其他浏览器,可能需要借助JavaScript库或插件来实现兼容。 在JavaScript环境中,可以通过操作...

    web移动端和PC端利用chrome同步开发调试

    可以使用 Chrome 的开发者工具来检查和调试网页的元素、样式、脚本等。 Android 4.4 原生 App WebView 调试 在 Android 4.4 系统版本以上,原生 App 的 WebView 也可以进行调试。可以通过在 PC 端 Chrome 中输入...

    Chrome获取MAC地址扩展程序

    在描述中提到,这个扩展程序利用了C++编程语言来实现MAC地址的获取,然后通过Chrome的Native Messaging技术将获取到的数据传递给JavaScript,从而在浏览器环境中使用。 Chrome Native Messaging是一种通信机制,它...

    为ie和chrome单独设置样式的方法

    在网页开发过程中,由于各个浏览器对CSS样式的解析和实现存在差异,因此为了实现良好的跨浏览器兼容性,我们需要为不同的浏览器编写特定的样式。本文主要介绍如何为IE(Internet Explorer)和Chrome浏览器单独设置...

Global site tag (gtag.js) - Google Analytics