有没有办法在浏览器引擎“内部”调试css？

Question

有没有办法进入“浏览器引擎”（例如chrome上的webkit），看看如何解释css声明，并识别错误？

我的意思是，在“检查元素”下，您可以在开发人员工具中看到哪些css规则使其成为HTML对象。但是从那时起，如果css本身是错误的，那么对于大多数错误来说，没有办法看出错误。

例如：假设我写了

“ - webkit-animation：fgfdgfdgdf 500ms”

而不是

“ - webkit-animation：MyAnimation 500ms”

我想得到类似“找不到对象fgfdgfdgdf”的错误。

或者，让我说我写道：

“left：200px;

位置：静态;“

由于“position：static”，浏览器将忽略“left”属性。有没有什么办法可以让“左”属性出现某种错误 - 比如“由于静态定位导致属性无效”？

谢谢。

Answer 1

基本上，我相信这取决于你的知识。这是一项技能，需要很多激情和专业知识才能做到正确。

以下是一些可用于指导您的基准测试。

取自 - http://css-tricks.com/judging-css-spotting-bad-code/

明显的测试

看看网站。如果它看起来都搞砸了，那么他们做得不好。

更进一步，根据您同意的浏览器进行检查。设计应该适用于所有这些设计。

如果设计应该是响应式的，请调整浏览器窗口的大小以确保设计无论宽度或高度如何都能正常工作。

如果一切看起来都很好，这是一个很好的（也是必需的）第一步。但这并不是CSS很好的绝对证明。

格式化测试

查看创作的CSS文件。请记住，最好的做法是提供实时网站缩小的CSS（删除所有非重要的空格），所以不要看那个。

这不是为了人类阅读。查看他们实际创建的文件。

如果您有一个预期会遵循的既定风格指南，是否遵循了？

如果没有，它看起来是否一致 - 好像他们有自己的风格指南，他们坚持？还是有点马虎？邋sense的意思有时在选择器之后有一个空格，有时没有。一些代码块是缩进的，而另一些则不是。单行CSS与多行CSS混合，没有押韵或原因。

清洁代码是尊敬的开发者的标志。尊重他们所做的工艺和工作的人。

如果前两个测试通过，那很好。但仍然不能证明CSS是好的。

选择器测试

前两个测试可以由任何人完成，但是从这里开始你需要自己熟悉CSS。开始阅读CSS，看看你所看到的是否对你有意义。

的 CSS ...

.article #comments ul > li > a.button {
  /* Crazy town */
}

希望这会有所帮助......