How to enable Twig debugging in Drupal 10?

By duartecancela, 30 August, 2023
Twig debbugging in Drupal 10

Enabling Twig debug in Drupal 10 is a useful way to troubleshoot and customize your theme's templates. When Twig debugging is enabled, Drupal will provide you with information about which template files are being used to render different parts of your site. Here's how you can enable Twig debug mode in Drupal 10:

  1. Enable the Development Services Module (Optional but recommended): 
    Drupal's Development Services module provides various development-related tools, including Twig debugging. You might need to install and enable this module if it's not already enabled. You can do this through the Drupal admin interface by navigating to /admin/modules. 
     
  2. Enable Twig Debugging: 
    Twig debugging is typically enabled by adding specific configuration settings to your settings.php or settings.local.php file. Follow these steps: 

    a. Navigate to your Drupal site's sites folder and locate the appropriate settings.php file. If you have a settings.local.php file for local development, you can use that as well. 

    b. Open the settings.php or settings.local.php file in a text editor. 

    c. Add the following lines of code to enable Twig debugging: 

    // Enable Twig debugging. $config['system.performance']['twig.config']['debug'] = TRUE; $config['system.performance']['twig.config']['auto_reload'] = TRUE; $config['system.performance']['twig.config']['cache'] = FALSE; 

    These settings do the following: 

    "debug": This setting enables Twig debugging, which will display template debug information on the rendered page. 

    "auto_reload": This setting ensures that templates are automatically reloaded when changes are made, allowing you to see your changes without clearing caches. 

    "cache": This setting disables Twig caching, which is helpful during development to see changes immediately. 

    "Clear Cache": After adding the Twig debug configuration, you need to clear the cache to ensure that the changes take effect. You can do this by visiting the "Performance" page in the Drupal admin interface (/admin/config/development/performance) and clicking the "Clear all caches" button. 
     
  3. View Twig Debug Information: 
    Once the Twig debugging is enabled and the cache is cleared, you'll start seeing debug information on your site pages. This information will show you the template files used to render each section of the page, making it easier to customize your theme. 

    Remember that enabling Twig debugging and disabling caching should only be done on development environments. In a production environment, caching and debugging should be managed differently to ensure optimal performance and security. 

    Please note that specific steps might vary slightly based on your Drupal setup and any custom configurations you might have.

Photo by Rubaitul Azad on Unsplash