简评: 这个技巧很棒, 可以一目了然不同层级之间的关系, 可以很快看出不同浏览器的怪异行为, PS: FireFox 的 3D View 也是很棒的功能(Tilt 3D https://addons.mozilla.org/firefox/addon/tilt/).
Debugger CSS
比如有这么一个需求, 设计一个标题, 标题中的图片需要悬浮在多行所有文字上, 如上图所示.
现在我们想要调试这个标题的层级关系. 试着使用如下的 CSS 作用于所有的元素.
* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
这样我们所有的元素都会添加一个边框. 可以方便的看到不同元素的位置关系.
我们再对这个样式进行改进, 添加 color 和 background, 并且使用 !important 来修饰(我们只在 debug 的时候用到该样式,!important 是个不错的选择, 来大大减少样式冲突的可能).
- * {
- color: hsla(210, 100%, 100%, 0.9) !important;
- background: hsla(210, 100%, 50%, 0.5) !important;
- outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
- }
修改后的标题样式如上所示. 给所有元素的 color 和 background 设置一个半透明的蓝色使得 debug 界面更加清晰, 而且使用半透明的颜色有一个好处是多级嵌套的地方颜色会变深 (更白或更蓝) 这样我们可以知道更多的细节.
我们还可以更具自己的情况对这个 debug 样式做调整, 比如标题中现在用了阴影, 对视觉上有一定的影响我们可以强制去掉, 还有不希望显示矢量图, 最终我们获得如下的样式:
- *:not(path):not(g) {
- color: hsla(210, 100%, 100%, 0.9) !important;
- background: hsla(210, 100%, 50%, 0.5) !important;
- outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
- box-shadow: none !important;
- }
来源: http://www.jianshu.com/p/f4214443bd76