Get line number in Elements window of Chrome Developer Tools?

Question

In Chrome, Tools -> Developer Tools -> Elements tab. There are no line numbers next to the source code. Is there a way to toggle them on?

Answer 1

Try chrome extension Go to line:

Answer 2

Press "F12" or go the Developer Tools. Click on the Sources tab double click the already selected file in the pane to the left. See screenshot of this web page below.

Answer 3

It doesn't have a line number because it's the parsed and corrected version of your HTML code and the line numbers might be very different from what you see in you code editor. The best way to find exactly the same element is to add an ID attribute to the element and then use document.querySelectorAll('#CUSTOM_ID'); If you want to see the unchanged HTML (what browser received from server) just right click on the page and choose view page source.

Answer 4

I don't know if Chrome DevTools has changed since the post, but you can do this now:

Expand the Error by clicking the arrow next to it and then click on the line that says stack(...) and it will expand into the same error message plus the source line where it occurred.

I hope this helps!

Answer 5

Don't know how useful it will be, but you can right click on the html element in the Elements tab, select "Copy as HTML" and paste the results in your favorite text editor. That will give you line numbers for the DOM as it exists at the point where you copy it.

Like the comments point out, this will not correspond to source line numbers.

Answer 6

There is no way to show number line in developer area. You can press CTRL+U in the webpage where you want to see the line on code. Good luck