2

How can I find the code line number of a specific DOM element?

so I have a DOM element in a JS variable and I need a function that will return the code line number and the filename(path)

ciochPep
  • 2,472
  • 4
  • 26
  • 30
  • 2
    Possible duplicate of http://stackoverflow.com/questions/2044642/finding-out-what-line-number-an-element-in-the-dom-occurs-on-in-javascript – Alex Kalicki Aug 21 '12 at 05:16
  • Can you show us some code? Have you considered using `console.log(jsVariable)` or `console.trace()` at the point of the error? – Travis J Aug 21 '12 at 05:27

1 Answers1

0

this is impossible since you can manipulate the dom.

two reasons:

  1. the browser adds dom elements when parsing the dom (like <tbody> cause most people forget about it) browsers also have auto correction of unclosed tags etc. etc. so viewing that it is impossible to define wich dom node is in wich line.
  2. you can add / append / manupulate / delete dom nodes using javascript. the dom is not static. as soon as you do something like: var foo = document.createElement("div"); and append it to the body like: document.body.firstChild.appendChild(foo); the line numbers would logicaly change.

you can also move dom nodes around in the tree like changing the parent of an element etc. you can also create dom nodes without appending them to the tree but you could append them in the later process.

simply said: you cannot figure out in wich line a dom node is unless you have an inspector installed (like rightclick to a node in the visual browser window and select something like "inspect element" in chrome)

every browser does different interpretation of html / dom so its impossible to have the same resulting tree.

the only thing you could do is adding a <script> tag that throws an exception. in most browsers you could then display the current line number through an alert box. (since i think thats "not a good idea" i will not go in details)

GottZ
  • 4,824
  • 1
  • 36
  • 46
  • It's not impossible, it's just not implemented. – Armen Michaeli Feb 08 '18 at 13:06
  • @amn while this answer is from 2012 i still would not agree on this. you say it's not implemented. i say i've read the sourcecode of chromium, v8 and spidermonkey. exceptions are the only way to get access to the engines stack in order to extract filenames and line numbers. everything else is a "hack". like fetching the file and diffing it. (parsing lines, assigning line numbers, …) this requires knowledge of all requested files though. (wich is vastly impossible to know without pre parsing hooks that you cannot place since you cannot break out of the browsers sandbox)… so ye.. i disagree… – GottZ Feb 08 '18 at 14:01
  • besides, there is no usecase to this. wich is why this was never implemented. – GottZ Feb 08 '18 at 14:10
  • A use-case I can imagine is where your application needs to parse an XML which is designed to be typed by a user. When said XML contains an error that the parser would choke on, you'd want to display a friendly message to the user alerting them to the fact, and pointing them in the general vicinity of the error, which is where line numbers come handy. – Armen Michaeli Mar 06 '18 at 13:37
  • the dom is not xml even though you could stringify it to xml. in terms of raw xml i agree. that's pretty parsable but since dynamic object insertion in dom would mess up line counting alot and in addition to that would increase the required memory footprint for managing state quite a bit, you cannot do it. that's also why you don't see line numbers when inline javascript breaks. – GottZ Mar 06 '18 at 17:36
  • in terms of xml being parsed that some user types in.. there are linters for that. nobody needs to reinvent the wheel there for xml debugging in javascript. but again, i agree. in non dom areas this is useful and being done quite alot. – GottZ Mar 06 '18 at 17:39