Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Access "angular2" components from developer tools console.

See original GitHub issue

This issue came from this StackOverflow question. As far as I know right now there isn’t any easy way to get angular2 component from native DOM element. For example I have a compiled DOM:

<body>
  <my-app>
    <div>Some content</div>
  <my-app>
</body>

I know that my-app is angular2 component, but I don’t have access to it. And this is cool for production mode: incapsulation, security and so on… But for development mode I think It would be very handy if I could do something like:

console.log(document.querySelector('my-app').component.someComponentProperty)

What do you think, guys?

Issue Analytics

State:
Created 8 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

vasekercommented, Apr 9, 2016

@zoechi enableDebugTools(ComponentRef) makes global.ng = new AngularTools(ref) destroying global.ng.probe I think its good to change target for AngularTools instance to global.ng.tools etc… https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/tools/tools.ts#L19

1reaction

zoechicommented, Feb 7, 2016

I’m still not able to figure out how to make ng.probe() available in the browser console. I get ng.profiler listed but no ng.probe().

Top Results From Across the Web

how to access Angular2 component specific data in console?

Angular 9+:. Select component root element in developer tools (Inspector), then type in console:

Debugging Angular Applications from the Console - | juri.dev

Learn how to access useful information from your Angular components right from your browser's console.

Debugging Made Easy with This New Feature in Angular 9

Getting the Angular component instance · Open the developer console and navigate to the Elements tab view. · Select the element <app-root>, which ......

DevTools Overview - Angular

Angular DevTools is a browser extension that provides debugging and profiling capabilities for ... Access selected component or directive in consolelink.

Inspecting Angular Apps from Browser Console | Damir's Corner

The entry point to inspecting Angular components from browser developer tools is the ng.probe() function. You need to pass it an element ...