How to debug a Polymer 1.x project?

Question

Information about the main debugging site for Polymer 0.5 is fairly outdated and does not 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 import:

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

Click on the URL: http://localhost:8080/index.html?debug&log=bind,ready,events .
And finally, I do not see any logs on the console.

What is the correct way to debug Polymer 1.0?

Answer 1

If you are debugging properties (for example, data binding), read the properties guide and use the 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 binding Polymer you can do:

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

Log names will be logged here.

Answer 2

Hope this is what you are looking for console.info();

You can find it at https://www.polymer-project.org/1.0/docs/devguide/events "Perforating Events"

I would apply sample code, but they already do this in the docs.