Angular2+ Debugging

narainsagar

narainsagar

narainsagar.com

Pre-requisite's:

• Basic knowledge of Chrome Dev Tools: https://www.codeschool.com/courses/discover-devtools
• Angular2 Basics (i.e., Components, Services, Modules, Directives, etc) - https://angular.io/
• JavaScript / TypeScript
• HTML / CSS

Debugging apps..

• manually inspect via (chrome) browser console
• tools i.e., augury

Enabe / disable debugging

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode

Angular 2 applications have development mode enabled by default.

..To get the selected html DOM element:

> $0

Having the reference of an DOM element, you have the ability to inspect the scope of the component it is located in. You can do this by using ng.probe() and put the DOM element as an argument:

> ng.probe($0)

As you can see ng.probe($0) you can access the scope of the component itself and manipulate its various attributes directly from the console.**. You can go ahead and explore the component's model and change things around in its instance:

> ng.probe($0).componentInstance

> $a.componentInstance

Because you are editing the component programaticaly instead of doing it directly through the DOM, Angular does not detect the change in the model.

However, in Angular 2, each component has its own scope, so you have to apply the changes to the component's scope itself.

> ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges()

... or

> $a._debugInfo._view.changeDetectorRef.detectChanges()

Why changes are not reflected in the UI?

Augury

https://augury.angular.io/

Augury is a Google Chrome Developer Tools extension that allows developers to visualize their Angular2 applications.

It's more than just a tool to find bugs! It's a development aid that provides additional insight into Angular2 application's behaviour at runtime.

Augury is an open source effort started at Rangle.io and is developed using TypeScript and Angular 2.0

Look deeply into your app.

So, Augury is not just a debugger...

It gives a graphical representation of:

• Component Relationships
• Detailed Component Info
• Dependency Heirarchy
• Change Detection Strategy
• Editable Component Properties
• Router Structure

Augury features:

Component Tree:

Router Tree:

DEMO

example demo apps:

• https://github.com/rangle/augury/tree/dev/example-apps
• https://github.com/maximevaly/angular-tour-of-heroes

Useful Resources:

• https://scotch.io/tutorials/debugging-angular-2-apps-with-augury
• https://juristr.com/blog/2016/02/debugging-angular2-console/
• https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications
• https://augury.angular.io/
• https://www.youtube.com/watch?v=b1YV9vJKXEA
• https://www.youtube.com/watch?v=u5uixFNEF3I
• https://www.youtube.com/watch?v=ow66MX3ErU8
• https://www.youtube.com/watch?v=ow66MX3ErU8
• https://github.com/rangle/augury/example-apps

Thank You!