Can I debug source code instead of compiled one?

[singno]

Compiled code

[gaearon]

Thanks for filing the issue. We previously had a discussion about this here: #139.

Unfortunately sourcemaps don’t currently work with variable bindings. So if we enabled sourcemaps, you would see React in your code, but it wouldn’t work in console, or in the paused functions. Similarly, you might try to use this inside an arrow function during a debugging session, but Babel would transpile it to _this, and you wouldn’t be able to find it.

I might be wrong but I think having code behave magically different in the debugger section is more confusing than seeing the real output. There are other benefits to seeing the real output too: you understand what code exactly is running, which features exactly get transpiled, breakpoints don’t “fall through” or fail to break, et cetera.

This is why I would rather see more work on making Babel output more readable. Here is an example of such issue: babel/babel#3585.

Let me know if you disagree. I understand it’s a polarizing topic, and different people will have different opinions on this. So far I have found that avoiding surprises is more important than exact sourcemaps, but maybe you can convince me I’m wrong.

[singno]

I agree with you, @gaearon . Thanks for creating such an amazing tool, it really raises our developing efficiency.

[gaearon]

👍

[marcosfede]

Would it be possible to have an easy toggle for this like an option on the package.json instead of modifying the config inside node_modules? perhaps an optional parameter on react-scripts like --sourcemap ? some es6/es7 code transpiled by babel is quite different from the original code so its hard to debug without sourcemaps

[rodislav]

is there another way to debug the js code itself with breakpoints ? // not the transpiled version

[gaearon]

All right, I merged #924 and we'll ship with 0.8.0 with sourcemaps enabled per your feedback.
I'm sure this will introduce some confusion but this seems the way people prefer it.