ES6 in Chrome - Babel Sourcemaps and Arrow Functions lexical scope

Question

I have a function inside a ES6 class:

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

Babel transpiles this to a different form and it generates a _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-map" this to match the original ES6 code, but instead this points to the outer function scope and i need to use _this if i want to access the arrow function lexical scope, which is completely pointless. If i am using sourcemaps i would expect Chrome dev. tools to preserve the lexical scope of this as in my ES6 code.

Is there a way to make Chrome developer tools work as expected with sourcemaps and arrow functions?

Answer 1

Well,

1. Chromium doesn't utilize the mappings from names currently. https://code.google.com/p/chromium/issues/detail?id=327092

2. this is a special binding, so the way it's transpiled it wouldn't be possible to do that. The only thing I can think of would be transpiling it like this, but I don't know if it's viable:

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