Preventing missing imports

[Aleks Totic]

I've just spent a couple of hours tracking down a layout bug that turned out to be a missing core-header-panel import. I am always nervous about missing imports when coding Polymer. So I wrote a little utility that reports unresolved HTML elements as errors. In case anyone else finds it useful, here is the script:

     function findUnknownElements(el) {

        if (el.constructor == HTMLElement)

          console.error("Found unknown element:", el);

        if (el.shadowRoot) {

          var every = el.shadowRoot.querySelectorAll('*');

          for (var i=0; i<every.length; i++)

            findUnknownElements(every[i]);

        }

      }

      document.addEventListener('polymer-ready', function() {

        var every = document.querySelectorAll('*');

        for (var i=0; i<every.length; i++)

          findUnknownElements(every[i]);

      });

[Eric Bidelman]

Nice! 

I tweaked this a bit to make it more robust. Also create a handy bookmarklet. 

- adjusted to work with multiple-levels of shadow dom

- works with is="" custom elements

- el.constructor == HTMLElement returns false positives for <header> and other elements, so I'm getting everything with document.querySelectorAll('html /deep/ *') instead, then filtered on valid custom element names.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/9b4ed352-5167-4473-9bba-f3ac2b67c7a7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Aleks Totic]

I knew someone would improve it, thanks. I am still finding my way around ShadowDOM APIs.

Another debugging problem I often have is Polymer's silent failure when my html/js is malformed. I suspect an ignored exception/error code somewhere. I'd love to find where, and log the error. What file/function does the import parsing?

Aleks

[Eric Bidelman]

On Thu, Sep 11, 2014 at 9:27 AM, Aleks Totic <ato...@gmail.com> wrote:

I knew someone would improve it, thanks. I am still finding my way around ShadowDOM APIs.

Another debugging problem I often have is Polymer's silent failure when my html/js is malformed. I suspect an ignored exception/error code somewhere. I'd love to find where, and log the error. What file/function does the import parsing?

Here's the HTMLImport parser that the polyfill uses: https://github.com/Polymer/HTMLImports/blob/master/src/Parser.js

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/baaaee56-0a22-4aa8-b12b-25d558f05462%40googlegroups.com.

[Aleks Totic]

I've created an element that checks this, and a few more common errors, and complains to console if it finds something:

https://github.com/atotic/sanity-check

In bower.json:

"sanity-check": "g...@github.com:atotic/sanity-check",

[Rob Dodson]

Very cool! Thanks Aleks :D Anything to ease the pain of debugging is much appreciated!

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/fae6f041-3b61-4e16-b009-6fa90d6a5438%40googlegroups.com.