Problem
Chrome is my browser of choice, and I have my own website.
1) I have a sign-up form that folks can fill out by clicking on this orange image-button:
2) I examine it, and this is all there is to it: img src=”images/botoninscribirse2.png” class=”formSend”>
3) There are numerous script sources at the top of the source code. Because I coded the button, I know which one it calls: /script>script src=”js/jquery2.js” type=”text/javascript”>script src=”js/jquery2.js” type=”text/javascript”>script src=”js/jquery2.js
4) You’ll find the following in the file: $ (“.formSend”). I want to be able to discover that using chrome dev tools on any website using click(function()…); which is what is triggered by the button (to do a rather extensive form validation and submit), and I want to be able to find that using chrome dev tools on any website.
I was unable to use the Listeners tab. So I looked at the click event listeners, which seemed like a safe choice, but there’s no jquery2.js in there (and I wouldn’t know which file the code is in, so I’d spend time checking all of these…):
My money (“.formSend”). The click(function()…); function in the jquery2.js code is missing.
Jesse explains why:
As some of you recommended, I’ve compiled all of the approaches that worked into one answer down below.
Asked by Neithan Max
Solution #1
Alexander Pavlov’s response comes the closest to what you’re looking for.
Because of the breadth of jQuery’s abstraction and capabilities, several hoops must be leapt through before getting to the body of the event. To demonstrate the effort, I’ve created this jsFiddle.
On this one, you came close.
Chrome Dev Tools will pause the execution of the script and present you with this lovely tangle of minified code:
(Click to enlarge)
The challenge is to keep an eye on the screen and not get too carried away hitting the key.
I don’t have an exact answer or explanation for why jQuery goes through so many layers of abstraction; all I can say is that it’s due of the work it performs to abstract away its usage from the browser that’s running the code.
A jsFiddle with a debug version of jQuery may be found here (i.e., not minified). When you examine the code for the first (non-minified) breakpoint, you’ll notice that it handles a variety of tasks:
// ...snip...
if ( !(eventHandle = elemData.handle) ) {
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply( elem, arguments ) : undefined;
};
}
// ...snip...
Because you may have used the “Step Over” function instead of Step In, I believe you missed it on your first attempt when the “execution pauses and I skip line by line.” The distinctions are explained in this StackOverflow answer.
Finally, because jQuery returns a function that can be bound, your function is not directly connected to the click event handler. jQuery’s function, in turn, runs through some abstraction layers and checks before executing your code somewhere in there.
Answered by Jesse
Solution #2
It works great, requires very little setup, and there are no third parties involved.
According to the documentation for Chrome:
When working in the Sources panel, you may also use the context menu. When viewing a file in the editor, right-click and select Blackbox Script. This will add the file to the Settings panel’s list:
It’s a fantastic tool to have:
You may pause the code when you click somewhere on the website, or when the DOM is changed… and there are a variety of different JS breakpoints to be aware of. To avoid a nightmare, you should use blackboxing here.
In this case, I’d like to know exactly what happens when I press the button.
With Dev Tools enabled, you can use ++F or: to search the whole codebase (all code in all files).
and looking for #envio or whatever tag/class/id you think starts the party, you might find yourself getting someplace faster than you expected.
Be mindful that sometimes there are multiple components layered on top of each other, and you may not know which one triggers the code.
Take a look at Chrome’s debugging guide if you’re not sure what you’re doing.
Answered by Neithan Max
Solution #3
It appears that the phrase “…and I jump line by line…” is incorrect. Do you StepOver or StepIn, and are you certain you won’t miss the important call?
Debugging frameworks, on the other hand, can be onerous for precisely this reason. Enable the “Enable frameworks debugging support” experiment to solve the problem. Happy debugging! 🙂
Answered by Alexander Pavlov
Solution #4
findHandlersJS is a useful tool.
You can discover the handler in the Chrome console by typing:
findEventHandlers(“click”, “img.envio”)
In Chrome’s console, you’ll see the following information:
More information can be found here, and you can try it out on this example site.
Answered by Rui
Solution #5
This solution needs the jQuery’s data method.
$._data() is just accessing jQuery’s data method. jQuery. data could be a more readable alternative ().
This SO response makes an interesting point:
(jQuery. data || jQuery.data)(elem, ‘events’); would be a version agnostic jQuery: (jQuery. data || jQuery.data)(elem, ‘events’);
Answered by apptaro
Post is based on https://stackoverflow.com/questions/23472334/how-to-find-what-code-is-run-by-a-button-or-element-in-chrome-using-developer-to