How to debug Polymer project 1.x?

Question

Information on the main site for debugging Polymer 0.5 is quite obsolete and doesn't work for Polymer 1.0.

I want to see some logs, so what I do:

<script>
  window.Platform = {flags: {debug: true, log: 'bind,ready'}};    
</script>
<script src="/node_modules/webcomponents.js/webcomponents.js" debug></script>
<link rel="import" href="...">

Inside the import:

<link rel="import" href="./bower_components/polymer/polymer.html">
<dom-module id="my-custom-element">...</dom-module>

Hit the url: http://localhost:8080/index.html?debug&log=bind,ready,events.
And finally I can't see any logs on the console.

What is the right way of debugging Polymer 1.0?

Andalusia

Answer 1

If you are debugging properties (e.g. data binding), then read properties guide, and make use of observers field. Here is an example:

Polymer({
  is: 'portfolios-foobar',

  properties: {
    portfolios: {
      type: Array,
      value: [],
      notify: true,
      reflectToAttribute: true,
      observer: 'logChange'
    }
  },
  logChange: function(newValue, oldValue) {
    console.log('Changed! To:', newValue);
  },

  addFolio: function(folio) {
      this.push('portfolios', folio);
    },

  observers: [
     'logFor(portfolios)',
     'hackyObserver1(portfolios.*)',
     'hackyObserver2(portfolios.splices)'
  ],

  logFor: function(newValue, oldValue) {
    console.log('LogFor! To:', newValue);
  },
  hackyObserver1: function(changes) {
    console.log('One!', changes);
  },
  hackyObserver2: function(changeRecord) {
    console.log('Two! Splices!', changeRecord);
  }
});

Also after linking Polymer you can do:

Polymer.log = console.log.bind(console); // Not part of the public API, may be broken.

This will log element names being registered.

Andalusia

Answer 2

I hope this is what your looking for console.info();

You can locate it at https://www.polymer-project.org/1.0/docs/devguide/events "Event retargeting"

I would tack on a code sample but they already do that in the docs.

Furnace