【问题标题】:How can I see the line number for CSS style of selected element in Chrome Developer Tools?如何在 Chrome 开发者工具中查看所选元素的 CSS 样式的行号?
【发布时间】:2013-12-19 07:23:41
【问题描述】:

使用 Chrome 开发人员工具,我想知道应用于所选元素的每个 CSS 样式的行号是多少。 Firefox 中的 Firebug 可以做到这一点,而且非常方便。

【问题讨论】:

标签: css firebug google-chrome-devtools


【解决方案1】:

有点晚了,但希望这对偶然发现此线程的人有所帮助。

问题是您的行尾 (EOL, \r\n) 字符不知何故变成了回车 (CR, \r) 字符。因此,大多数代码编辑器和内置 Chrome DevTools 代码编辑器显示代码正常(具有正常 EOL),但 Chrome DevTools 中的样式窗格将 CSS 文件解析为没有换行符 (LF, \n) 字符的一行。

要解决此问题,只需将 \n 字符添加到所有单独的 \r 字符。这可以通过大多数代码编辑器使用搜索和替换来完成。

【讨论】:

  • (甚至后来,但是:它帮助很大!谢谢!^^)
  • 我发现这个字符问题正在发生,因为我的 Dreamweaver 设置(MAC 上的 CS6)在首选项下是:“首选项/代码类型格式/CR Macintosh/。我将“代码类型格式”更改为“LF(Unix)”并重新打开文件并自动修复它。
【解决方案2】:

它是文件名末尾的数字,跟在: 符号后面。

例如,layout9.css?nocached4:1 表示该属性在1 行声明。这是典型的缩小 CSS 文件,往往是一行。

Firebug 和 Chrome 开发者工具之间的屏幕截图的区别可能在于 Firebug 被配置为使用 CSS 源映射,因此无论如何它都能显示正确的行号。检查 Chrome 开发者工具是否选中了“启用 CSS 源映射”设置。

【讨论】:

  • 截图中页面的 CSS 没有被缩小。 Firebug 显示正确的行号,Chrome 没有。无论如何,谢谢!
  • 显然,Chrome 认为该文件已被缩小。在不同的站点尝试,您会看到数字对应于正确的行。另外,请尝试单击文件名以查看 Chrome 如何解释屏幕截图中的文件。
  • 可能是 Firebug 被配置为使用 CSS 源映射,因此无论如何它都能显示正确的行号。检查 Chrome 开发者工具是否选中了“启用 CSS 源映射”设置。
  • 你是对的——它在其他网站上也能正常工作。 Chrome 必须在这个站点或 css 文件中找到一些有趣的东西。当我单击文件名时,CSS 文件显示为多行,与显示的实际文件完全相同。哦,好吧。
  • CSS 源地图已启用。我尝试禁用它并没有任何区别。
猜你喜欢
  • 2014-12-04
  • 2014-04-18
  • 2019-11-05
  • 2016-08-04
  • 2017-03-09
  • 2012-07-16
  • 1970-01-01
  • 1970-01-01
  • 2011-10-14
相关资源
最近更新 更多