/dev tips

🎊   Announcing the new DevTools Pre Launch ModernDevTools.com - A discount, and no subscription fees during this pre-launch period   🎊

(70) Contrast line ratio Drag and drop panels to reorder them (72)

Chrome DevTools: Support for jQuery event listeners, and how to hide ancestor event listeners

7 Sep 2015
Support for jQuery event listeners, and how to hide ancestor event listeners

Canary DevTools has native support for jQuery event listeners. This means you can effectively view event listeners registered on DOM nodes, even they use jQuery.

For example, look at the following code:

$('a').on('click', () => console.log('Clicked'));

If you 'View Event Listeners' on an anchor tag, you correctly see the code you wrote, rather than the jQuery source. Even if you don't use jQuery, this is a useful technique for debugging from the outside in, on other websites using jQuery.

You might also notice the 'Ancestors' checkbox. If you toggle this, event listeners registered on ancestor nodes are shown/hidden.

Warning: This feature is in Chrome Canary.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.