Chrome 开发者工具,是谁设置了高度/宽度?

17

我发现当我需要找到谁负责设置元素属性值时,我很无助。通常需要一段时间才能确定问题所在。

如果你打开一个页面,发现计算高度为 "500px",但没有人明确设置它,那么有人能分享最佳的解决策略吗?是的,我最终找到了原因,但我希望能够更有条理些。

谢谢


我一直想知道为什么很难找到最后应用的东西...通常我不得不上下滚动很多次,然后通过试错来完成。通常我只是在之前添加新样式而不去处理其他人编写的相互关联的复杂代码。一旦CSS更像JavaScript,这将变得更加困难。 - Muhammad Umer
我也是 :-),穆罕默德。 - Svitlana
渲染引擎正在执行此操作,因此我认为没有快速的方法。可能可以通过编程方式检测到这一点,但我不知道有什么好的工具。我不确定是否有比追踪上层更好的方法。我发现Chrome中的开发工具非常有用,因为您可以悬停并查看每个元素的大小,当大小跳跃时,通常是罪魁祸首(或一个很好的起点)。 - Brian
问题是在 css 中本地化这样做没有确切的科学方法,特别是如果使用了百分比并且 javascript 改变了 DOM 中的任何内容。这就是人们转向使用预处理器语言(如 sass / less)的原因之一,因为它们允许使用 源映射 - marblewraith
很好的建议。会尝试这种方式。谢谢,Brian。 - Svitlana
我使用Stylus,但如何为此任务使用sourcemaps? - Svitlana
1个回答

8

对于 Google Chrome 浏览器

  • 右键单击元素并选择 检查
  • 展开 计算 选项卡并查找有问题的样式
  • 找到所需的属性,然后单击样式定义左侧的小三角形。单击后,它应该展开此元素的此样式受影响的选择器列表

了解更多

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接