Property of class being displayed differently when I print it through a breakpoint or through console.warn

This is quite bizarre. I have an object with a boolean property.
I want to see how it’s doing so I do a console.warn, which gives me the expected result. However, if I put a breakpoint on the console.warn and display the variable through my dev tools console, I get undefined. What is going on?

This is what my code roughly looks like:

export default class {
  constructor () {
    this.myProperty = true
  }

  doStuff () {
    return {
      doSomething: (...args) => {
        console.warn('this.myProperty', this.myProperty) // will display true
        // If I put a breakpoint on the console.warn and print it through my dev tools, it will display undefined.
      }
    }
  }

}

Angular CLI // TypeScript // Chrome Debugging > Arrow function loses context

I’m struggling since a few days with a problem I can’t explain:

  • I have an Angular 4 CLI project running fine
  • I have an arrow function in one of my component’s method that sets a property in my component
  • When I put a breakpoint in Chrome devtools (or VS Code debugger against Chrome, same behavior) in my arrow function, the this context is not binded to the component
  • BUT if I execute the code, it works well

Example code:

export class MyComponent {

  private message = 'Im here!';

  constructor() {
    const test = () => {
      console.log(this.message);
    };

    test();
  }

}

If I put a breakpoint on line with console.log(this.message), the this context will be undefined in the debugger watch, but at execution it will write ‘Im here!’ in my console.

Have you ever experienced this problem before? Is there a problem with my sourcemaps, idk?