Debugging Drupal 8/9/10 Twig templates with Xdebug

28 February 2023

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

yaml

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

Using the Drupal 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() }}

This file is called BreakpointExtension.php ... see screenshot.

twig

{{ 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 %}

{% if content.field_full_image %}
  {{ content.field_full_image }}
{% endif %}

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

Happy theming! 🤩