8

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.

Community
  • 1
  • 1
AlikElzin-kilaka
  • 34,335
  • 35
  • 194
  • 277
  • 3
    I've created [the issue](https://github.com/angular/angular/issues/3689) for your problem – alexpods Aug 18 '15 at 11:15
  • Good blog for debuging angular 2 apps I have found here: https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications It pointed me to augury.angular.io which is great tool for ng2 apps development. ;) – Luckylooke Feb 22 '17 at 08:07

3 Answers3

9

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);
alexpods
  • 47,475
  • 10
  • 100
  • 94
  • 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? – Luckylooke Feb 22 '17 at 07:37
  • 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 :) – Luckylooke Apr 03 '18 at 20:58
  • how can I trigger a change when I update a value from the console? – Sampgun Apr 12 '18 at 09:38
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

mlosev
  • 5,130
  • 1
  • 19
  • 31
-4

Did u try simple console command?

console.log(this.myName)

Hope I understand ur question correctly.

Faisal
  • 81
  • 9