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

Question

有没有办法“进入浏览器引擎”(比如chrome上的webkit )，看看css声明是如何解释的，并找出错误？

我的意思是，在“检查元素”下，您可以在开发人员工具中看到哪些css规则适用于HTML对象。但是从这一点来看，如果css本身是错误的，那么对于大多数错误来说，就没有办法看到哪里出了问题。

例如:假设我写了

“-webkit动画: fgfdgfdgdf 500ms”

而不是

“-webkit-动画: MyAnimation 500ms”

我希望得到类似"object fgfdgfdgdf not found“的错误。

或者，假设我写了：

“左: 200px；

位置:静态；“

浏览器会因为"position:static“而忽略"left”属性。有没有办法让"left“属性出现类似”属性因静态定位而无效“之类的错误？

谢谢。

Answer 1

基本上，我相信这可以归结为你的知识。这是一项技能，需要很大的热情和专业知识才能把它做好。

这里有一些你可以用来指导你的基准。

摘自-

显而易见的测试

看看这个网站。如果这一切看起来一团糟，那么他们做得很糟糕。

更进一步，根据您同意支持的浏览器对其进行检查。设计应该在所有这些都是可行的。

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

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

格式化测试

看一下创作的CSS文件。请记住，最好的做法是为实时网站提供精简的CSS (所有不重要的空格都去掉了)，所以不要看它。

​

这不是为了让人读懂的。看看他们实际创建的文件。

如果你有一个既定的风格指南，预计会被遵循，它被遵循了吗？

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

干净的代码是一个受人尊敬的开发人员的标志。尊重手艺和他们所做的工作的人。

​

如果前两个测试通过了，那就太好了。但是仍然不能完全证明CSS是好的。

选择器测试

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

CSS...

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

希望这能帮上忙...