Question

我有点惊讶我无法找到如何做到这一点的解释，因为它似乎是调试的相当元素，但我无法在任何地方找到如何打印对象的属性聚合物。

我正在学习Polymer，我一直在遇到有对象的情况，但我不知道该对象的属性是什么。（例如，我打印到窗口，我得到[对象对象]。我找到了一些关于如何打印对象的键/属性列表的解释（我知道如果我打印这些键的值如何知道它们是什么），但如果我不知道我的数据格式，我不知道如何获取密钥。每个例子都假设你已经知道属性是什么。

我见过推荐添加脚本的解决方案：

getKeys : function(o){
    return Object.keys(o);
}

然后他们推荐这样的东西：

<template is="dom-repeat" items="{{ item in obj | getKeys}}">
    {{item}}
</template>

但我认为它们必须能够解决早期版本的聚合物问题。大部分来自2014-ish，我知道图书馆从那时起已经发生了很大的变化。

这是我接受此代码出错的最接近的事情：

Polymer::Attributes: couldn`t decode Array as JSON

这是推荐此策略的example post。据我所知，我可以深入研究文档并尝试了解应该回复的反应，但我更好奇这种情况的一般策略是什么 - 我多次想检查聚合物是怎样的建模与我的想法相比。

Answer 1

你提到的帖子建议使用post-1.0 Polymer不再可能的方法，它不支持过滤/管道的语法（截至当前版本，1.5.0）。

您可以使用DevTools选择Polymer元素，然后运行console.dir($0)。这适用于以下浏览器（也可能是旧版本）：

Chrome 50
Firefox 45
Safari 9.1
Opera 39

Chrome和Opera按排序顺序显示所有键（甚至是来自HTMLElement的继承键），因此扫描特定于聚合物的属性的长键列表可能会非常繁琐。但是，Firefox和Safari首先列出Polymer特定的键，然后列出继承的键。

Chrome / Opera的一个解决方法是使用此代码段：

((o) => {
  let obj = {};
  Object.keys(o).sort().forEach((x) => {
    obj[x] = o[x];
  });
  console.dir(obj);
})($0);

这里有codepen，用于记录paper-button的属性。您不需要点击按钮。打开浏览器的控制台日志（而不是Codepen控制台），看下面的截图。您可以展开控制台日志中的字段以查看Polymer对象的属性。

Answer 2

我一直在使用的解决方案如下：

在可见页面的某处放置一个按钮。
点击该按钮后，将对象打印到控制台。

<button on-tap="show">Click here to see user</button>
...
show: function() {
  console.log('user', this.user);
},
...

Answer 3

您还可以使用console.dir()，如下所示。

<my-element id="foo"></my-element>
...
bar: function() {
  console.dir( this.$.foo );
}

如何打印Polymer对象的内容（属性）？

3 个答案: