Overslaan en naar de inhoud gaan
info@guusvandewal.nl

Debugging Drupal 8 Twig templates with Xdebug 🐛

Ever wondered what variables live in your Drupal 8 templates and how to debug them properly? 🧐
Enabling twig debugging in sites/default/services.yml is the first step: (note that this is a Drupal 8.4.5 version)

   twig.config: { debug: true, auto_reload: true, cache: false }

Using the Drupal 8 Twig Xdebug Module

Then you could use {{ dump() }} to see all variables that are available but it's very hard to read.
If you have installed Xdebug properly you should use the Twig Xdebug module which is awesome.

You now have an option to see all available twig options in a separate template file that opens when you run Xdebug when using a special tag called {{ breakpoint() }}

  {{ breakpoint() }}
{%
set classes = [
'node',
'teaser-block',
'clearfix',
'module',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
'clearfix',
]
%}

{% set bgColor %}
{{ content.field_background_color }}
{% endset %}

<div class="container">
<div class="row clearfix">
<article class="typography left-aligned">
{% if content.field_full_image %}
<div id="full-image" style="background-color: {{ bgColor|striptags }}">
{{ content.field_full_image }}
</div>
{% endif %}

<div class="col-2-2 centered">
<h1 class="h1">{{ label }}</h1>
{{ content.field_intro }}
{{ content.field_paragrafen }}
{% if content.field_link_live_site|render %}
<a href="{{ content.field_link_live_site }}" class="btn roundend external">Bekijk de live site</a>
{% endif %}
</div>
</article>
</div>
</div>
Drupal8 Twig Xdebug Screenshot

All fields are available from:
$context["content"], just render {{ content.field_name }}, so replace $context["content"] with {{ content }} 

Happy theming! 🤩

Interesse? Neem gerust contact op

Benieuwd wat Guus voor u kan betekenen of gewoon een keertje sparren?
Mail info@guusvandewal.nl of bel 06 48 47 45 71.