I also have no idea if it is even possible to setup a debugger, so I'm bothering with console.log ....
JS debuggers (browsers, VS Code, etc) normally use sourcemaps to show you what the original source looked like so you can debug that.
Also, I'll put in a plug for my day job, Replay ( https://replay.io ). Our app is meant to help simplify debugging scenarios by making it easy to record, reproduce and investigate your code.
The basic idea of Replay: Use our special browser to make a recording of your app, load the recording in our debugger, and you can pause at any point in the recording. In fact, you can add print statements to any line of code, and it will show you what it would have printed every time that line of code ran!
From there, you can jump to any of those print statement hits, and do typical step debugging and inspection of variables. So, it's the best of both worlds - you can use print statements and step debugging, together, at any point in time in the recording.
See https://replay.io/record-bugs for the getting started steps to use Replay.
Note that Replay also works best when you have sourcemaps, same as the other debugger tools.
I don’t know if that’s your teams inspiration but there’s a a lot of overlap.
VS Code is an excellent IDE and debugger (with breakpoints, if you like) for TS.
If you're doing front-end code this should just work in Chrome, you should see your typescript code. There's an extra node in the sources tree view that'll beall the mapped code instead of the minified stuff. There's a few quirks in setting breakpoints in that sometimes it won't let you set one on a particular line, but otherwise you can step through code.
Check your compiled output for .map files and that you're serving them to the browser.
https://developer.chrome.com/docs/devtools/javascript/source...
You actually have to turn it off for it not work out-the-box.
Looks.like.it should work fine in Node as well:
https://nodejs.medium.com/source-maps-in-node-js-482872b5611...
Check your minified file has something like this at the end:
//# sourceMappingURL=test.js.map
Note that it's often turned off by default for production builds, for obvious reasons.
For me, debugging is about creating a mental model on how code is should work in my head and cross-checking that in source. In some cases, two well-placed console.logs are all what you need.