Debug Angular

A few debug tricks learned by the ways.

Screen debug with | json pipe

You can use Augury but some time a simple in screen debug is convenient.

You can do it thanks to the json pipe that transform json objects in string.

my object | json

It is convenient for forms where we want to see the consequence of your actions. And track the form state.

Using html PRE tag allow to display the json with line break.

<div style="margin-top: 20px" *ngIf="f">
    <div>Form details:-</div>
    <pre>Is form valid?: <br>{{f.valid | json}}</pre>
    <pre>Is form submitted?: <br>{{f.submitted | json}}</pre>
    <pre>submitted value: <br>{{f.value | json}}</pre>
</div>

Augury

https://augury.angular.io/

Augury is a more complete debug utility for chrome. It can display the state of variable in each component.

Print json object and paste in a text editor

copy(JSON.stringify(changes.widgetData.currentValue, null, 2))

It copies the result of JSON.stringify with the option to set correct indentation 2.

Access file by filename to add break point

In chrome debugger go to sources tab and type CMD + P (same shortcut that in sublime text) it open a list of files

Debug on mobile

Use the chrome debugger remote device feature with an android