how to access Angular2 component specific data in console?

by

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

More Related Contents:

  1. Accessing console and devtools of extension’s background.js
  2. What is Debug Channel?
  3. What does status=canceled for a resource mean in Chrome Developer Tools?
  4. Visual Studio debugger – Displaying integer values in Hex
  5. Chrome Development Tool: [VM] file from javascript
  6. gprolog: Getting a stacktrace after an exception
  7. VBA does not accept my method calling and gives Compile error: Syntax error [duplicate]
  8. Is it possible to “decompile” a Windows .exe? Or at least view the Assembly?
  9. Enumerate or list all variables in a program of [your favorite language here] [closed]
  10. How do I enable logging for Spring Security?
  11. Stop and continue execution from debugger possible?
  12. How can I write to the console in PHP?
  13. What is the proper name for doing debugging by adding ‘print’ statements [closed]
  14. Chrome: Uncaught SyntaxError: Unexpected end of input
  15. Drop into interpreter during arbitrary scala code location
  16. Is there a known issue relating to Windows 7 Kernel Symbols?
  17. Pause process to allow time for debugger to attach
  18. console.log.apply not working in IE9
  19. Android Studio IDE: Break on Exception
  20. How can I inspect the file system of a failed `docker build`?
  21. How to programmatically detect debug mode in nodejs?
  22. How do I use PDB files
  23. JSP debugging in IntelliJ IDEA
  24. Visual Studio 2010 “Cannot find or open the PDB file”
  25. How to debug Haskell code?
  26. Visual Studio Code breakpoint appearing in wrong place
  27. How to debug Ansible issues?
  28. Debugging SSIS Script task – Breakpoint is enabled but it does not hit
  29. Watch a variable (memory address) change in Linux kernel, and print stack trace when it changes?
  30. Why :sprint always prints a “_”?

Leave a Comment