43

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.

SnareChops
  • 13,175
  • 9
  • 69
  • 91
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • 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. – Mark Rajcok Feb 06 '16 at 00: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. – Pankaj Parkar Feb 06 '16 at 01: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. – Mark Rajcok Feb 06 '16 at 02: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 ;) – Pankaj Parkar Feb 06 '16 at 02:53

5 Answers5

53

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

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 2
    I investigated more and found out the hard way what's mentioned here https://github.com/angular/angular/issues/3689#issuecomment-181020512 (see also this pending PR https://github.com/angular/angular/commit/e1bf3d33f8a1fa05a832b9b7ee1300ef9862fd0b) – Günter Zöchbauer Feb 07 '16 at 14:29
  • 1
    This issue is probably also related https://github.com/angular/angular/issues/7045 – Günter Zöchbauer Feb 13 '16 at 10:49
  • 1
    @GünterZöchbauer, it appears your updated **[Plnkr here](https://plnkr.co/edit/dkSQ9Qu4gHoftYcRAwW8?p=preview)** isn't working... – Chris22 Jan 23 '18 at 18:03
  • @Chris22 thanks for reporting. I recreated the example in StackBlitz – Günter Zöchbauer Jan 29 '18 at 09:09
  • 1
    Might be worth mentioning the IE way as well. `ng.probe(document.getElementById('myComponentId')).componentInstance` – khollenbeck Mar 19 '18 at 18:11
  • 1
    great answer, thank you @GünterZöchbauer! But the link is dead: https://github.com/angular/angular/blob/master/TOOLS_JS.md –  Apr 24 '19 at 14:12
  • 2
    @Lonely thanks. I haven't found out where it went. I made it clear in my answer that the link is now dead. – Günter Zöchbauer Apr 24 '19 at 15:22
  • I'm working with an Angular app and Chrome insists that e.g. `ng.probe($0)` or `ng.probe(document.querySelector("#elementId"))` return `null`. `angular` is completely `undefined`. What am I missing? – Raketenolli Jul 16 '19 at 06:23
  • @Raketenolli I haven't worked with Angular since quite some time and don't know. They might have changed something since I posted this answer. – Günter Zöchbauer Jul 16 '19 at 12:15
  • ng.probe is undefined. This is what worked for me: ng.getComponent(document.getElementsByTagName('TAGNAME')[0]) This gave me access to the public functions on that component. – Skystrider Dec 14 '21 at 17:12
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');
Anoop Isaac
  • 932
  • 12
  • 15
  • 1
    Works with 5.2.0 as of today. Might not have been the case in the past though. – khollenbeck Mar 19 '18 at 18:06
  • 1
    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 Sep 20 '19 at 21:17
  • @doublea this does not work in production. For production mode this answer may be useful: https://stackoverflow.com/a/68113807/23715 – Alex Che Jun 24 '21 at 10:16
  • 2
    In Angular 9+, use `ng.getComponent($0);` (https://stackoverflow.com/a/60539678/11991371) – Roobot Oct 01 '21 at 16:10
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;
}
vusan
  • 5,221
  • 4
  • 46
  • 81
  • 2
    what I like about this is that uses the simplest possible way... too bad we have to TS, it would be even simpler – sites Feb 01 '17 at 15:03
  • 1
    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. – Qwertiy Aug 23 '17 at 12:28
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/

chrismarx
  • 11,488
  • 9
  • 84
  • 97
1

Angular 9+:

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

ng.getComponent($0);
isevcik
  • 553
  • 1
  • 4
  • 15