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

问题描述

是否有任何方法可以在控制台中访问 Angular2 特定组件的特定数据，以用于调试目的?

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

就像 Angular1 有能力在控制台中访问它的组件值.

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

推荐答案

update 4.0.0

StackBlitz 示例

更新 RC.1

Plunker 示例 在顶部的浏览器控制台中-left(过滤器符号)选择plunkerPreviewTarget(或在自己的窗口中启动演示应用程序)然后输入例如

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

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

Select a component in the DOM node and execute in the console

ng.probe($0);

或用于 IE - 感谢 Kris Hollenbeck(见评论)

or for IE - thanks to Kris Hollenbeck (see comments)

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

替代方案

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

启用调试工具，例如:

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

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

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

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

我还没有找到调查 Bar 指令的方法.

I haven't found a way yet to investigate the Bar directive.

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

A better debug experience is provided by Augury which builds on this API

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

原始(测试版)

这里总结了如何做到这一点https://github.com/angular/angular/blob/master/TOOLS_JS.md(死链接，我还没有找到替代品).

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

启用调试工具

默认情况下，调试工具是禁用的.您可以按如下方式启用调试工具:

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

使用调试工具

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

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.

示例:

ng.profiler.timeChangeDetection();

另见

• Angular2:如何从浏览器控制台在angular2中启用调试

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