Chrome developer tools can be used to view event handlers/listeners on any element in an html page. This is pretty handy to quickly view event handlers on a site without going into its javascript or html code. Here are the quick steps to achieve this:
- We’ll use the following html code for the purpose of this article:
<!doctype html> <html> <head> <title>Chrome developer tools - view event listeners example</title> </head> <body> <h1>Chrome developer tools - view event listeners example</h1> <a href="" onclick="alert('foo'); return false;">clickme</a> </body> </html>You can see the live example html page at Chrome developer tools – view event listeners example. - First right click on the element you want to see event listeners for. Here we’ll right click on link “clickme”. Then click on inspect element as shown below:
- This will open up chrome developer tools. Make sure element tab is selected.
- In the right panel click on even listeners. Click on click event and then click on node “a”. To view the javascript code, you can mouseover the listenerBody function snippet as shown below:
