Domplate debug logging
September 7, 2008
Posted in Domplate, JavaScript

I have been working on trying to understand the magic behind domplate, the template system that is shipped with Firebug. Apparently nobody knows much about it and there is no documentation.

As part of my domplate project that is aimed at making the template system available for general use in the browser (and yes there will be documentation) I have begun by adding some debug logging capabilities.

I find logging more useful for understanding intircate and highly nested code as opposed to interactive debugging as you can see the entire execution path on one page. Turns out that firebug is ideally suited for this task thanks to its logging console that supports nested groups.

If you work with domplate you will want to try out this modified version with the added logging capabilities. There is no logging levels yet and it spits out A LOT of information so it can be a bit slow but it will give you a great overview of what happens behind the scenes including the generated dynamic code.

To use it simply enable DomplateDebug logging and make sure your Firebug console is enabled:

DomplateDebug.enabled = true;

There is a page with a simple demo here. You will need to download it. At the moment domplate only works on Firefox.

While I was building the logging system I was on the hunt for a problem reported by Nathan. (The demo page above is a slightly modified version of his testing code that showed the problem). The logger allowed me to narrow it down and solve it.

It turns out to be so trivial, yet it was so hard to track down and figure out. Are you ready?

When you define tables in your templates you must include a TBODY tag!

TABLE({border:1},
  TBODY(
    TR(
      TH({colspan:2},'array')
    ),
    FOR('x','$value',
      TR(
        TD('$x.name'),
        TD(
          TAG('$x.val|format',{value:'$x.val|parseParts'})
        )
      )
    )
  )
)

Now don’t feel too bad if you have made this mistake yourself. The tbody tag after all is optional when coding websites, but evidently it is NOT optional in domplate.

Stay tuned for more domplate magic on my blog.

1 Comment
September 8, 2008

Thanks for the help in tracking this down Christoph. I’ll definitely be watching your blog for more on the magic that is domplate.

Comments are closed.
Linkbacks