`this` is undefined in Dev Tools when using arrow function
<p>I'm using arrow functions and I'm debugging with Chrome and Firefox Dev Tool. I am getting, <code>this</code> as undefined, even though the code still works.</p>
<p>For Example: When paused on the following breakpoint, I type <code>this</code> in the console, and it comes out <code>undefined</code>, even though the <code>console.log</code> shows the correct <code>this</code>:</p>
<pre class="lang-js prettyprint-override"><code>class A {
    f = () =&gt; {
        debugger;
        console.log(this);
    };
}
new A().f();
</code></pre>
<p>My assumption is, that it has something to do with source-maps.</p>
<p>Here are the tools I use in order to build the my code:</p>
<ul>
<li>webpack (devtool: eval)</li>
<li>babel-loader (es5 preset)</li>
<li>typescript-loader</li>
</ul>