narainsagar
narainsagar
narainsagar.com
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()
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
So, Augury is not just a debugger...
It gives a graphical representation of:
Component Tree:
Router Tree: