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.

Open up the settings.php file in your preferred code editor and uncomment the following lines (~ lines 767-770):

Uncomment

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

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
```

Locate the following file default/settings.local.php and add:

$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/default/local.services.yml';

Create sites/default/local.services.yml file and add:

# 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

Clear cache and visit your site.

Check an example of the potential output.

<!-- 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.

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

Step 2: Enable Chrome Experimental APIs.

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