Post

Twig Debugging Drupal

Use twig debug to see what templates are actively being used by the page you are viewing. This helps front and developers apply CSS classes and HTML markup to required template files.

Twig debug also outputs many suggestions for templates that you could use in regards overriding the default templates.

alt text

The new way to enable twig debug

In Drupal 10 switching on twig development mode is a lot easier as it’s built in to the core admin area.

Just go to /admin/config/development/settings And enable twig debug mode.

The older process - pre drupal 10

Activate settings.local.php

  • go to sites/default/settings.php
  • uncomment and move this code
1
2
3
 if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
   include $app_root . '/' . $site_path . '/settings.local.php';
 }

temporarily change permissions on the default folder

1
sudo chmod 755 default
1
cp sites/example.settings.local sites/default/settings.local.php

this file contains code which enables the /sites/development.services.yml file

1
2
3
4
/**
 * Enable local development services.
 */
$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';

switch on twig debugging

under parameters add the twig.config and debug true.

1
vim sites/development.services.yml
1
2
3
4
5
6
7
8
9
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
1
drush cr

to change settings to original

1
sudo chmod 555 default
This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.