如何在控制台中访问Angular2组件的具体数据？ [英] how to access Angular2 component specific data in console?

问题描述

有没有办法在控制台中访问Angular2特定的组件特定数据，用于调试目的？

像Angular1有能力在控制台中访问其组件值。 p>

解决方案

更新RC.1

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

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

  ng.probe（$ 0）; 
  

替代

<提示：启用调试工具覆盖 ng.probe（）

启用调试工具如：

  import {enableDebugTools} from'@ angular / platform-b​​rowser'; 
 
 bootstrap（App，[]）然后（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 指令的方法。

Augury提供了更好的调试体验建立在这个API上

• https://augury.angular.io/


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

原始（测试版）

以下是如何做的总结 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，并在其中包含更多特定工具。

示例：

  ng.profiler.timeChangeDetection（）; 
  

另见

• 角度2：如何在浏览器控制台中使用angular2进行调试

Is there any way to access Angular2 specific component specific data in console, for debugging purpose?

Like Angular1 has capability to access its components value in console.

解决方案

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);

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

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

original (beta)

Here is a summary how to do that https://github.com/angular/angular/blob/master/TOOLS_JS.md

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

• Angular 2: How enable debugging in angular2 from browser console

这篇关于如何在控制台中访问Angular2组件的具体数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！