Yeah this was awesome time and it did teach you more than just the trick, navigating unknown codebases, extracting the meaningful parts of a non trivial piece in f code…

I really think the web community lost something with the transition to compiled uglified js and css…. Sure google will show you to some code if you manage to put what you are looking for into words but that isn’t always easy. Pitty that there is no standardised solution to publish the source along with the Minimized script nowadays.

There is. Source Maps.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/So...

Can’t tell if you’re sarcastic or not, assuming not all comment readers will be aware either way.

Just for the record, source maps are awesome and (unfortunately) typically disabled on production. The original remark was criticism towards this practice.

Very few sites ship source maps to production.

This is the thing I miss the most. View-Source was the source of truth. No JavaScript filling in empty <div>s bullshit, No minifying, no uglifying.

For CSS and HTML it's still easy and even easier to do so by right clicking and selecting "Inspect element" (something we didn't have back then). I often do that to understand how a page is setup and I don't see what's so hard about it it.

For JS it's a different story of course but it was never that easy to begin with since the code that affects an element can be anywhere.

Yes, and I hated who came up with the tableless websites lol

With developer tools, this has only gotten easier.

Except now it just shows

<html> <script src="obfuscated.javscript-pack.chunk-12384123.chunkittychunk-packweb.der.huhwhat?{this?:this-v3.2123-notcompatiblewithv3.2122}.js"> <div id="modern-web-app-goez-here"></div> </html>

Good luck with that!

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.

AKA the web was always a bunch of cargo cult, NIH about the most basic computer programming tasks, etc.