Locating Template Files with Debugging

Last updated on
31 December 2016

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' -->
   * 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">

<!-- END OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->

A few things to point out about this debug output:

  1. The file name suggestions are in order from most specific to least specific.
  2. The current file name suggestion in use has an 'x' beside it.
  3. Along with the BEGIN OUTPUT and END OUTPUT you'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.