- 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/
- HTML / CSS
- 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:
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:
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:
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.
Why changes are not reflected in the UI?
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
example demo apps:
By Narain Sagar