可以调试CSS吗?

时间:2009-05-14 07:54:43

标签: css debugging

我是CSS新手。是否有一个工具可以帮助调试应用于网页的CSS样式。

当页面上的某些元素没有按原样出现时,如何通常调试CSS并解决问题?现在,我必须逐个注释掉CSS声明,以了解样式的显示方式。

9 个答案:

答案 0 :(得分:15)

您在Firefox中使用Firebug,这使得调试变得更加容易。

答案 1 :(得分:15)

通过浏览器:

  • Firefox 有一个名为Firebug的插件模块。它易于安装且功能强大。与Firefox的“Web Developer”结合使用会更好。

  • Internet Explorer 有一个开发人员工具栏,它不如Firebug好,但足以检查IE中仍然有效的内容。此外,还有一个名为IE DOM检查器的工具。还有一个版本的Firebug for IE caled Firebug Lite。

  • Google Chrome 附带类似于Firebug的内置工具。请参阅地址栏右侧下拉菜单中的'tools-> developer'选项。这允许您查看每个元素使用的css规则。它还具有Javascript调试支持。

  • Safari 使用名为Web Inspector的工具。

  • Opera 有一个名为Dragonfly的内置实用程序。

答案 2 :(得分:5)

Opera中内置DragonFly

答案 3 :(得分:3)

您可以使用适用于Firefox的Firebug插件。它对CSS非常有用。 您可以从样式中动态打开和关闭样式和字段。太棒了。

答案 4 :(得分:3)

如果您没有使用Firefox,现在可以获得可以在IE等中使用的Firebug Lite

答案 5 :(得分:2)

Safari’s Web InspectorFirebug for Firefox等Web开发人员工具可以帮助您调试CSS。这些工具可以显示应用于特定元素的规则级联,并允许您更改或禁用特定属性。

答案 6 :(得分:0)

首先使用Firefox开发和测试您的CSS,然后切换到其他浏览器来测试您的代码。这是一种普遍接受的方法恕我直言。 Firebug非常棒,但如果你将它与Web Developer插件结合使用,效果会更好。

有一个很棒的site值得一试,有很多关于CSS和HTML开发的信息。

答案 7 :(得分:0)

当您需要调试IE特定的问题时。我听说人们告诉IE DOM inspector并不是太糟糕。您还可以尝试this post中描述的工具。

答案 8 :(得分:0)

现在,您可以在大多数现代浏览器中使用我新发布的工具!

HTML Box Visualizer - GitHub