有哪些调试css的常用技巧？

Question

有哪些调试css的常用技巧？

Answer 1

chome的审查元素 firefox的firebug
手机端调试推荐一个基于nodejs的工具：weinre，非常好用

Answer 2

css真的很简单，技巧无非是去细心观察，观察各个覆盖的可能。然后去修改调试都可以解决而已。

Answer 3

主要就是chrome的审查元素（Inspect Element），如果用jQuery的话，chrome或者firefox还有对应的调试插件提供更多的信息。

Answer 4

就题目来看：调试css的技巧常用的也就是审查元素了！

但是我不同意前面的说法！

css并不简单，我们都知道前端的工作主要是html+css+javascript，可以看出来css也是三大块当中的单独的一块。诚然目前的状况是，javascript更加的受到重视。当然也存在一些公司招聘css专家确实一人难求。

其实调试css并不是说很简单的调试着改一两个值就能搞定的。如果你想要知其所以然的话，了解css当中的一些原理那是必须的。反过来说，如果你知道了css一些原理，调试起来也就会更加的方便简单容易。

总的来讲，如果你css学得好，调试的时间也就花费的少。如果你css学的不行，那么你用来调试的时间将翻倍，并且你不知道从什么入口开始调试！

Answer 5

给楼主推荐几款工具吧。fiddler,Yslow...都很不错

Answer 6

1是给全部元素加上轮廓线或者背景色（起辅助作用），因为ctrl+shift+c，只能一次显示一个元素的盒/块，没法同时查看父元素的和子元素的
https://chrome.google.com/webstore/detail/debug-css/igiofjnck...
https://dev.to/gajus/my-favorite-css-hack-32g3
https://stackoverflow.com/questions/6060417/find-out-what-html-elements-are-forcing-the-page-block-section-to-be-wide-tall
https://stackoverflow.com/questions/66485873/determining-which-dom-element-is-causing-the-dimensions-to-increase-for-a-parent

2是熟练掌握在elements面板中切父级子级的快捷键（左右上下键），边切边看着computed

这两者结合，能调试找问题快点（不过还是很麻烦）

（一个改进点是对flex处理标记一下，有时间研究研究）

3是可能有覆盖的情况下，右键用delete element删一下元素，来找到某个左边的视觉效果到底是哪个dom元素导致的