如何在控制台中访问 Angular2 组件特定数据？

有没有办法在控制台中访问 Angular2 特定组件的特定数据以进行调试？

就像 Angular1 能够在控制台中访问其组件值一样。

更新4.0.0

StackBlitz 示例 https://stackblitz.com/edit/angular-dvxctt

更新RC.1

笨蛋的例子 https://plnkr.co/edit/dkSQ9Qu4gHoftYcRAwW8?p=preview在左上角的浏览器控制台（过滤器符号）中选择plunkerPreviewTarget（或在其自己的窗口中启动演示应用程序）然后输入例如

在DOM节点中选择一个组件并在控制台中执行

ng.probe($0);

或者对于 IE - 感谢 Kris Hollenbeck（参见评论）

ng.probe(document.getElementById('myComponentId')).componentInstance

选择

提示：启用调试工具覆盖ng.probe()

启用调试工具，例如：

import {enableDebugTools} from '@angular/platform-browser';

bootstrap(App, []).then(appRef => enableDebugTools(appRef))

使用上面的 Plunker 示例并在控制台中执行例如：

• 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

我还没有找到方法来调查Bar指示。

基于此 API 的 Augury 提供了更好的调试体验

• https://augury.angular.io/ https://augury.angular.io/
• https://www.youtube.com/watch?v=b1YV9vJKXEA https://www.youtube.com/watch?v=b1YV9vJKXEA

原始版（测试版）

以下是如何做到这一点的总结https://github.com/angular/angular/blob/master/TOOLS_JS.md https://github.com/angular/angular/blob/master/TOOLS_JS.md罢工>（死链接，我还没有找到替代品).

启用调试工具

默认情况下，调试工具被禁用。您可以按如下方式启用调试工具：

import {enableDebugTools} from 'angular2/platform/browser';

bootstrap(Application).then((appRef) => {
  enableDebugTools(appRef);
});

使用调试工具

在浏览器中打开开发者控制台（Chrome 中为 Ctrl + Shift + j）。顶级对象称为 ng，其中包含更具体的工具。

Example:

ng.profiler.timeChangeDetection();

也可以看看

• Angular 2：如何从浏览器控制台启用 Angular2 中的调试 https://stackoverflow.com/questions/41765245/angular-2-how-enable-debugging-in-angular2-from-browser-console/41765296?noredirect=1#comment70721927_41765296