Debugging with chrome with es6

Question

I am trying to use Ecmascript 2015 for my project and I am finding it hard to add breakpoints at specific places (places I thought was logical to have a breakpoint).

I have #enable-javascript-harmony flag in chrome set to true (if that helps), but I am using babeljs to transpile and have sourcemaps to directly set breakpoints in the file that I want to debug. I am most certain that I am doing something wrong but can somebody point me where I am making mistake.

For reference I have added a GIF of what I am talking about.

Answer 1

The problem is with source code (via source maps) to real code mapping. While the source is concise and dense, the generated code is typically longer and the mapping between the two isn't (and probably cannot be) done in a way which will guarantee a 1:1 relationship between the two.

So when you try to place a breakpoint in a single line statement such as (foo) => bar, the actual executed code is at least a few lines long and I assume (and don't really know!) that devtools tries to place the real breakpoint simply on the first line of the real, running code. - Which in turn fails for expressions.

It is an inherent disadvantage of generated code and applies to all compile-to-js languages with source maps. Unfortunately, I'm not aware of a good workaround. As a last resort in these cases I just turn off source maps in the browser and step through the real, generated code.

Hope that helps :/