ES6 in Chrome - Babel Sourcemaps and Arrow Lexical Area Functions

Question

I have a function inside the ES6 class :

 class Test { // Omitted code for brevity loadEvents() { $.get('/api/v1/events', (data) => { this.actions.setEvents(data); }); } } 

Babel translates this into another form and generates the _this variable to control the lexical scope of the arrow function.

 var _this = this; $.get('/api/v1/events', function (data) { _this.actions.setEvents(data); }); 

When I debug the ES6 class using sourcemaps in Chrome and put a breakpoint on the line where I call this.actions.setEvents(data); , I noticed that Chrome does not "re-qualify" this to match the ES6 source code, but instead this points to the scope of the external function, and I need to use _this if I want to access the lexical scope of the arrow function, which is completely pointless. If I use sourcemaps, I would expect Chrome dev. tools to preserve the lexical region of this , as in my ES6 code.

Is there a way to get Chrome developer tools to work as expected using sourcemaps and arrows?

Answer 1

Well,

• Chromium does not currently use mappings from names . https://code.google.com/p/chromium/issues/detail?id=327092

• this is a special binding, so the way it migrated will not succeed. The only thing I can think of is to drag it like this, but I don't know how viable it is:

   $.get('/api/v1/events', function (data) { this.actions.setEvents(data); }.bind(this)); 

Answer 2

Looking at the Functional Transformer of the Babel arrow function , it looks like it is already implementing a bind (this) solution that makes the debugger correct.

I tested it in my Chrome development tools.