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?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With