Is debugging TypeScript worse then JavaScript?

That's not a "TypeScript" problem. That's a "JS being transpiled and bundled" problem (of which TS is just one possible example of "transpiling").

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.

You should be debugging with a live hot reload server like Vite. Then you get your full source code available in the console.

VS Code is an excellent IDE and debugger (with breakpoints, if you like) for TS.

You're doing something wrong. You should be able to debug using source maps.

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

If it doesn't, you've might not have the include source map option turned off on your transpiler/minifier.

Note that it's often turned off by default for production builds, for obvious reasons.

In browser, source maps and built-in debugger work well enough. In node.js you can target es2022 and set pretty: true in tsc, compiled code will be close enough to source code.

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.

Going one level deeper into an abstraction probably almost always involves a greater possibility for bugs that are harder to figure out because you're working on top of more than 1 system that can have bugs or unexpected behavior.

A Big no I guess!