【找bug小技巧】前端Html/CSS万能找bug方法/使用几行css精准检测布局bug

在前端开发中，如果布局或者样式出了问题，有些bug是很难发现是具体哪个元素的，比如我开发了一个页面，一直凸出来一块，页面宽度会被顶开从而出现滚动条，但是只凭眼睛和控制台又很难精准看到是哪里出了问题，只需添加下面几行css，便可精准定位到哪个具体元素出了什么问题。
css代码如下：

* {
    outline: solid #f00 1px !important;
    background: #000 !important;
    color: green !important;
}

加上这几行代码，页面就会变成这样，所有元素的大小边距清晰明了：

比如我这里一直突出一块，但是不能确定到具体某个元素，使用这个方法就非常清晰可见了，改好Bug，再把这几行代码注释即可