Debug tips & tricks for Angular 2

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></pre>
	<pre>Is form submitted?: <br></pre>
	<pre>submitted value: <br></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.

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

It copy the result of JSON.stringify with the option to set correct identation 2.

Access file by filename to add break point

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

chrome file list debugger

Debug on mobile

Use the chrome debugger remote device feature with an adroid

Written on December 18, 2016