CODEWITHSUNDEEP
cssfirebuggoogle-chrome-devtools
jjz
jjz

Reputation: 976

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

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.

screenshot

Upvotes: 3

Views: 5015

Answers (2)

Caspar
Caspar

Reputation: 21

A bit late but hope this helps someone who stumbles on this thread.

The problem is that your End of Line (EOL, \r\n) chars have somehow become just Carriage Return (CR, \r) chars. So most code editors and the build-in Chrome DevTools code editor shows the code normal (with normal EOL) but the Styles pane in Chrome DevTools parses the CSS file as one line without the Line Feed (LF, \n) char.

To fix this issue just add \n chars to all lonely \r chars. This can be done with most code editors using search & replace.

Upvotes: 2

Boaz
Boaz

Reputation: 20220

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.

Chrome Developer Tools - Settings - Enable CSS Source Maps

Upvotes: 4

Related Questions