debugging - 如何调试 Polymer 项目 1.x？

Question

debugging Polymer 0.5 的主站点上的信息已经过时并且不适用于 Polymer 1.0。

我想看一些日志，所以我做什么:

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

进口内部:

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

点击网址: http://localhost:8080/index.html?debug&log=bind,ready,events .
最后我在控制台上看不到任何日志。

调试 Polymer 1.0 的正确方法是什么？

Answer 1

如果您正在调试属性(例如数据绑定(bind))，请阅读 properties guide , 并使用 observers field 。这是一个例子:

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);
  }
});

同样在链接 Polymer 之后，您可以执行以下操作:

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

这将记录正在注册的元素名称。