Is there a way to determine what Javascript function is called when you click on an item in a HTML page that has JS binded to the click event (added using jQuery, not the onClick tag attribute) ?
Obviously, the website is not mine and the code is minified.
This is available in all major browsers in the developer tools (usually press F12 to open).
In Chrome, for example, right click on the element, inspect element.
Then expand the 'Event Listeners' tab on the righthand side, find 'click' and expand that. It should give you a list of all potential listeners on the click event, including ones that would catch from bubbling up and a link to the function and its position in the file.
It can admittedly take a bit of hunting. If the code is minified most developer tools can expand it for you (e.g. the 'pretty print' option in webkit browsers like Chrome or tools 'Format javascript' in IE) or use an external tool, e.g. http://jsbeautifier.org/.
Related
I am switching from debugging JS in Firefox to Chrome.
One thing that I am missing is this:
In Firefox I can see in the HTML see "[event]" that there is a custom event handler attached.
I think this preview is very handy.
In chrome I need to explicitly search for the event handler.
Is there a way to enable this feature (see event-handler in the tree) in chrome, too?
The feature you are looking for is available in google chrome dev tools
I have taken, the jobs links in stack overflow page itself, it has a click event handler, to see the event handler, select the Event Listeners tab in the right part(hilighted in Red) there is a possibility that it might be hiddent by >> , click to expand,
If the ancestor checkbox is checked please uncheck this, then you will get the clear view of for which event (e.g click) , on what element (e.g anchor tag), and on right side on which file with line number, click it to navigate there.
Hope this is what you are looking for.
it's available in chrome you can find it in developers option press
(CTRL+SHIFT+I) or F12
and then you will find tab named "Event Listener" in right hand upper corner if developer options is in full screen mode or else you'll find it it lower right corner.
And if you are unable to find that just simply find the >> symbol and click on it and select Event Listeners.
Here is the image for event listeners tab.
I think you can use getEventListners($0) api of chrome which gives the event listners of the particular selected element.
getEventListners($0) where $0 - The selected element in the DOM.
The console drawer can be added to the Elements tab by clicking on Esc key it will toggle the console drawer.Then in the console you can write getEventListners($0) as shown in the image.
As this is my first answer and don't have that much reputation as of now,it is not allowing me to directly add the image to the answer so I am really sorry for that. Please have a look at the image:
Inspecting google from my chrome browser.
I am working on a website that uses masonry. I know that the masonry rebuilds itself when the window width changes and I want to be able to trigger that rebuilding at will, like when one of the elements' height is changed. The problem is I don't see any event listeners related to the window's width that I can copy the code from. Is there a way I can see which events are being triggered at the moment?
In Chrome Developer Tools (press F12 within Chrome), go to the Sources tab.
In the right hand pane, expand > Event Listener Breakpoints and tick the ones you want to break on.
Alternatively, if it is using jQuery event handling, you can install the jQuery Debugger extension for Chrome Devtools, and it gives you a jQuery Events tab in the right hand column on the Elements tab. That shows you what events are bound to using jQuery for the selected element. Try selecting the <html> tag or the <body> tag and see if you can find it there.
One final option is to search in the JS you are using for the string "resize".
I'm trying to find a jQuery code that controls a span element in my template.
For example:
<span class="ccontent"
That class opens a info window when hovered upon.
How can i find the jQuery code that relates to this in my template using Chrome and in what file it resides?
Try using Visual Event 2
Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:
Which elements have events attached to them
The type of events attached to an element
The code that will be run with the event is triggered
The source file and line number for where the attached function was defined (Webkit browsers and Opera only)
In Chrome, right click and select "Inspect Element" to open up your inspector. On a Mac you can use Command + Option + I
After that click Resources tab, then Command + F (again, Mac, not sure about PC). Type ccontent into the search box and you will see the number of references to that class-name. Click through until you see all the places in your code where it's mentioned.
The answer from Matthew Davis will work when you can search through your code for the id (e.g. "#ccontent") in question, but won't work as well when the element is indirectly referred to e.g. by class or by element type.
The Visual Events bookmarklet will also help you, but sometimes it will just list the minified JQuery code for the event that is bound to the element.
When doing a mouseover or something else that results in a change to the DOM or a change to an attribute of the thing you are hovering over, and the first two (easier!) options fail, you can try the following:
Go into the Elements tab of the Chrome Developer tools (CTRL+SHIFT+I).
If you are interested in tracking the attributes changing of an element, right click on it and click "Break On > Attributes modifications":
If you are interested in something changing in the DOM (e.g. a modal appearing), right click on the body of the document, or the relevant container div, and click "Break On > Subtree modifications":
Then do your mouseover or trigger whatever event you are interested in on the element.
The Chrome Debugger should launch, and on the right-hand side is the Call stack:
You can click on the different items in the call stack to see where a call was triggered in the Source tab.
This question already has answers here:
Using Chrome, how to find to which events are bound to an element
(8 answers)
Closed 8 years ago.
I am looking at the Bing Maps site. I am opening up the my places editor and clicking the polyline tool in the drawing toolbar.
I would like to discover what javascript runs when I click on tools in the drawing toolbar.
I have looked at the html and there is no onclick event declared on the element.
I have done text searches on all of the scripts referenced by the page, for the ID of the polyline tool element. This was to try to find javascript that attaches a click event to the element, but I got no matches at all.
There must be some script running when I click on a tool. How do I find out what script is executing when I click the tool divs in the toolbar?
I don't think there is anyway I can set breakpoints if I don't first know what script to set them on. Is there anyway I can trap the javascript that runs to discover what it is, either in IE F12 developer tools or in firebug?
You can have a look at the "Event Listeners" panel in Chrome, it has detailed information about each listener attached to an element.
In Chrome Developer Tools click on the timeline tab, uncheck "Loading" and "Rendering", then click the record button (filled circle). Trigger your event by clicking on the button and then stop recording by clicking the circle again. Find your event in the timeline and expand it by clicking on the arrow beside it. On the left it will tell you which function the event called.
I've used the Profiler in Chrome's debug tools for this purpose before.
Open the site in Chrome, F12 to get the debug tool open. In the tabs at the top of the tool, click Profiles.
Make sure Collect JavaScript CPU Profile is selected, and hit Start, then click on the polyline tool you're curious about, and hit Stop. The profiler should now list out all Javascript calls made while the profiler was active.
Firebug probably has something similar.
To locate a potential event handler for a particular element that has been added dynamically try performing a search in all sources of classnames and ids. Once you've found an event handler you can set a breakpoint and verify.
Google Chrome has a global search that works great.
Open up your debugger and start the profiler. Click on what ever you want. Look at what the profiler and see what was called.
I need to fix code on menu mouse over event in a site that contain a numerous of JavaScript files.
Now my Problem is how to find required JavaScript file in such a huge site which contain that mouse over event code. I want the file where that mouse over event is coded. Hope you understand.
In Google Chrome's "Inspect Element" tool, if you scroll to the very bottom of the right pane (beneath all the CSS) you will find "Event Listeners".
Using this, you can find out where exactly the event listener code is for any element that the event listener is attached to.
I am not sure if Firebug has this same feature, I couldn't find it myself.
Open the Developer Tools in Chrome, open the scripts panel, then press F8 and put your mouse over the element you are interested in.
The mouseover event will fire, but will be paused as if there was a debugger statement in the event handler.
Then step over the functions (over all jQuery functions, yes) until you hit the place where the event is attached to the element.
Another variant is to grep -rl or ack (my favorite) for mouseover or the ID of the element in the directory where your JavaScript files are located.
grep -rl 'mouseover' js/