Developer Tools & Debugging

Requirement: Working Drupal site which has already been installed via a local instance or on a server.

Add a settings.local.php for your environment specific settings

It’s always a good idea to have a config file specific to your currently active environment (e.g. stagging, dev and live server). Drupal already preps that in your web/sites/default/settings.php with the following lines:

# if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
#   include $app_root . '/' . $site_path . '/settings.local.php';
# }

You only have to uncomment these 3 lines of code and create a web/sites/default/settings.local.php

In there you can add your environment specific settings like the database array already present in your settings.php or the ones I will explain further in this post:

Exclude settings.local.php from GIT

Please check your .gitignore so the settings.local.php doesn’t get commited into GIT.

Disable render caching and CSS/JS aggregation

Drupal has the following “caching” system:

Source: https://drupalize.me/tutorial/render-api-overview?p=2766

To disable this render cache and the automatic CSS/JS aggregation add this to you settings.local.php

$settings['cache']['bins']['render'] = 'cache.backend.null';
$config['system.performance']['css']['preprocess'] = false;
$config['system.performance']['js']['preprocess'] = false;

Personal experience

I have experienced some weird caching issues if your not logged in. Even though I was sure i had correctly regenerated my CSS & JS and force refreshed my browser cache I still got old styling.

The solution: Log in

Twig Debugging

Twig has its own “config file” in which you can tweak how Twig is handling your template files. This file is located in web/sites/default/services.yml

services.yml not present?

If the services.yml is not present just copy the default.services.yml and rename it into services.yml

After that you should perform a drush cr!

In this services.yml you should adjust the following values to have a better Twig experience:

parameters:
  # --- Some comments ---
  twig.config:
    # --- Some comments ---
    debug: true
    # --- Some comments ---
    auto_reload: true
    # --- Some comments ---
    cache: false

With that you should see HTML comments in the frontend showing you several information about which template Drupal used to generate this DOM, how you can overwrite these templates and which hook you can use to adjust parts if the DOM in preprocessors. More on that in another chapter!

Twig Developer Tools

The easiest way to know your current Twig environment is via outputting all your available variables:

{{ dump() }}

I have tried using kint but only ran into PHP memory size issues regularly due to the fact, that Drupal likes to have circular references and therefore create an infinite loop.

So my best experiences were just using the default Twig debugging tool dump()

BUT!!!

If you have a local setup with working Xdebug then I can highly recommend https://www.drupal.org/project/twig_xdebug

Basically put {{ breakpoint() }} anywhere in your Twig template you would like to debug.

Then check the $context variable in your debugger. In there you have every variable present in that Twig template.

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *