如何在 Chrome 开发者工具中查看所选元素的 CSS 样式的行号？答案

【问题标题】：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 可以做到这一点，而且非常方便。

【问题讨论】：

Get line number in Elements window of Chrome Developer Tools?的可能重复
你也可以在谷歌浏览器中使用 Firebug lite :) chrome.google.com/webstore/detail/firebug-lite-for-google-c/…
@NathanLee 是的，这个问题很相似，但我真正得到的是 Firebug 显示正确的行号而 Chrome 开发工具没有。
这里我有很多命令wepstech.com/how-to-count-number-of-line-in-project

标签： 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 源地图已启用。我尝试禁用它并没有任何区别。