使用pre标签进行调试 - angularjs / reactjs

Question

我广泛使用pre标签来调整角度js中的代码，如下所示：

<pre>{{vm.names | json}}</pre>

两个问题：

1. 这是如何在幕后工作的？

2. 是否有同等的工具 使用reactjs可以让您在视图中看到变量的值 更常见的console.logs / debuggers？

Answer 1

您的<pre>标记与调试无关 - 它们只是HTML元素。

要分解HTML标记代码段中发生的情况：

• `做一些HTML格式化。
• 双重大括号{{}}表示 数据绑定。 （双向，说实话）。
• vm.names是一个对象 控制器（没有小提琴等，我无法布置其余部分 实例化的方式）
• | json告诉angular过滤vm.names 使用json filter。

看起来React使用DOM和.render函数。看看他们的Getting Started页面。

关于它是如何工作的，你可能想要阅读ng-model及其工作原理，以及Understanding Angular's $apply() and $digest()来了解angularjs模型绑定。

Answer 2

您可以将<pre>{JSON.stringify(this.state.data, null, 4)}</pre>添加到“组件保留”状态，以“可视化”视图中的数据。