实时查看css效果最便捷⽅式
实时查看css 效果最便捷⽅式
清理平台虽然现在热更新很快了（Go Live 插件、或者nodejs 插件），但延迟还是有的。
想要更快的调试css 代码的样式，⽤浏览器⾃带的功能是最⽅便的。 这⾥并不是指 （chrome 浏览器下）在 Elements 控制台下更改 Styles 下的样式，这样写太慢了，只能⼀句⼀句的编写以及修改样式。如下图：
更快的⽅式
同样要进⼊ Elements 模块下，选中 Styles 项，点击右侧加号（new style rule）
会出现⼀个检查员样式表（inspector-stylesheet）的资源⽂件，点击这个资源⽂件名称。
会进⼊ Sources 模块下，并预览了这个临时⽂件
在这⾥修改css 样式，能完全实时的在页⾯中应⽤，当然也可以不新增样式规则（new style rule）吸音墙
当前html 页⾯如有引⽤css⽂件，也可以直接点击css⽂件名称进⼊对应的css⽂件。
巧克力喷泉机
所有⾃定义样式（⾮默认）都会有对应的⽂件出处、包括多少⾏，这也是样式调试定位错误的⽅式。 进⼊对应的css ⽂件就可以在当前⽂件内编辑，并实时应⽤样式规则⾄页⾯ Dom 中。
如下动图演⽰效果：
钛阳极氧化
在此处调试样式，能即时应⽤、有样式提⽰，只需要改好细节样式后， 复制当前写好的样式⾄ 编辑器 中的 css ⽂件内即可。
在开发能极⼤提⾼调试样式规则的时间。
总结
博主就经常使⽤此⽅法调试样式，效率真的挺不错的，再快的编译器也不如原⽣的实时应⽤样式响应快
⽽且，这种⽅法不需要其他任何插件配合，只需要打开浏览器，浏览任意⽹站代码，都可以快速的调试样式如有帮助到⼤家，点个⼩⼩的赞哈，谢谢
电工工具包
六氢吡啶以上信息如有疏漏或错误，欢迎指正。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议