I am maintaining a web site that does some magic behavior (well, it adds a few characters that are not in the html) to elements tagged:
class="popupover-host"
I can't find this referenced in the css, and so far don't see it referenced in any .js
In the browser, it is pre rendered, and examining the element shows me the fully processed text (e.g. the text that is in the source html PLUS the added characters).
I feel like I need to watch the browser process the html, but have not done this before.
The question boils down to this (I think):
Static html + css can be figured out "by hand" by mapping the "class" tags in the html to the relevant css. We know the browser bolts the two together at render time. Add js to the picture, and it gets... harder to figure out how the final html was created.
And with nested css... it is also hard to figure out.
Question:
So, how do I watch the browser bolt it all together?
For example, if I know the "class" that is being modified, how can I see where the modifications come from? (css and/or js)
Is there a way to either: a) Have the browser tell me the things that have modified the contents of this class, or b) run a "debugger" with a watch on the class in question, to see what the browser applies to the contents of that class?
OK, I found the way to figure out which js is tweaking this element.
These steps are for Chrome on Windows.
First, find the element name. Right click on the rendered html word that is being modified and select Inspect Element.
Look at the DOM and find the class that is specific to this element. In this case it is:
class="popupover-host"
(I then search the whole html source to be sure that this class is specific to only the modified text in question.)
Now, open Developer Tools (F12) and hit Ctrl+Shift+F
Paste: popupover-host
Into the search box and run the search.
In my case, I got three hits:
The js had the modification:
return i.innerHTML = "*" + i.innerHTML
Aha! Now I know why the rendered html includes an * character that is not in the source html nor is it done by the css!