How do you print the content (attributes) of a Polymer Object?

Question

I'm a bit amazed I haven't been able to find an explanation for how to do this as it seems like it's fairly elemental to debugging, but I can't find anywhere how to print the attributes of an object in Polymer.

I'm learning Polymer and I keep running into situations where I have an object, but I have no idea what the attributes are of the object. (Ex. I print to the window, and I get [object Object]. I've found some explanations for how to print a list of the keys/attributes of an object (I know how to print the values for those keys if I know what they are), but I have no idea how to get the keys if I don't already know the format of my data. Every example presumes you already know what the attributes are.

I've seen solutions recommending adding a script like:

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

And then they recommend something like this:

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

But I think they must work off maybe an earlier version of polymer. Most are from 2014-ish and I know the library has changed a lot since then.

This is the closest thing I get to an error with this code:

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

Here's an example post recommending this strategy. I understand I could dig deeper into the documentation and try to understand what response is supposed to be coming back, but I'm more curious what the general strategy is for this situation - I've multiple times wanted to check to see how polymer was modeling something vs how I thought it was.

Lancastrian

Answer 1

The post you mention recommends a method that is no longer possible with post-1.0 Polymer, which does not support that syntax of filtering/pipes (as of the current release, 1.5.0).

You could use DevTools to select the Polymer element and then run console.dir($0). This works in the following browsers (and maybe older versions):

• Chrome 50
• Firefox 45
• Safari 9.1
• Opera 39

Chrome and Opera display all keys (even inherited ones from HTMLElement) in sorted order, so it can be tedious to scan through the long list of keys for a Polymer-specific property. However, Firefox and Safari list Polymer-specific keys first and then the inherited ones.

One workaround for Chrome/Opera is to use this snippet:

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

Here's a codepen that logs the attributes of a paper-button. You don't need to click the button. Open the browser's console log (not the Codepen console) to see something like the screenshot below. You can expand the fields in the console log to see the attributes of the Polymer object.

Kiser

I tried running your codepen, and the console there showed the string "See browser's console log" but nothing else appeared even when I clicked on the paper button. :-( – Lancastrian

Did you open the browser's console? (not the console in Codepen) – Kiser

I've updated the demo with instructions, and updated the answer to clarify. – Kiser

Answer 2

The solution I have been using is the following:

1. Place a button somewhere on the visible page.
2. When that button is tapped, print the object to the console.

my-element.html

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

Lisettelisha

Answer 3

You can also use console.dir() as follows.

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

Lisettelisha