`this` is undefined in Dev Tools when using arrow function

Question

I'm using arrow functions and I'm debugging with Chrome and Firefox Dev Tool. I am getting, this as undefined, even though the code still works.

For Example: When paused on the following breakpoint, I type this in the console, and it comes out undefined, even though the console.log shows the correct this:

class A {
    f = () => {
        debugger;
        console.log(this);
    };
}
new A().f();

My assumption is, that it has something to do with source-maps.

Here are the tools I use in order to build the my code:

• webpack (devtool: eval)
• babel-loader (es5 preset)
• typescript-loader

Answer 1

The problem is that the chrome debugger believes that the this in the source code refers to the run-time this, but this inside a arrow function in typescript source code is actually transformed to _this, so it's showing you the wrong object.

This is why it's only a problem in the debugger and the code still works fine. When I need to debug something where this is a problem, I just copy it to the console and prepend it with an underscore.