Front.id

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.
      parameters:
        http.response.debug_cacheability_headers: true
        twig.config:
          debug: true
          auto_reload: true
          cache: false
      services:
        cache.backend.null:
          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' -->
      <!-- FILE NAME SUGGESTIONS:
         * 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:

https://chrome.google.com/webstore/detail/ppiceaegogijpjodfpiimifhbnaifbnn

Installation

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

• For Drupal 8, see Phil's article here: https://www.chapterthree.com/blog/drupal-8-theming-setting-theme-debugging
• For Drupal 7, see https://www.drupal.org/node/223440.

Usage

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

Source

• https://github.com/arshad/drupal-template-helper