how to access Angular2 component specific data in console?

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.

Solution

update 4.0.0

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

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();