Firefox默认美化输出json太正确了

by admin on 2020年1月15日

如sublime text

Use tools. not rules.

直观,json的结构一目了然

QQ20190629-1@2x.png (上传于2019-06-29
09:03:19)
澳门新葡亰信誉平台游戏 1

今天发现一个很棒的利器:livestyle.
livestyle是Emmet团队开发的。下面来说下怎么使用:

澳门新葡亰信誉平台游戏,QQ20180314-0@2x.png (上传于2018-03-14
13:40:59)
澳门新葡亰信誉平台游戏 2

如旧版本的chrome

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

chrome就只能看原始的字符串了

QQ20190629-2@2x.png (上传于2019-06-29
09:03:19)
澳门新葡亰信誉平台游戏 3

livestyle 安装

在 sublime text 中安装 livestyle 插件

澳门新葡亰信誉平台游戏 4

QQ截图20160815182135.png

澳门新葡亰信誉平台游戏 5

QQ截图20160815182218.png

QQ20180314-1@2x.png (上传于2018-03-14
13:40:59)
澳门新葡亰信誉平台游戏 6

chrome 已经醒悟过来了,sublime text 仍执迷不悟。

安装chrome扩展

通过这个网址,安装livestyle,如果打不开,可能需要准备梯子,你懂的~
感谢裆~
安装后,在 chrome 中按 F12 打开DevTools就可以看到在 console 后面多了个
LiveStyle 面板。

澳门新葡亰信誉平台游戏 7

QQ截图20160815182837.png

澳门新葡亰信誉平台游戏 8

QQ截图20160815182401.png

使用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文件中

到这个时候,其实你还不能成功,因为还缺少了一个软件。LiveStyle点击下载

澳门新葡亰信誉平台游戏 9

QQ截图20160815182703.png

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图