Debugging Angular Bindings

435 views Asked by At

I am just starting with angular.js version 2 . (Still using jQuery after all these years :-) ) There is still alot to learn.

One particular thing that bothers me: How do I debug binding problems in the DOM. For example if I bind a click event and make a mistake:

If instead of:

<... (click)="onClick()" ...>

I write:

<... (click)="ThisFunctionCallIsMissspelledAndIsMissingParantheses" ...>

I find that the browser is completely happy to swallow up this syntax error and just ignore the click without printing out any error.

Also, assuming I am not the one that made this mistake (many times I need to debug other peoples' code) I cannot find this binding in the DOM. When I "Inspect Element" in the browser, all that's left in the tag are: "ngcontent_c0" hashes. (The original binding is gone).

So my questions are:

  1. Can I get the browser to spit out an error such as: ThisFunctionCallIsMissspelledAndIsMissingParantheses is undefined
  2. If I am debugging someone else's code, is there some way I can use the browser to get a hint of what is wrong? Can I somehow see in the DOM that ThisFunctionCallIsMissspelledAndIsMissingParantheses is bound to said button? I am working with "ng serve" in debug mode: So I can see the .ts files. However the angular HTML bindings seem to be hashed.
0

There are 0 answers