This is mostly a solved problem in regular compilers, and sourcemaps etc do currently exist for JS.

I agree that the tooling/UI around this could be better, but by focusing on this approach, things like Typescript get better as well.

Are there debuggers that can single step over the transpiled bits so that it feels like the methods are implemented natively? Otherwise, it becomes a mess.

I’m not sure if it exists, but it definitely seems doable (a regular debugger has to map instructions to lines of code).

If the browser starts treating JS as assembly, then there would probably be a greater onus for features like this.

That would be nice. Was stepping through some modern react code, and the amount of cruft you see is terrible in the transpiled result.

> sourcemaps etc do currently exist for JS.

Are those being supplied with every website you use?

With the right debugging tools, transpiled alternatives to JavaScript are easier to debug than vanilla ES5.

For example: TypeScript's sourceMap [1], Elm's time-travelling debugger [2], Vue.js DevTools [3], just to name a few I've tried. Especially well-typed languages tend to behave well at run-time once they pass type-checking. Or rather, I have not made enough front-end code to discover transpiler bugs.

[1]: https://www.typescriptlang.org/tsconfig/#sourceMap [2]: https://elm-lang.org/news/time-travel-made-easy (2014 [3]: https://devtools.vuejs.org/

> transpiled alternatives to JavaScript are easier to debug than vanilla ES5

As easy, certainly. But how are they easier?

Because debugging better languages affords you more context and more tooling.

Elm's debugger lets you step forwards and backwards in the application's state.

TypeScript's type system lets you catch bugs before you run the code.

Vue.js's DevTools extend the browser's with a component-based overview, so you can interactively see what's going on at a high level of abstraction. (I'm sure something similar exists for most frameworks similar to Vue.js, and possibly even frameworks made in vanilla ES5, I'm just picking one I've tried.)

With vanilla ES5 you get interactive debugging.

> With the right debugging tools, transpiled alternatives to JavaScript are easier to debug than vanilla ES5.

So if I agree with GP then I just haven't found the right tooling yet?

I started with your position (vanilla js 4ever!) and after being dragged into the world of transpilation via typescript/eslint/prettier/webpack/babel/etc I do agree that it’s at least as easy. Not sure about “easier” but my debugging needs are not exotic. The painful part is initially setting up the toolchain.

If you're happy writing ES5, power to you.