how to access Angular2 component specific data in console? - debugging

Question

Is there any way to access Angular2 specific component specific data in console, for debugging purpose?
Like Angular1 has capability to access its components value in console.

Answer 1

update 4.0.0
StackBlitz example
update RC.1
Plunker example In the browser console on the top-left (filter symbol) select plunkerPreviewTarget (or launch the demo app in its own window) then enter for example
Select a component in the DOM node and execute in the console
ng.probe($0);
or for IE - thanks to Kris Hollenbeck (see comments)
ng.probe(document.getElementById('myComponentId')).componentInstance
Alternative
Hint: enabling debug tools overrides ng.probe()
Enable debug tools like:
import {enableDebugTools} from '#angular/platform-browser';
bootstrap(App, []).then(appRef => enableDebugTools(appRef))
Use above Plunker example and in the console execute for example:
ng.profiler.appRef
ng.profiler.appRef._rootComponents[0].instance
ng.profiler.appRef._rootComponents[0].hostView.internalView
ng.profiler.appRef._rootComponents[0].hostView.internalView.viewChildren[0].viewChildren
I haven't found a way yet to investigate the Bar directive.
A better debug experience is provided by Augury which builds on this API
https://augury.angular.io/
https://www.youtube.com/watch?v=b1YV9vJKXEA
original (beta)
Here is a summary how to do that https://github.com/angular/angular/blob/master/TOOLS_JS.md (dead link and I haven't found a replacement).
Enabling debug tools
By default the debug tools are disabled. You can enable debug tools as follows:
import {enableDebugTools} from 'angular2/platform/browser';
bootstrap(Application).then((appRef) => {
enableDebugTools(appRef);
});
Using debug tools
In the browser open the developer console (Ctrl + Shift + j in Chrome). The top level object is called ng and contains more specific tools inside it.
Example:
ng.profiler.timeChangeDetection();
See also
Angular 2: How enable debugging in angular2 from browser console

Answer 2

First select the element using chrome 'inspect element' and run below method in chrome 'developer console'.
ng.probe($0).componentInstance
You could also use a css selector as shown below.
ng.probe($$('.image-picker')[0]).componentInstance
If you do it often, to make it little easier, have a global shortcut created as below. Now select any DOM element inside the component using 'inspect element' and invoke 'e()' from console
window['e'] = () => eval('ng.probe($0).componentInstance');

Answer 3

Using global scope variable.(any browser)
In ngOnInit() of component file
ngOnInit() {
window['test'] = this;
}
Now we can access instance of that component including services(imported on that component).
If you want to prevent accessing test for let's say production, you can conditionally give access to test like:
constructor(private _configService: ConfigService) {
}
ngOnInit() {
if(_configService.prod) {
window['test'] = this;
}
}
Here _configService means the instance of service used by all components and services.
So variable would be set like:
export class ConfigService {
prod = false;
}

Answer 4

I'm surprised that no one has mentioned Augury here, it's a Chrome plugin that gives you convenient access to all the information in your components, and also makes it easier to see that information in the console directly:
https://augury.rangle.io/

Answer 5

Angular 9+:
Select component root element in developer tools (Inspector), then type in console:
ng.getComponent($0);