How to access the *angular 2* components' data in the browser's console?

Question

I have a DisplayComponent and I'd like to see it's data in the browser's/developer's console. How can I see it?

Example from Angular2 step by step guide:

function DisplayComponent() {
  this.myName = "Alice";
}

How do I see this.myName in the browser's/developer's console?

* Please note that this is a question about Angular 2 and not Angular 1. The suggested solution for AngularJS (Angular 1) doesn't work.

Bloodyminded

I've created the issue for your problem – Anuria

Good blog for debuging angular 2 apps I have found here: pluralsight.com/guides/front-end-javascript/… It pointed me to augury.angular.io which is great tool for ng2 apps development. ;) – Encephalic

Answer 1

Check out this plunker. So basically what you need to do at this moment:

1. Add test_lib.js to the page

2. Add ELEMENT_PROBE_BINDINGS to your app bindings.

   import { bootstrap } from 'angular2/angular2'
   import { ELEMENT_PROBE_BINDINGS} from 'angular2/debug'
   import { App } from './app'
   
   bootstrap(App,ELEMENT_PROBE_BINDINGS )
       .catch(err => console.error(err));
   

3. Use ng.probe method to check the element:

   const app = document.querySelector('my-app');
   const debugElement = ng.probe(app);
   

Anuria

ELEMENT_PROBE_BINDINGS does not exist in new versions of angular2, it was renamed to ELEMENT_PROBE_PROVIDERS and there are only few mentions of this in github source of ng2 lib, it seems that it disappeared completely. And there is no angular2/debug anymore too. Could you actualise your answer please? – Encephalic

So the actual state (tested on angular4) is, that in dev mode (ng serve), you don need to make steps 1. and 2. You can jump right into step 3. Happy coding :) – Encephalic

how can I trigger a change when I update a value from the console? – Leptosome

Answer 2

var componentTag = document.querySelector('.component-tag'); var componentDetails = window.ng.probe(kitchenSink); componentDetails.componentInstance

For more details see https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications#console

Optometrist

Answer 3

Did u try simple console command?

console.log(this.myName)

Hope I understand ur question correctly.

Disgusting

I think he wants to get component from console of developer tools. Something like: document.querySelector('.compnent-selector').component.myName; – Anuria

Right. What do I need to write in the developer's console? – Bloodyminded