如何调试CSS代码?

时间:2017-10-31 05:53:29

标签: css css3 debugging

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

2 个答案:

答案 0 :(得分:1)

虽然您无法“调试”CSS,因为它不是脚本语言,您可以使用Chrome DevTools Elements面板来检查元素&查看右侧的“样式”窗格。

这将为您提供有关被覆盖或忽略的样式的见解(投掷线)。

CTRL + SHIFT + I

查找错误&警告使用CSSLint

答案 1 :(得分:0)

调试CSS和HTML代码错误确实破坏了您的应用程序设计。有多种方法可以调试CSS和HTML代码调试。在开发HTML或编写CSS时,您应该考虑调试和注意事项或方法。

  

使用http://csslint.net/检查语法错误。它提供了   漂亮的工具,并突出显示发生错误的行。

     

仔细检查您的跨浏览器兼容性问题。一个网站在Firefox中看起来很漂亮但有时它不会   在那个时候用另一个浏览器看起来不错,你应该好好照顾   CSS的跨浏览器兼容性问题。你应该好又好   CSS框架将阻止生成跨浏览器问题和   验证可能由浏览器支持的HTML标记和CSS属性   正确。

     

浏览器Web开发人员工具允许使用概述HTML和元素   不同的标准,这将允许为HTML编写适当的CSS   元件。

     

使用Chrome开发工具打开或关闭样式表。如果你想知道   你的CSS如何影响特定的页面元素Chrome   DevTools可以轻松切换每个属性。在谷歌浏览器中   在Web浏览器中,只需右键单击并从中选择Inspect Element   上下文菜单。在“元素”面板的右侧,您应该看到一个   名为Styles的选项卡,其中包含一些CSS。这显示了你的CSS   声明正在应用于所选元素,如果你   将鼠标悬停在每个CSS属性上,您可以单独取消选中它们。什么时候   一个属性被划掉,通常意味着它正在存在   在其他地方被覆盖。您可能需要取消选中多个属性   实际上从元素中删除它的地方。

     

在chrome dev工具中使用计算选项卡。它告诉你到底是怎么回事   浏览器正在计算你的风格。在大型项目上工作时   对于解决级联问题,选择器问题至关重要   特异性等等。

     

您可以使用 ctrl + shirt + I 启用chrome dev工具或按 F12 键   它几乎支持所有浏览器。