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

是否有任何方法可以访问控制台中特定于Angular2的组件特定数据以进行调试

---

与Angular1类似，Angular1能够在控制台中访问其组件值。

更新4.0.0

更新RC.1

在浏览器控制台的左上角（过滤符号）选择

plunkerPreviewTarget

（或在自己的窗口中启动演示应用程序），然后输入例如

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

ng.probe($0);

或IE——感谢克里斯·霍伦贝克（见评论）

备选方案

提示：启用调试工具会覆盖

ng.probe（）

启用调试工具，如：

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

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

使用上面的Plunker示例和控制台中的execute示例：

• ng.profiler.appRef

• ng.profiler.appRef.\u rootComponents[0]。实例

• ng.profiler.appRef.\u rootComponents[0].hostView.internalView

• ng.profiler.appRef.\u rootComponents[0].主机视图.内部视图.视图子项[0].视图子项

我还没有找到一种方法来研究

Bar

指令

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

原创（测试版）

这里是如何做到这一点的摘要（死链接，我还没有找到替代品）

启用调试工具

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

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

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

使用调试工具

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

例如：

ng.profiler.timeChangeDetection();

另见

---

使用全局范围变量。（任何浏览器）

在组件文件的

ngOnInit（）

中

ngOnInit() {
   window['test'] = this;
   
}

现在我们可以访问该组件的实例，包括（在该组件上导入的）服务

如果您想阻止访问

test

进行生产，您可以有条件地授予对

test

的访问权限，如：

constructor(private _configService: ConfigService) {
}
ngOnInit() {
   if(_configService.prod) {
      window['test'] = this;
   }
   
}

此处

\u configService

指所有组件和服务使用的服务实例。
所以变量的设置如下：

export class ConfigService {
   prod = false;
}

---

首先使用chrome“inspect element”选择元素，并在chrome“developer console”中运行下面的方法

ng.probe($0).componentInstance

您还可以使用css选择器，如下所示

ng.probe($$('.image-picker')[0]).componentInstance

如果您经常这样做，为了让它更简单，请创建一个全局快捷方式，如下所示。现在，使用“inspect element”选择组件内的任何DOM元素，并从控制台调用“e（）

window['e'] = () => eval('ng.probe($0).componentInstance');

---

我很惊讶没有人在这里提到预兆，它是一个Chrome插件，让您可以方便地访问组件中的所有信息，也让您更容易直接在控制台中查看这些信息：

---

这可能不是您想要的，但我仍然觉得有时只使用

console.log（JSON.stringify（This））

很有用。谢谢@Mark，我会检查一下。您想把控制台放在组件类的我的控制台中吗？请不要误解我的意思，只是问一下。将它放在任何可以提供您所需可见性的方法中：在组件的构造函数中，在ngOnInit（）中，在ngOnChanges（）中，在事件处理程序中，等等。我知道我可以通过console.log获取组件上下文（这个）。。但是如何从浏览器控制台访问组件上下文呢。不过我会试试你的建议。谢谢；）我做了更多的调查，发现了这里提到的困难之处（另请参见此待决PR）。这个问题可能也与@GünterZöchbauer有关，看来你的更新不起作用……可能也值得一提IE方式

ng.probe（document.getElementById（'myComponentId'））.componentInstance

@谢谢。我还不知道它去了哪里。我在回答中明确表示，链接现在已经死了。我喜欢的是使用最简单的方法。。。遗憾的是，我们必须重新编译，这将是更简单的解决方案的问题是，您必须重新编译代码。不太适合进程中的调试。此外，一个组件在页面上可以有多个实例。从今天起，它可以使用5.2.0。但过去可能不是这样。这在生产中起作用吗？我正在尝试在angular v7.2.7应用程序上进行ng.prove（$0），但它只返回null

window['e'] = () => eval('ng.probe($0).componentInstance');