CODEWITHSUNDEEP
javascriptjquerycssdebugginggoogle-chrome-devtools
Chris22
Chris22

Reputation: 2043

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

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.

Upvotes: 4

Views: 3522

Answers (4)

Barmar
Barmar

Reputation: 782529

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.

Upvotes: 7

user256430
user256430

Reputation: 3643

Probably the easiest way is to open up Chrome, and from the debug console type: getEventListeners(object). It will show you all of the event listeners attached to that object and what the functions are.

Reference: https://developers.google.com/chrome-developer-tools/docs/commandline-api#geteventlistenersobject

Good Luck

Upvotes: 3

matt
matt

Reputation: 91

If you can't find g.selector.socialbox, try looking for instances of g.selector. It may be because they are looping over every attribute of g.selector, rather than calling g.selector.socialbox directly.

Try setting some breakpoints at various points in global.js. As you step through them it will give you a better idea of where the function call is happening. They can be set via the Script tab in Firefox, or the Sources tab in Chrome.

Upvotes: 2

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

Chris, likely not the best answer, but it hard to answer not knowing the CMS in question.

You could overide in JS, but CSS would be simpler

#divwithinlinestyle { display:block !important; }

Upvotes: 1

Related Questions