Normally you have mapping files which tell your browser which bits correlate to the outputted "compiled" code.

Thus in your browser you see the code you write, you put in breakpoints as desired, and everything generally works.

I don't have much depth as to how it all works behind the scenes though, I'd love to know more.

The feature is called "source maps". Here's an MDN article about it https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_...

Like everyone said it works perfectly well with source maps. You get proper debug errors, break points, etc.

That said, it is another thing you need to maintaining and depending on the number of transformations your code has to go through, you introduce more points where the source map can break.