Intuition

Debug without Devel Module and DPM()

For a long time, before knowing the existing of devel module, I have been debugging on Drupal website via the use of dump and var_dump; For instance, if I would need to checkout a variable on a hook_preprocess_html theme hook, I would have write the following in php code and twig template respectively:

1
2
3
4
5
6

function hook_preprocess_HOOK(&$variables) : void {
    ...
    dump($variables);        # OR var_dump($variables)
    die();                   # OR exit();
    ...
}

1
2
3
4
5
6

...
<pre>
  dump($content["values"]["field_xxyyzz"]);
  {# OR var_dump($content["values"]["field_xxyyzz"]) #}
</pre>
...

Whilst var_dump can work in the majority of the scenario, its output are raw and can sometimes yeild to memory overflow issue if the variable gets to big, and by default their ouput only allows certain levels of nesting; So if you need to drill down the variable values, you will have to change the dumping variable on trials: var_dump($variable) → var_dump($variabel["html"]) → var_dump($variable["html"]["context"]) → ..., which is not very efficient.

2025-04-08T101433

In the meanwhile, whilst dump() offers a more user friendly interface, it is still outputting the raw ouput data, and will disrupt the layout of the website, which is why always I have die() right after the printing.

2025-04-08T101113

When it comes to debugging in twig template, I even developed a code snippet that prints the debugging varaible into a object with keys in the browser console:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

{# ============================================================================ #}
<script>
                                                  //                 /‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾\
    {% set src = variable_of_your_interest %}     // ←------------  | Only need to change this |
                                                  //                 \_________________________/

    function twig_log(){
        let __datetime         = {{ "now"|date("Y-m-d\\TH:i:s")|json_encode|raw}}
        let __keys             = {{ src|keys|json_encode|raw}};
        let __object           = {{ src|json_encode|raw }};
        console.group            (__datetime);
        console.group            ("[KEYS]");
        console.dir              (__keys );
        console.groupEnd         ();
        console.group            ("[OBJECT]");
        console.dir              (__object);
        console.groupEnd         ();
        console.groupEnd         ();
    }
    twig_log();
    twig_log=undefined;
</script>
<pre>
    {{dump(src)}}
</pre>
{# ============================================================================ #}

For instance, when you use the above code snippet with {% src = page %} in the page.html.twig you will have the following:

2025-04-08T101919

Certainly, you can configure XDebug and set breakpoints to examine variable values (I have another post detailing the setup process), but generally, this approach can be somewhat time-consuming if your primary goal is to quickly inspect a variable.

Xdebug over the command line with DDEV

What Devel module helps ?

Function in devel module such as dpm() are specifically designed for Drupal, hence integrate vetter with the ecosystem, for instance it output the debug information directly into the Drupal message area and will not interfere with the page’s structure or styling. The ease of cleanup is also a bonue point, since the debug functions are all provide by the devel module, you can simply remove or disable all instances of them by disabling the debug module, thus making it easy for developers to swtich between the production/staging environment and their local.

There’re also another bunch of the goodies comes with this module, just to list a few:

  • Devel toolbar options: Cache clear, Config editor, Container Info, Current route info Devel settings, Element Info, Entity Info, Events Info, Field Info, PHPinfo), Rebuild Menu, Reinstall Modules Routes Info, Run cron, State editor, Switch user, Theme registry, View Session
  • Devel Generate: generating test user, terms and content etc for testing purpose

But due to the length of this post, I will focus on the debug-print side of topic, hence will not go into the details of these features.

Practical Examples

Debug using Devel Module + Symfony Dumper

Simply install the devel module as a development dependency and enable it, once successfully installed you should be able to access its settings via /admin/config/development/devel :

1
2

composer require drupal/devel --dev
drush pm:install devel

image-20250408110110187

You may use any of the following function in your php code or twig template (the official documentation page for this can be found here):

  • dpm: Prints a variable to the ‘message’ area of the page.
  • dvm: Displays a drupal_var_export() variable to the ‘message’ area of the page.
  • dpr: Pretty-print a variable to the browser (no krumo)
  • dvr: Like dpr(), but uses drupal_var_export() instead.
  • kpr: Use Krumo to print readable output
  • dargs: Prints arguments passed into the current function (variable name and value)
  • ddm: Drupal Debug - outputs value to a file, drupal_debug.txt, in the temp directory. (Before using it, please remeber to change the “Debug Log File” path from the default “temporary://drupal_debug.txt” to an actual path like “sites/default/devel/drupal_debug.txt”)
  • ddebug_backtrace: Print function call stack

Below are a few examples of the usage:

2025-04-08T112716

Debug using Devel Module + Kint Dumper

Notice that, under “Variables Dumper” by default radio button is selected as “Symfony var-dumper”, and the “kint” radio button section is disabled, this is because the dependency for kint have not been installed,

1

composer require kint-php/kint --dev

Comparing to the default var-dumper provide by the symfony debugger tool, “kint” have the advantages of:

  • Output Style: kint is interactive, expandable/collpsible, but in differnt look
  • Detail Level: kint include object method and metadata, whilst var-dumper only print variable values only
  • Configurable Depth: with kint you can limit the nesting levels
  • Performacne on Large Data: kint have better performance on large dataset to prevent crashes
  • Twig Integration: kint support twig context debugging templates

You may debug using kint via the kint() or ksm() function in your php or twig files:

2025-04-08T115627

You may also use “kint” as the default dumper, if you do that, then the function dpr ( ... ) will become equivalant to kint( ... ) and function dpm(...) will become equivalant to ksm( ... ) :

2025-04-08T111918

Reference