Drupal Template Helper
23/10/2018 by keopx
Drupal Template Helper: A Chrome DevTools extension for Drupal 8, Drupal 7 and Backdrop CMS templates


Drupal Template Helper is a dev tool to works with a Drupal templates on Chrome/Chromium browser.

Enable Drupal theme debugging and other local/dev settings

Drupal as debug mode for show comments with different twig template.

  1. Open up the settings.php file in your preferred code editor and uncomment the following lines (~ lines 767-770):
    1. Uncomment
    2. if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
        include $app_root . '/' . $site_path . '/settings.local.php';
  2. Copy the file sites/example.settings.local.php to sites/default/settings.local.php using the following terminal command, or through your display:
    1. $ cp sites/example.settings.local.php sites/default/settings.local.php
  3. Locate the following file default/settings.local.php and add:

    1. $settings['container_yamls'][] = DRUPAL_ROOT . '/sites/default/local.services.yml';
  4. Create sites/default/local.services.yml file and add:

    1. # Local development services.
        http.response.debug_cacheability_headers: true
          debug: true
          auto_reload: true
          cache: false
          class: Drupal\Core\Cache\NullBackendFactory


  5. Clear cache and visit your site.

  6. Check an example of the potential output.

    1. <!-- THEME DEBUG -->
      <!-- THEME HOOK: 'node' -->
         * node--article--teaser.html.twig
         * node--article.html.twig
         * node--teaser.html.twig
         x node.html.twig
      <!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->


Drupal Template Helper

A Chrome DevTools extension for Drupal 8, Drupal 7 and Backdrop CMS templates:




Step 1: Install and configure.

  1. Download and install the Drupal Template Helper extension for Chrome.
  2. Click on the extension icon.
  3. Click on Options under Drupal Template Helper.
  4. Add the urls for sites to enable the extension. Example: http://drupal.dev, http://www.drupal.dev.
  5. Save.

Step 2: Enable Chrome Experimental APIs.

  1. Go to chrome://flags/#enable-devtools-experiments, find Experimental Extension APIs and Developer Tools experiments, click the "Enable" links, and restart Chrome.
  2. Open DevTools and click on Settings.
  3. Find the Experiments tab and enable Allow custom UI themes. See screenshot below. Don't forget to restart Chrome again.


Note: If you want to hide the Twig comments, uncheck Show HTML comments under Preferences.


Step 3: Enable theme debug


Inspect an element using DevTools and click on Templates in the DevTools sidebar.


Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.