Twig Debug Enable local development settings

Drupal Twig Debug
Hope you already have a Drupal setup on your machine, so when you extend your functionality you may need to work on module and theme part. So you may think it overrides the existing rendering process. So for that, you must know how to override or customize the existing theme of the particular part of Drupal Page.
In Drupal 8 we have a symphony framework theme layer called twig, so before you customize your theme, you must know about twig template. Then you need to enable Devel module which is contributed module available in www.drupal.org. Then only you able to use kint() debug function.
For more info, Twig Debug Enable local development settings, https://www.drupal.org/node/2598914

Enable local development settings

Follow the below guidelines to enable debug in twig,

Go to your sites folder, there you already have a settings.php file along with example.settings.local.php file
1. Copy and rename the sites/example.settings.local.php to sites/default/settings.local.php:
$ cp sites/example.settings.local.php sites/default/settings.local.php
2. Open settings.php file in sites/default and uncomment these lines:
1
2
3
if (file_exists(__DIR__ . '/settings.local.php')) {
include __DIR__ . '/settings.local.php';
}
This will include the local settings file as part of Drupal’s settings file.
3. Open settings.local.php and uncomment (or add) this line to enable the null cache service:
$settings[‘container_yamls’][] = DRUPAL_ROOT . ‘/sites/development.services.yml’;
By default development.services.yml contains the settings to disable Drupal caching:
1
2
3
services:
cache.backend.null:
class: Drupal\Core\Cache\NullBackendFactory
NOTE: Do not create development.services.yml, it exists under /sites
4. In settings.local.php change the following to be TRUE if you want to work with enabled css- and js-aggregation:
1
2
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;
5. Uncomment these lines in settings.local.php to disable the render cache and disable dynamic page cache:
1
2
$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
If you do not want to install test modules and themes, set the following to FALSE:
1
$settings['extension_discovery_scan_tests'] = TRUE;
6. Open development.services.yml in the sites folder and add the following block to disable the twig cache:
1
2
3
4
5
parameters:
twig.config:
  debug: true
  auto_reload: true
  cache: false
NOTE: If the parameter block is already present in the yml file, append the twig.config block to it.
7. Afterwards you have to rebuild the Drupal cache otherwise your website will encounter an unexpected error on page reload. This can be done by with drush:
drush cr
or by visiting the following URL from your Drupal 8 website:
http://yoursite/core/rebuild.php
Now you should be able to develop in Drupal 8 without manual cache rebuilds on a regular basis.
Your final development.services.yml should look as follows (mind the indentation):
# Local development services.
#
# To activate this feature, follow the instructions at the top of the
# ‘example.settings.local.php’ file, which sits next to this file.
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
Then you can use kint() debug function in your file, this way you can use this debug function in Module as well as in your theme layer template also.

Leave a Comment