title: `this` is undefined in Dev Tools when using arrow function
body: <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>