是否有可能"逐步"浏览器应用CSS规则进行Web开发？

Question

有没有一种方法或工具可以让我逐一介绍CSS规则的绘制？

类似于带有程序代码的IDE,但使用CSS.(但我不希望通过浏览器的源代码并逐步执行其底层函数来实现它 - 我只是意味着通过类似于Web Developer Toolbar的形式通过CSS规则来"更新".)

我希望这通常比有用更繁琐,但在某些情况下,它会在网页开发中提供帮助,例如调试猫和猫头鹰,或者找出如何实现特定效果.

---

编辑澄清,通过"踩踏"我的意思是sg.喜欢:可能会停止浏览器绘制另一个规则,在每个结束我选择的每个规则之后,在应用下一个规则之前(每个规则都在页面的"最终绘制"完成之前),以检查发生的情况.

在BoltClock的评论之后编辑2,我用'paint'替换了'render'这个词,更加清晰.删除原件是整洁的.

Answer 1

除了已经提到的 webtools 之外，我想这只有在浏览器的完整源代码可用的情况下才有可能，因此可以在本地调试或远程调试浏览器应用程序本身，并将断点设置为有趣的“顶级”函数。

例如，下载基于 Java 的开源浏览器 Lobo 的源代码是没有问题的，然后可以像任何其他应用程序一样直接从 IDE（如 eclipse、intellij 等）进行调试。

然而，我不认为像 MS Internet Explorer 这样的产品的完整源代码将完全可用，以允许您调试其最深层的魔力（对于 MS Internet Explorer 来说，这可能也需要实时...）。

因此，回到具有可用源代码的浏览器，您可以：

• 让浏览器在 IDE 中编译/运行并直接调试本地代码
• 让浏览器作为允许远程调试的应用程序运行，并将相应的源代码作为远程调试器的源代码（主要是在 IDE 中）。

通过这种方式，您可以分析此类浏览器的深层魔力，您可以看到图像、CSS 等不同资源是如何收集、验证、解析、处理并最终显示的。

一旦找到了有趣的函数并设置了一组好的（条件）断点，当涉及到特定浏览器的行为时，这可能非常有用。

然而，如果这对于您的上下文来说过于详细，我想没有其他可能性，只能依赖已经给出的有关分析浏览器行为的功能，例如 chromes devTools 或 Mozilla 插件 Firebug。毫无疑问，这将越来越多地集成到此类插件/工具中，就像用户 BoltClock 的评论所建议的那样，并且始终值得研究此类插件/工具的功能以最大限度地利用它们。