CODEWITHSUNDEEP
google-chrome-devtools
user288926
user288926

Reputation:

Get line number in Elements window of Chrome Developer Tools?

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?

Upvotes: 36

Views: 68933

Answers (8)

geeves
geeves

Reputation: 661

This is not an answer because it goes outside of Dev Tool, but a work around to get the line number for those still looking for an answer.

  1. In Chrome Develop Tools click on Elements.

  2. Right click on the < html > element (it is one of the first lines).

  3. Select "Copy Element".

  4. Paste the copied text into a text editor that can show line numbers.

  5. Adjust the line number by how many lines down the < html > element was. For example: If <! DOCTYPE html > is the first and only line and < html > is on the second line, subtract 1 from the line numbers shown in the text editor.

Suggested use: When JavaScript modifies the DOM, the "Elements" tab provides an accurate representation of the DOM as it currently is.

Upvotes: 0

Iman Mohamadi
Iman Mohamadi

Reputation: 6829

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.

Upvotes: 3

J Bordelon
J Bordelon

Reputation: 71

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.

enter image description here

Upvotes: 7

Hannele
Hannele

Reputation: 9666

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).

Upvotes: 12

ProgramadorNovato
ProgramadorNovato

Reputation: 348

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

Upvotes: 23

pltnkv
pltnkv

Reputation: 1

Try chrome extension Go to line:

Upvotes: -2

user3294022
user3294022

Reputation: 1

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!

Upvotes: -5

Jonathan Schneider
Jonathan Schneider

Reputation: 27727

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.

Upvotes: 15

Related Questions