Locating Template Files with Debugging
To know which template is generating the markup for a particular element, you can use Twig's built in
debug option. This option will render HTML comments alongside your rendered output that include the theme hooks in use, suggested template filenames, as well as denoting the exact Twig file used to render a particular section of your markup.
Enable Twig debugging in
sites/default/services.yml by setting
debug: true under the
twig.config section (disable it on production environment). If you are using Drupal 8 for multisite, you should edit the services.yml file in the sites/currentsite directory for the specific site you are theming. If
services.yml does not yet exist; copy
default.services.yml from the sites/default directory and rename it to
services.ymlFor full instructions on Twig debugging, see Debugging compiled Twig Templates.
After clearing caches, inspect the source of the page; you will see code similar to the below code:
<!-- 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' -->
A few things to point out about this debug output:
- The file name suggestions are in order from most specific to least specific.
- The current file name suggestion in use has an 'x' beside it.
- Along with the
END OUTPUTyou'll find the full path to the template being rendered.
In this case, we see that the markup for a node is wrapped with handy debugging information. Drupal includes the theme hook in use, some possible filename suggestions (template in use denoted with the "x") and the exact location of the template used to render the markup.