是否有一种方法或工具可以让我逐一介绍CSS规则的绘制？
类似于带有程序代码的IDE，但使用CSS。 （但我不希望通过浏览器的源代码并逐步执行其底层函数来实现它 - 我只是意味着通过类似于Web Developer Toolbar的形式通过CSS规则进行“更新”。）
我希望这通常比有用更繁琐，但在某些情况下，它会在网页开发中提供帮助，例如debugging cats and owls或finding out how a particular effect is achieved。
编辑澄清，通过“单步执行”我的意思是sg。喜欢：可能会停止浏览器绘制另一个规则，在每个结束我选择的每个规则之后，在应用下一个规则之前（每个规则都在页面的“最终绘制”完成之前），以检查发生的情况。
在BoltClock's comment之后编辑2 ，我将'render'替换为'paint'，以便更清楚。删除了原件以保持整洁。
答案 0 :(得分：1)
除了已经提到的webtools之外，我想这只有在浏览器的完整源代码可用时才有可能，因此可以本地调试或远程调试浏览器应用程序本身，并将断点设置为有趣的“顶级”函数。
例如，下载基于Java的开源浏览器Lobo的源代码没有问题，然后可以直接从您的IDE中调试任何其他应用程序，如eclipse，intellij等。
但是我不认为像MS Internet Explorer这样的产品的完整源代码将完全可用于允许您调试其最深的魔力（在MS Internet Explorer的情况下也可能需要实时...）。 p>
回到具有源代码的浏览器，你可以：
通过这种方式，您可以分析这种浏览器的深层魔力，在这种浏览器中，您可以看到如何收集，验证，解析，处理和最终显示不同的资源，如图像，css等。
一旦定位了有趣的函数并设置了一组好的（条件）断点，当涉及到特定浏览器的行为时，这可能非常有用。
如果这对你的上下文来说太详细了，我想除了依赖已经给出的关于分析浏览器行为的功能之外没有其他可能性，例如使用chromes devTools或Mozilla插件Firebug。毫无疑问，这将越来越多地集成在诸如用户BoltClock建议的评论之类的插件/工具中，并且总是值得研究这些插件/工具的功能以尽可能地推进它们。