Create a debug tag

[seangates]

<invoke console.log(someData)/>

This is good, but it could be much better. 😄

Some thoughts on creating a debugger:

• Pretty printing to the browser
• Additional information about the data (object type, length of the data)
• processing time
• the template path in which the debugger it's called
• limiting the debugger to only show in non-prod environments (don't know if this is possible, but ... would be nice)
• etc.

[mlrawlings]

Do you have any specific use cases in mind? Would something like a Marko DevTools chrome extension be better suited for accomplishing your goals?

[patrick-steele-idem]

Would be nice to have a convention for enabling "Marko Debug Mode". For example, via an environment variable:

DEBUG=marko node server.js

In debug mode, we could add extra information to templates. For example, What if we automatically added a data-template-path attribute to the root HTML element(s) of every compiled template?:

<div data-template-path="/my-project/components/foo/index.marko">
    <h1>Foo</h1>
    <div>
        <div data-template-path="/my-project/components/bar/index.marko">
            <h2>Bar</h2>
        </div>
    </div>
</div>

This information could be helpful to developers, but it could also be used to enable more advanced in-browser development tools.

[mlrawlings]

Comments might provide more info if say, bar includes baz:

<!-- Begin: /my-project/components/foo/index.marko -->
<div>
    <h1>Foo</h1>
    <div>
        <!-- Begin: /my-project/components/bar/index.marko -->
            <!-- Begin: /my-project/components/baz/index.marko -->
                <div>
                    <h2>Baz</h2>
                </div>
            <!-- End: /my-project/components/baz/index.marko -->
        <!-- End: /my-project/components/bar/index.marko -->
    </div>
</div>
<!-- End: /my-project/components/foo/index.marko -->

[Hesulan]

I've seen at least a few other major projects add HTML comments like that to their output for various reasons, including debugging. Angular even uses a similar syntax to bind code to the DOM (<!-- ngRepeat: post in posts -->). On the other hand, element attributes might provide some benefits that comments couldn't, especially within the parser/compiler/renderer, as they would be assigned directly to the relevant AST nodes - though the idea of using element attributes (which are usually supposed to affect something) to display debug information (which is never supposed to affect anything) is a bit unnerving.

What about something in-between? Throughout the parsing/compiling/rendering process the debug information could be stored in a property on the relevant AST node - or maybe in a parent node similar to an HtmlComment element, or perhaps even some combination of the two - then eventually rendered as HTML comments like in the example above. Then tools could be written to simply hook into the property/node to extract debug information during the compiling and rendering processes, and there would also be helpful HTML comments in the final output.

Special debugging tags and attributes could also be added, like debug=true to toggle verbose debugging on specific element trees, debug-render-time to track and report how long nodes take to render, and maybe even something like <observe(someData)> to watch an object for changes, just to name a few. If all of this was handled by the special debug property/node, and only when some special flag (like DEBUG=marko or --debug) is detected, I would think this could be implemented without too many side effects. Thoughts?