Drupal 8: Enabling/Disabling Theme Debugging

Theme debugging will help on developing our Drupal 8 site. It will suggest the TWIG file that associate for DOM structure to change. This information is appended to a command in HTML that Drupal renders. We can access this information in inspecting the HTML or on developer window. When debugging is enabled the markup of each Twig template is surrounded by HTML comments that, contain theming information, such as template file name suggestions.
To avail this option we need to enable theme to debug as TRUE on the "service.yml" file. The below is the step to enable/disable theme debug.

1. service.yml File:
Check if your Drupal file system has service.yml at SITE_ROOT/sites/default. If not exist copy and rename the "default.services.yml" into "services.yml".

2. Enable/Disable Theme Debug
Edit the service.yml, Find the "twig.config" below that there is the key "debug". We need set it as "true" to enable. By default, it will be "false".

parameters:

  ----
  ----
  twig.config:
    # Not recommended in production environments
    # @default false
    debug: true
    # Twig auto-reload:
  ----
  ----

3. Reset Cache
Once done need to reset the cache by clearing the site performance cache.

After Enabling the theme suggestion will like this Screenshot:

theme_debug.png

Category: