Carles Alcolea Carles Alcolea - 2 years ago 107
Javascript Question

How to find what code is run by a button/element in Chrome using Developer Tools

I'm using Chrome and my own website.

What I know from the inside:

1) I have a form where people sign up by clicking this orange image-button:

enter image description here

2) I inspect it, and this is all it is:
<img class="formSend" src="images/botoninscribirse2.png">

3) At the top of the source code, there are tons of script sources. Of
course, I know which one the button calls
<script src="js/jquery2.js" type="text/javascript"></script>

4) Within that file, you could find:
$(".formSend").click(function() { ... });
which is what is triggered by the button (to do a fairly complex form validation and submit) and what I want is to be able to find that using chrome dev tools on any website.

Ok, that's what we know. Now, let's pretend to be an outsider:

Listeners tab didn't work for me

So then I tried looking the click event listeners, which seemed like a safe bet to me but... there's no
in there (and I wouldn't really know which file the code is so I'd waste time checking all these...):

enter image description here

$(".formSend").click(function() { ... });
function within
file is not there.

Jesse explains why down in his answer:

"Finally, the reason why your function is not directly bound to the click event handler is because jQuery returns a function that gets bound. jQuery's function in turn goes through some abstraction layers and checks, and somewhere in there, it executes your function."

EDIT: I've collected all the methods this question arose in one answer down below as suggested by some of you.

Answer Source

Here are some solutions:

Solution 1 (works great, just a bit of set up but no third parties)

Framework blackboxing:

enter image description here

  1. Pop open Chrome Developer Tools (F12 or ++i) and go to settings (upper right, or F1)
  2. Right there you'll find a tab on the left called "Blackboxing"
  3. And this is where you put the RegEx pattern of the files you want to avoid passing through. For example: jquery\..*\.js (human translation: jquery.*.js)
  4. If you want to skip files with multiple patterns you can add them using the pipe character like so: jquery\..*\.js|include\.postload\.js. Or just keep adding them with the "Add" button.
  5. Now apply Solution 3 described down bellow.

More about this:

Bonus tip: I use Regex101 to quickly test my rusty regex patterns and find out where I'm wrong with the regex step-by-step debugger. There are others of course.

Solution 2 (works great and easy but you need to install an extension)

Visual Event:

enter image description here

Personal favourite. It works wonderfully, but it's an extension, it's not using Chrome's Developer Tools. Just FYI.

Solution 3 (kind of painful but easy)

  1. Opening Dev Tools -> Sources tab, and on the right find Event Listener Breakpoints:

    enter image description here

  2. Expand Mouse and click on... well, click.

  3. Now click the element (execution should pause) and here starts the game: just start pressing F11 (which is Step in) to go through all code. Sit tight, there can be a ton of jumps.
  4. There will probably be lots of scripts you don't want/need to drag yourself through so combine this with Method 1 described above.

Solution 4 (survival mode)

I'm always left with Ctr + Shift + F (text search across all sources) and searching #envio or whatever the tag/id you think starts the party, reading all findings to try figure out what code could be running, feeling a loser and feeling that there's got to be a safe way of really knowing WHAT is triggered by the button.

But be aware sometimes there's not only an img but tons of divs overlapping, and you can't even know what triggers the code. You probably shouldn't have to use this method.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download