Drupal 8 Development: 5 Things to Add to Your Theming Toolbox

May 8, 2016

My uncle used to say, "You have to use the right tool for the job." This is no different when it comes to Drupal 8 theming and development. I have been having an absolute ball learning and theming with Drupal 8 the past several months. You can read more about how I got inspired here. In this article, I will outline some of the tools and methods I have been using while I've been building a new Drupal 8 theme.

1. Twig Debugging

One of my primary tools for Drupal 8 theming is Twig debugging so you'll definitely want to enable this while building out a theme and site. Chapter Three wrote a great post on enabling Twig debugging so I won't rehash that here how to get it up and running.

Twig's debug output will really come in handy for printing out:

Theme hook names
All possible suggested template names
Existing templates being used
The full path of the current template in use

{.styled-list}

After you write your own theme hook, those new template names will also show up in the debug output.

<div class="postscript">
  <!-- THEME DEBUG -->
  <!-- THEME HOOK: 'region' -->
  <!-- FILE NAME SUGGESTIONS:
   * region--postscript.html.twig
   * region--postscript-second.html.twig
   x region.html.twig
-->
  <!-- BEGIN OUTPUT from 'themes/custom/hibiscus/templates/layout/region.html.twig' -->
</div>

Sample output from Twig debugging

2. Devel Kint

Kint, part of the Devel module for Drupal 8 is awesome for inspecting arrays that contain your entity info, field names, view modes, and more. Kint is similar to Devel Krumo but for Drupal 8. If you really want to dig in with theming, Kint will be invaluable, especially for writing custom preprocess functions, creating variables, and theme hooks.

3. Search Kint

Search Kint for Drupal 8 is similar to Search Krumo for Drupal 7. It extends Kint by giving you two additional functions that are huge time savers. The first is a search box and select list to search any arrays on the page. The second function is a "get path" box where you can easily copy an array path. This takes the guess work out of things, especially since Kint provides much more info than what we were used to in Krumo.

4. Drupal Console

Drupal Console is fast becoming one of my new favorites. This is an amazing tool which can perform dozens of Drupal 8 tasks efficiently in Terminal. I'm just getting started with Console but I really like it already. Console can import / export config, clear cache, generate module / theme scaffolding, generate entities, create nodes, and much more. There's even has a "learning" mode as well as some auto-complete functionality. So it does a lot of what Drush does but it goes beyond with much needed and added functionality. At this point, I am pretty sure I will be switching over to using Drupal Console instead of Drush.

module
module:debug Display current modules available for application
module:download Download module or modules in application
module:install Install module or modules in the application
module:uninstall Uninstall module or modules in the application

Just a few sample commands available out of dozens in Drupal Console

5. Drupal Template Helper

There is also now a Google Chrome plugin called Drupal Template Helper which moves all the your Twig debug output to a Chrome web inspector tab. This makes your main HTML inspection area a lot cleaner and easier to scroll through. I even got this extension running in Opera which has been my browser of choice lately for web development. Note, I've been using Opera for theming for a few reasons. It's built upon Webkit so it's the same familiar Web Inspector UI as Chrome that you're used to. Opera also seems faster, less buggy, and less bloated than Chrome.

Sample output from Drupal Template Helper

Summary

This is just a basic rundown of my Drupal 8 Toolbox. I am sure I will pick up more tools as time goes by. Do you have any favorite tools I have not mentioned here?

```