Theme debug in Drupal 7/8/9

Theme debug provides a way for developers to see what templates are outputting which markup on a page, this allows developers to go and find a template that they want to change. If it is a template in a contrib theme or module, then developers would copy the file into their own theme and alter the template there. After a cache clear, the theme debug should show that the markup is now being output via the new template that you added.

Also output in the theme debug is template naming suggestions, so that developers can ensure they have named therir template correctly, so it meets the required needs.

In this short blog post, we'll cover how to enable theme debug in Drupal 7 and Drupal 8/9.

There is a pitfall in relation to how the theme debug is output, the debug is output in a series of comments in the html. Because of this, the debug can sometimes affect how the html works on the page. So sometimes you have to make your changes to the markup and then disable the theme debug, so that you can see the markup working hopefully as intended.

Enabling theme debug in Drupal 7 is straightforward, there are a couple of ways that you can enable theme debug.

• Using drush

To enable theme debug using drush, run the following command:

drush variable-set theme_debug 1

To disable theme debug using drush, run the following command:

drush variable-set theme_debug 0

• Settings file

In your settings.php or settings.local.php, add the following line to enable theme debug, if you then want to disable theme debug, then simply remove the following line from settings.php or settings.local.php:

$conf['theme_debug'] = TRUE;

Using one of the above methods, theme debug should work as intended.

You enable Twig Debugging in sites/default/services.yml. If the file does not exist then copy the file sites/default/default.services.yml to sites/default/services.yml.

Set the debug variable too true, using the below code. And clear cache.

parameters:
  twig.config:
    debug: true