css - "step through"浏览器是否可以应用 CSS 规则进行 Web 开发？

Question

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

类似于在 IDE 中使用程序代码，但使用 CSS。 (但我不想通过获取浏览器的源代码并单步执行其底层功能来完成此操作 - 我只是指通过 CSS 规则单步执行“更新”，其形式类似于 Web 开发人员工具栏。)

我认为这通常是乏味多于有用，但在某些情况下它确实有助于 Web 开发，例如 debugging cats and owls或 finding out how a particular effect is achieved .

---

编辑 澄清一下，“单步执行”是指 sg。比如:可能会阻止浏览器绘制另一条规则，在每次结束我选择的每条规则之后，在应用下一条规则之前(每次都在页面的“最终绘制”完成之前)，以检查发生了什么。

在 BoltClock's comment 之后

编辑2 ，为了更清楚，我将“渲染”一词替换为“绘画”。删除原件以保持整洁。

Answer 1

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

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

但是，我认为像 MS Internet Explorer 这样的产品的完整源代码永远不会完全可用，以允许您调试其最深奥的魔力(如果是 MS Internet Explorer，这可能还需要一个实时...)。

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

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

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

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

但是，如果这对您的上下文来说太详细了，我想除了依赖已经提供的有关分析浏览器行为的功能(例如 chrome devTools 或 Mozilla 插件 Firebug)之外，别无选择。毫无疑问，这将越来越多地集成到此类插件/工具中，就像用户 BoltClock 的评论所建议的那样，研究此类插件/工具的功能以最大限度地利用它们总是值得的。