Drupal Twig templates – enable debugging

Enable Twig debugging in Drupal such that browser dev tools display Twig template responsibilities and overrides.

One of the first challenging things about Drupal theming is knowing which Twig templates are being used and where, and of course, how to override them. This article will show you how to switch on debugging so that this information is made available in the Browser element inspection tool.

Achieving this requires the completion of three tasks:

1. Edit settings file

Scroll right to the bottom of “/root/sites/default/settings.php” and edit as below by uncommenting three lines.

...

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

...

2. Enable twig debugging

Add the green lines as shown below into “/root/sites/development.services.yml”

...
parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
...

3. Create settings.local file

Copy “example.settings.local.php” from “/root/sites” to “/root/sites/default” and rename it to “settings.local.php”

Result

Now that Twig debugging has been switched on you should see something like this.


Related links

https://www.drupal.org/docs/theming-drupal/twig-in-drupal/debugging-twig-templates

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.