Exercise: Configure Your Environment for Theme Development for Drupal 8, 9, and 10

Drupal has a few handy settings you can tweak to make developing themes a little more intuitive and a lot more awesome. This includes disabling some of the caching that Drupal does so you don't need to clear the cache as frequently. We'll also turn off CSS and JS aggregation in a settings file (overriding anything set on the Performance configuration form) so you can see your changes to .js and .css files with just a page refresh. Finally, turning on the Twig debug service will give us some additional contextual information about the templates being used when we view the source code of any page on our site. Walk through the exercise steps, and if you get stuck you can watch the video to see how we implemented this.

If you want to try and complete this on your own you'll need to:

• Make changes to your site's settings.php file. Hint: check out the example.settings.local.php file included with core.
• Modify configuration via a services.yml file. Hint: check out the default.services.yml file included with core.

Once this is done, if you view the source of any page on your Drupal site you should see extra HTML comments with helpful information about which template file was used to generate a section of markup.

Example:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'node' -->
<!-- FILE NAME SUGGESTIONS:
   * node--view--frontpage--page-1.html.twig
   * node--view--frontpage.html.twig
   * node--2--teaser.html.twig
   * node--2.html.twig
   * node--page--teaser.html.twig
   * node--page.html.twig
   * node--teaser.html.twig
   x node.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/icecream/templates/node.html.twig' -->

Note: At the end of this exercise, you'll find a video walk-through of the solution.