Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to debug Polymer project 1.x?

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?

like image 560
ilyaigpetrov Avatar asked Sep 03 '15 09:09

ilyaigpetrov


2 Answers

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.

like image 148
ilyaigpetrov Avatar answered Nov 15 '22 10:11

ilyaigpetrov


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.

like image 23
edesilets Avatar answered Nov 15 '22 10:11

edesilets