Blog → Ultimate quick guide to enable Twig debug and cache refresh for themes in Drupal 8

It was a bit of puzzle how to properly enable Twig debug in Drupal 8 and set up template refresh on every load. I had to go thought quite a few tips to figure it out on #SprintWeekend instead of making patches. There are a few guides but all were yet missing a step.

Oh well, long live good old “Rebuild the theme registry on every page load” in devel module for Drupal 7. I hope that will be solved in easier way for Drupal 8 too soon.

Don’t forget, in Drupal 8 templates are also cached at file system level, not just in database as it was in Drupal 7 (or previous).

So, here we go:

Step 1: you shall have services.yml file in your sites/default(or whatever_your_site _is) folder. Most usually you just want to rename or copy from default.services.yml.

Here you have to set three lines as follows:

twig.config:
# Twig debugging:
debug: true
# Twig auto-reload:
auto_reload: true
# Twig cache:
cache: false

Step 2: uncomment a few lines in your sites/(default or whatever)/settings.php close to bottom to the file:

 if (file_exists(__DIR__ . ‘/settings.local.php’)) {
   include __DIR__ . ‘/settings.local.php’;
 }

Step 3: and that is very important, things can get broken otherwise: clear your cache in Development / Performance (admin/config/development/performance). Kudos to Jeff Burnz for a tip (https://www.drupal.org/node/1903374#comment-10766178). Where would you be without good old Drupal friends!

Step 4: about same way as in Step 1 you have to prepare settings.local.yml where you have to uncomment a couple of lines:

$settings[‘cache’][‘bins’][‘render’] = ‘cache.backend.null’;
$settings[‘cache’][‘bins’][‘dynamic_page_cache’] = ‘cache.backend.null’;

That shall be it. Or clear the cache once again, but from now on Drupal 8 shall refresh all your Twig caches on every load, and you will also see debug and file name suggestions comments in html course, something like:

<!— THEME DEBUG —>
<!— THEME HOOK: ‘node’ —>
<!— FILE NAME SUGGESTIONS:
	* node—view—frontpage—page-1.html.twig
	* node—view—frontpage.html.twig
	* node—25—teaser.html.twig
	* node—25.html.twig
	* node—page—teaser.html.twig
	* node—page.html.twig
	* node—teaser.html.twig
	x node.html.twig
—>
….

Have fun debugging!

But of course you shall not have any of those settings enablebled for production sites. But that is other story.