{{craftSnippets}}
Home Articles Plugins Starter theme Components on Github Gists About
  • Home
  • Articles
  • Debugging and inspecting Twig templates in Craft CMS
Posted on Aug 19, 2019 by Piotr Pogorzelski

Debugging and inspecting Twig templates in Craft CMS

Learn about methods to debug and inspect Twig templates in Craft CMS - how do they differ from each other and which one you should use.
Table of contents:
  • dump() Twig function
  • dd Twig tag
  • Kint plugin
  • Conclusion

Craft offers two methods for inspecting Twig templates - dump() function and dd Twig tag. There is also Kint plugin that offers advanced variable inspection functionality.

dump() Twig function #

dump() function returns values of variables and Twig objects but does it without any formatting. To make sense of data returned by dump(), you need to wrap it in <pre> HTML tag. Most IDEs with Twig support will automatically put pre around dump() if you use code completion.

Here's how values returned by dump() look like without <pre>:

dump() can receive multiple variables as multiple parameters, for example:

    {{dump(variable1, variable2`)}}

If you use dump() without any parameters, it will output all available variables. Doing this however will probably make website hit memory limit.

It is also important to remember that dump() function is available only when dev mode is enabled - using it with devmode disabled will throw an error.

dd Twig tag #

{% dd %} tag was introduced in Craft 3.2. It works whether devmode is enabled or not - which is an advantage over dump().

dd stands for "dump and die". Unlike dump() it does not mix returned values with website HTML - when using dd only debugged values are displayed. This makes it more comfortable to use - with dump(), website CSS can sometimes mess with debugged values and make them hard or impossible to read.

Here's example use of dd:

{% dd variable %}

As you can see, dd tag does not require passing a variable into brackets. Here's how values returned by dd look like:

Kint plugin #

Kint is an interactive debugger for PHP applications. To use it with Craft, you need to install Kint plugin.

Kint offers various methods of debugging:

  • outputting variables into debug toolbar appended to website HTML. In this toolbar, you can browse properties and expand their contents in case of multidimensional arrays or objects - all nicely formatted and interactive.
  • outputting variables into browser console. I like this method best because browser console can be opened in the new window, separate from website contents.
  • dd and dump() equivalents.

Here's how kint debug toolbar looks like:

Conclusion #

So, which debugging method should you use?

dd is vastly superior to dump() - therefore i suggest using dd tag. And if you often need to peek into your template variables, installing Kint might be a good choice.


TAGS:
#twig
If you want to get latest updates on Craft CMS tutorials and components, follow me on Twitter or subscribe to RSS feed.
Articles on blog:
  • Building reactive Craft Commerce product page with Sprig plugin
  • Dynamically generated PDF attachments for Freeform submissions
  • Using template hooks in Craft CMS
  • Alpine JS modal component for Craft CMS
  • Using template UI elements to extend Craft CMS control panel
  • Matrix within a Matrix - possible solutions for Craft CMS
  • Universal email template for Craft CMS
  • Creating attributes table from entry fields in Craft CMS
  • Namespacing forms in Craft CMS
  • Creating map-based navigation for Craft CMS
  • Placeholder image macro for Craft CMS
  • Building AJAX contact form with Craft CMS
  • Using incognito field plugin for Craft CMS
  • Email footer creator made with Craft CMS
  • Infinite scrolling and lazy loading with Craft CMS
  • Using Javascript in Twig templates with Craft CMS
  • Twig templating tips and tricks for Craft CMS
  • Basic SEO functionality for Craft CMS
  • Working with dates in Craft CMS templates
  • Working with SVG images in Craft CMS templates
  • Responsive and lazy-loaded youtube videos with Craft CMS
  • Debugging and inspecting Twig templates in Craft CMS
  • Creating article excerpts with Twig component in Craft CMS
  • Adding favicons to Craft CMS website
  • Truncating text with Twig macros in Craft CMS
  • Universal language switcher for Craft CMS
  • Read time macro for Craft CMS
  • Using attr() function to render HTML attributes in Craft CMS
  • Building dynamic, AJAX based pagination for Craft CMS
  • How to add Disqus comments to Craft CMS website
  • Ellipsis pagination component for Craft CMS
  • Converting email addresses into links using Twig macro
  • Breadcrumb created from URL for Craft CMS
  • Best developer-oriented Craft CMS plugins
  • Search autocomplete component for Craft CMS
  • RSS feed - template component for Craft CMS
  • Testing emails sent by Craft CMS using Mailtrap
  • Quick edit link - Twig component for Craft CMS
  • Filtering entries in control panel using Searchit plugin
  • Fetching routes into Twig templates in Craft CMS


Building reactive Craft Commerce product page with Sprig plugin

Dynamically generated PDF attachments for Freeform submissions

Using template hooks in Craft CMS

Alpine JS modal component for Craft CMS

Using template UI elements to extend Craft CMS control panel

Matrix within a Matrix - possible solutions for Craft CMS

Universal email template for Craft CMS

Creating attributes table from entry fields in Craft CMS

Copyright ©2022 Piotr Pogorzelski