Template Comments plugin for Craft CMS 3.x

Adds a HTML comment with performance timings to demarcate {% block %}s and each Twig template that is included or extended.

Requirements

This plugin requires Craft CMS 3.0.0 or later.

Installation

To install the plugin, follow these instructions.

  1. Open your terminal and go to your Craft project:

     cd /path/to/project
    
  2. Then tell Composer to load the plugin:

     composer require nystudio107/craft-templatecomments
    
  3. Install the plugin via ./craft install/plugin templatecomments via the CLI, or in the Control Panel, go to Settings → Plugins and click the “Install” button for Template Comments.

You can also install Template Comments via the Plugin Store in the Craft Control Panel.

Template Comments Overview

Template Comments is a debugging tool that wraps your Twig {% block %}s with HTML comments. By default, it does this only when devMode is on.

It also records performance data, so you know how much overhead each {% block %} is adding.

With more complicated "content builder" setups, this can help bring clarity to where the various HTML on your pages is coming from.

This can be especially handy when dealing with OPC (Other People’s Code). It solves this problem.

Configuring Template Comments

All configuration is done via the config.php. For it to work, you’ll need to copy it to your craft/config/ directory, and rename it templatecomments.php

Here’s what the default settings look like:

return [
    /**
     * @var bool Whether comments should be generated for site templates
     */
    'siteTemplateComments' => true,

    /**
     * @var bool Whether comments should be generated for Control Panel templates
     */
    'cpTemplateComments' => false,

    /**
     * @var bool Whether to generate comments only when `devMode` is on
     */
    'onlyCommentsInDevMode' => true,

    /**
     * @var array Don't add comments to template blocks that contain these strings (case-insensitive)
     */
    public $excludeBlocksThatContain = [
        'css',
        'js',
        'javascript',
    ];
];

Using Template Comments

Nothing much to say here; install the plugin, and it "just works" when you view the source of a Twig-rendered page in your web browser. If devMode is off, it doesn’t even install itself, so there should be zero effect in production.

The <<< END <<< comments all include performance data in milliseconds, for example:

<!-- <<< BLOCK END <<< bodyHtml FROM _layouts/generic-page-layout.twig TIME 1.56ms -->

Brought to you by nystudio107