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 pletely 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?

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 pletely 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?

• javascript
• google-chrome
• ecmascript-6
• babeljs
• source-maps

• "this points to the outer function" - It's not clear to me what you mean by that. Is the value of this a function? "i need to use _this if i want to access the arrow function scope" - What do _this and this have to do with the scope of a function? – a better oliver Commented Aug 31, 2015 at 17:39

2 Answers 2

Well,

1. Chromium doesn't utilize the mappings from names currently. https://code.google./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));
   

Looking at Babel arrow function transformer, it seems it already implements the bind(this) solution, which makes the debugger display the correct this.

I tested it in my chrome developer tools.