2015-09-03 11 views
6

Informationen auf der Hauptseite für debugging Polymer 0.5 ist ziemlich veraltet und funktioniert nicht für Polymer 1.0.Wie debuggen Sie Polymer-Projekt 1.x?

Ich mag einige Protokolle sehen, also, was ich tue:

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

Innerhalb des Imports:

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

die URL Hit: http://localhost:8080/index.html?debug&log=bind,ready,events.
Und schließlich kann ich keine Protokolle auf der Konsole sehen.

Was ist der richtige Weg zum Debuggen von Polymer 1.0?

Antwort

7

Wenn Sie debuggen Eigenschaften (z Daten Bindung), dann lesen Sie properties guide, und die Verwendung von observers Feld machen. Hier ein Beispiel:

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

Auch nach Polymer verknüpfen Sie tun können:

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

Dieses log wird Elementnamen registriert.