在Google Chrome中调试CSS

Question

我正在写一些CSS文件,但是当我犯了一个错误时,Chrome似乎只是默默地忽略了我搞砸的部分,然后渲染剩下的部分.

这使得调试很烦人,因为我无法弄清楚出了什么问题.

那么,有没有办法让Chrome"用大红色字母尖叫我",这样我就可以花更少的时间找到错误并花更多的时间修复它？

Answer 1

虽然您无法"调试"CSS,因为它不是脚本语言,您可以使用Chrome DevTools Elements面板检查元素并查看右侧的"样式"窗格.这将为您提供有关被覆盖或忽略的样式的见解(投掷线)."样式"窗格也很有用,因为它能够对正在检查的文档进行LiveEdit,这可以帮助您解决问题.如果正在覆盖样式,则可以查看"计算样式"窗格以查看实际用于设置文档样式的CSS.

要打开Chrome DevTools窗口,请在Chrome浏览器标签中点击Ctrl+ Shift+ I.(Command+ Opt+ I为一个MAC)

有关详细信息,请访问https://developer.chrome.com/devtools/index

Answer 2

由于 CSS 不是脚本语言，因此您无法正确调试它。无论如何，如果你知道哪里出了问题，你可以尝试手动调整它。

此外，您还可以在这里找到 w3c 验证器： http: //jigsaw.w3.org/css-validator/，它可能会给您一些反馈