Polymer 1.x: How to print all the properties of a Polymer element?

Question

How do I print to the console all the properties of an element I have imported into a custom element.

For example, I have a custom element my-el and in that element, I have imported a firebase-document element. I want to know the current state of the model for the firebase-document element by observing the value of all the properties of the firebase-document at a particular point in time.

my-el.html

<firebase-document id="document"
                   app-name="my-app"
                   data="{{data}}">
</firebase-document>
...
foo: function() {
  ...
  var doc = this.$.document;
  // Neither of the following "works" (see below for definition)
  console.log('doc', doc);
  console.log('doc.properties', doc.properties);
}

By works, I mean it does not produce the desired behavior of printing an object to the console. The object being all the properties of the doc object.

Answer 1

You can use console.dir(), but you can also use the %o substitution string in a standard console.log() call:

console.log( 'doc=%o', doc );

The list of substition strings is avaiable on MDN's website.