Struggling with `__reactFiber$` property React attaches to elements inside its virtual DOM

26 Views Asked by At

So, I'm trying to dig out the line number responsible for a given React element in my rendered page. Assuming that React, in the process of virtualizing the DOM on render, would have metadata associated with the element, I explored that. After some digging, I located a __reactFiber$****** property (where ****** is the session gibberish React tacks on to everything... to make life difficult for QuerySelectors? I assume?). Those look promising...

enter image description here


Additional digging revealed the presence of a _debugSource property, and therein: enter image description here

Hot diggity! fileName, lineNumber, AND columnNumber!? Score!

The only problem being, while fileName is unquestionably accurate, lineNumber and columnNumber both appear to be... wild hallucinations? Either pointing at wholly unrelated locations, or, at times, ones that straight-up don't exist. It's no better if I try and fecth the file, either. I genuinely cannot figure out how offset/adjust the position to get the values to correspond to anything even vaguely like the element definition.

They don't appear to correspond to the page's compiled source, nor to the source in DevTools... it's driving me nuts. Are they doings some kinda transform on it?

Anyone have any experience with this?

0

There are 0 best solutions below