I’ve struggled for ever with modern pages to find out what even listeners are attached to particular html elements. Is that even possible to find out? Say you’re on a webpage, and when you click a button a bunch of JS happens. Except it’s all minifies uglified. But the browser must know what JS will run when clicking that button. How do I make it show me what that code/function is without trawling through the JS code and hunting for a CSS selector or ID?

In Chrome you can get the event listeners for a given element by selecting/highlighting it in the Elements tab, then jumping across to the Console tab, you use:

  getEventListeners($0)

getEventListeners is a Chrome console/devtools only function and $0 is a console placeholder variable for the currently selected element.

It's definitely not the nicest way to find things and you often end up running into the minified/uglified madness when delving deeper, but sometimes it helps do the trick.

At least Firefox makes it easy to show which listeners are on which elements in the Web Developers tools. <old schmuck>The thing that looks like Firebug anyway.</old schmuck>

That you'll be able to actually read the code is another completely different story.

What developer tools doesn't show you the generated html? Are you using a major web browser?

Just seeing the generated HTML is trying to figure out the blueprint of the building by looking at the facade.

Sure there's source map files, but most of the time you'll fine those aren't distributed together with the minified bundles.