How can I see the line number for CSS style of selected element in Chrome Developer Tools?

css, firebug, google-chrome-devtools

Solution

It's the number at the end of the file name, following the `:` sign.

For example, `layout9.css?nocached4:1` means the property is declared at line `1`. This is typical of minified CSS files, which tend to be a single line.

The difference in the screenshot between Firebug and Chrome Developer Tools could be that Firebug is configured to use CSS source maps, so it is able to show the correct line numbers regardless. Check to see the Chrome Developer Tools has the setting "Enable CSS source maps" checked.

Problem

Using Chrome Developer Tools, I'd like to know what the line number of each CSS style applied to the selected element is. Firebug in Firefox does this and its real handy.

Original source

Related problems