47

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.

Improve this question
4
  • 1
    This is probably not what you're looking for, but I still find it useful to just use console.log(JSON.stringify(this)) sometimes. Commented Feb 6, 2016 at 0:58
  • Thanks @Mark , will check that..do you wanted to put that console in my console in component class? Don't get me wrong, just asking. Commented Feb 6, 2016 at 1:13
  • 1
    Put it in whatever method gives you the visibility you need: in the component's constructor, in ngOnInit(), in ngOnChanges(), in an event handler, etc. Commented Feb 6, 2016 at 2:07
  • I know that i can get component context by console.log(this).. But how can i access component context from browser console. Though I'll try you suggestion. Thanks ;) Commented Feb 6, 2016 at 2:53

5 Answers 5

Reset to default
55

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

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

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

I investigated more and found out the hard way what's mentioned here github.com/angular/angular/issues/3689#issuecomment-181020512 (see also this pending PR github.com/angular/angular/commit/…)
This issue is probably also related github.com/angular/angular/issues/7045
@GünterZöchbauer, it appears your updated Plnkr here isn't working...
Might be worth mentioning the IE way as well. ng.probe(document.getElementById('myComponentId')).componentInstance
@Lonely thanks. I haven't found out where it went. I made it clear in my answer that the link is now dead.
|
34

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');
Improve this answer

4 Comments

Works with 5.2.0 as of today. Might not have been the case in the past though.
Does this work in production? I'm trying to do do ng.prove($0) on angular v7.2.7 app in production and it just returns null
@doublea this does not work in production. For production mode this answer may be useful: stackoverflow.com/a/68113807/23715
In Angular 9+, use ng.getComponent($0); (stackoverflow.com/a/60539678/11991371)
12

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;
}
Improve this answer

2 Comments

what I like about this is that uses the simplest possible way... too bad we have to TS, it would be even simpler
The problem with this solution is that you have to recompile the code. Not very good for debugging in process. Also a component can have more than one instanse on the page.
4

Angular 9+:

Select component root element in developer tools (Inspector), then type in console:

ng.getComponent($0);
Improve this answer

1 Comment

This should be the currently accepted answer. Stackoverflow answers do not age well.
3

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/

Improve this answer

1 Comment

It uses Google Tag Manager, i. e. it spies on you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.