Debugging Twig templates
To find out which template is generating the markup for a specific element, you can use Twig’s built-in debug option. This setting will display HTML comments alongside the rendered output, which includes the theme hooks used, suggested template file names, and identifies the exact Twig file used to render a specific part of your markup.
Enable Twig debugging in sites/default/services.yml by setting debug: true under the twig.config section (make sure to disable it in production). If you're using Drupal 8 in a multisite setup, you should edit the services.yml file in the sites/current_site directory for the specific site you're building. If services.yml doesn’t exist yet, copy the default.services.yml file from sites/default and rename it to services.yml. For detailed Twig debugging instructions, see the guide on Debugging compiled Twig templates.
After clearing the cache, inspect the page source; you’ll see code like the example below:
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'node' -->
<!-- FILE NAME SUGGESTIONS:
* node--view--frontpage--page-1.html.twig
* node--view--frontpage.html.twig
* node--1--teaser.html.twig
* node--1.html.twig
* node--article--teaser.html.twig
* node--article.html.twig
* node--teaser.html.twig
x node.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->
<article data-history-node-id="1" data-quickedit-entity-id="node/1" role="article" class="contextual-region node node--type-article node--promoted node--view-mode-teaser" about="/node/1" typeof="schema:Article" data-quickedit-entity-instance-id="0">
....
</article>
<!-- END OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->
Some key points to note in this debug output:
- The filename suggestions are listed from most specific to least specific.
- The file currently in use is marked with an “x”.
- Alongside BEGIN OUTPUT and END OUTPUT, you’ll find the full path to the rendered template.
Drupal’s online documentation is © 2000-2020 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.