Enable Debugging in Twig Templates - Drupal 8

Introduction

Twig is a flexible, fast and secure template framework or modern engine of PHP which is integrated by the Drupal 8. Twig Theme debugging helps the developers in developing new templates and manipulating existing templates effectively.

Enabling the twig debug mode on, the mark up of each twig template getting displayed in the HTML which can be clearly seen by viewing the page source or browser developer tool.

There are two similar options to enable the twig theme debugging.

Option 1

This is the simplest method. Follow the below steps sequentially to enable the twig template debugging by making changes in one file services.yml:

1. Navigate to directory /sites/default.
2. Make a copy of default.services.yml file and rename it to services.yml.
3. Open the services.yml file and locate 'twig.config'.
4. Set debug to true.

   (OPTIONAL: Set auto_reload to true and cache to false)

   PHP

   parameters:
     twig.config:
       debug: true
       auto_reload: true
       cache: false

5. Clear the cache.

Option 2

Opt for this method in case of setting up different configuration as per specific environments. Follow the below steps sequentially to enable the twig template debugging:

1. Navigate to directory /sites.
2. Make a copy of example.settings.local.php file, rename to settings.local.php & place in the directory /sites/default.
3. Open development.services.yml resided in same /sites directory and add code that the entire file will look like (mind indentation):
   PHP

   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

4. Navigate to directory /sites/default.
5. Open settings.php and uncomment the following code:
   PHP

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

6. Clear the cache.

History

• 2^nd October, 2019: Initial version