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?
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.
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
If you go to View Page Source, this will show the current line numbers. Either right-click -> View Page Source, or hit Ctrl+U on Windows, or Cmd+Option+U on Mac.
For what it's worth, I needed this because I was getting a javascript error with a line number. The dev tools weren't showing this snippet in the regular source tab, presumably because it was embedded in HTML and I had a compilation error (stupid missing comma).
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.
Try chrome extension Go to line:
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!
来源:https://stackoverflow.com/questions/18257399/get-line-number-in-elements-window-of-chrome-developer-tools