How to get/find the function being called from a DOM element or variable in javascript or jquery

Question

I'm not sure how or if this is something that can be done. I have a page that is being created via a CMS. There are alot of files i.e.: includes, .LESS and .js files. Depending on the template chosen, the css rule sets the aside#socialicons element to "display:none". However, this rule is being overwritten by an inline css style of "display:block" set on the same element on the fly.

I have looked through several files (.css, .less and .js) to try and find how this property is being added on the fly so that I could change it.

In the global.js, a variable is declared and defined as follows:

g = g || {};
g = {
selectors: {
        socialbox: "aside#socialicons",
            ....
} 

Line by line, I went manually looking through all the .js files to find the g.selector.socialbox variable. I was hoping to find the function that is manipulating it. I have not found it yet. I also looked through all the css/less files for the selector aside#socialicons and could only find the css rule setting it to display:none;visibility:hidden;.

Tell me folks, if a function is indeed modifying this element, is there a way in the Developer Tools Console of Chrome or Firebug where I can find what function is being called to add the display:block to the aside#socialicons/g.selector.socialbox element? Can assertions work? If any of these methods can work, would you please let me know how it is done?

Thanks very much.

UPDATE: All js files have been compressed and compiled into one .js file for better performance. The page is using about 10 javascripts and 10 javascript library files. I can view source to see the files being loaded, but because the element has been defined in different files using different names, for example g.selectors.socialbox, or g.socialbox, it's getting confusing trying to follow what variable is the aside#socialicons element. In firebug, I can search for the element and/or the variable in all files, but if the variable has been renamed, I'm getting very lost. All help is welcome. I did not write this code.

Thanks very much.

Answer 1

In the Elements tab of Developer Tools, right-click on the element and select Break on Attribute Modification. Then wait for the breakpoint to hit, and you can check the stack trace to see where it's being modified from.