如何在Chrome Developer Tools中查看所选元素的CSS样式的行号？

Question

使用Chrome开发者工具，我想知道应用于所选元素的每种CSS样式的行号是什么。 Firefox中的Firebug可以做到这一点并且非常方便。

Answer 1

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

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

Firebug和Chrome开发者工具之间的屏幕截图差异可能是Firebug配置为使用CSS源地图，因此无论如何都能显示正确的行号。检查Chrome开发者工具是否选中了“启用CSS源地图”设置。

Answer 2

有点晚了，但希望这可以帮助那些偶然发现这个帖子的人。

问题是你的行尾（EOL，\ r \ n）字符以某种方式变成了回车（CR，\ r）字符。因此，大多数代码编辑器和内置的Chrome DevTools代码编辑器显示代码正常（使用正常的EOL），但Chrome DevTools中的样式窗格将CSS文件解析为一行而没有换行符（LF，\ n）字符。

要解决此问题，只需将\ n字符添加到所有孤独的\ r \ n字符。这可以通过大多数代码编辑器使用search＆amp;取代