6

When i'm in any website, how can i use Chrome Developer Tools to find out what JS function is called when i click on an element ?

For instance, i'm on a website that has a DIV element. When i click on this DIV, it will do some actions. I want to know what JS function do these actions, so i am able to call this JS function programatically in the console, without need to manually click on the DIV.

Thanks !

delphirules
  • 6,443
  • 17
  • 59
  • 108
  • 1
    Possible duplicate of [How to find what code is run by a button/element in Chrome using Developer Tools](http://stackoverflow.com/questions/23472334/how-to-find-what-code-is-run-by-a-button-element-in-chrome-using-developer-tools) – isherwood Feb 05 '16 at 16:31

1 Answers1

4

All the event listeners for an element are shown in the Event Listeners panel. If you expand the 'click' event section you'll see what scripts are at play.

Once you've found a likely script, expand its object to see function names (except, of course, for anonymous functions) and other properties.

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • This will show me the JS file name. Is there a easier way to know the function called, so i can simply call it from the console ? – delphirules Feb 05 '16 at 16:27
  • Problem is the webpage i'm monitoring is huge and also is the JS file. Is there something like a 'javascript function log', where i can see all functions called ? – delphirules Feb 05 '16 at 16:38
  • In the `Event Listeners` pane, right-click the `handler` property value and choose `Show Function Definition` in the popup menu. – Alexander Pavlov Feb 06 '16 at 17:14