Debug Drupal with Devel, XDEBUG + More

Greetings readers. I’m a Senior Developer and Support Manager at Kalamuna. My main job is to de-jankify websites we inherit in the support universe. To do this, I’ve had to continue to teach myself how to debug sites. I was thrown into Drupal about 6 years ago and have stuck with it since. In that time, I’ve tried many different debugging tools and methods. Lucky for you, I found what works and what doesn’t. Below you’ll see what I’ve found to be the easiest and quickest way to debug Drupal Sites.

If you want the super-abridged version, see my BADcamp 2015 presentation slides HERE.

Some Quick Stuff on Debugging

For HTML / CSS debugging, use Google Chrome DevTools. Some people are in the Firefox camp, and you can use that if you want, but I don’t. Chrome more efficiently highlights HTML and CSS than Firefox. (This topic is probably a blog post unto itself.)

For JS debugging, use Chrome DevTools. You can either throw console.log() / alert() in your code, or use the sources panel with Breakpoints. Usually, I go with the former as it’s the quickest way to bang out whatever variable you are trying to see. The later is more for when you are lost, without hope, in a sea of JQuery sadness.

Debugging with DEVEL

You have many devel commands at your disposal. I have tried a majority of the commands during my time debugging Drupal. Although they provide a niche use case, they are not necessary in the grand scheme of things. If you want to see them all, follow this LINK.

The easiest way to use devel in Drupal 7 and earlier versions of Drupal is to just slap dpm() in your code at any level (theme, module, etc). You will then get pretty print-outs of the wonderful, ginormous, multidimensional arrays that Drupal uses. I also recommend installing the “Search Krumo” module to easily find what you’re looking for and get the appropriate syntax for the part of the array or object in question. Devel also offers options to enable them right on the node, view, etc. This works on all versions of Drupal.  

Here is a Drupal 7 site using Devel + Search Krumo to debug a form:

(Note: There is no audio on these videos)

For Drupal 8, you must use the “Kint” module packaged with Devel. If you don’t, your site will implode and cause a black hole in time. Devel is ok-ish for Drupal 8, but I find XDEBUG to be a more suitable solution. Furthermore, you can use kint() in your theme. You can also enable theme debugging in your services.yml to see the fun green words in your HTML codez.

Using XDEBUG

If you want to be the coolest kid on your block, read on. XDEBUG is, hands down, the best tool for debugging any PHP base setup. I don’t use the word “Drupal” here since XDEBUG is platform-agnostic; that’s what makes it so powerful. At the end of this post lies a link to a presentation I did at BadCamp — there you’ll see how to setup XDEBUG.

The reason that XDEBUG is such a powerful option is that it allows you to see the backtrace, all the variables, and it enables you to debug the code at any point. Also, with Drupal 8, you can see what namespace a class is using, etc.

Here’s a quick video of me debugging the same form alter above in the devel section.

So that’s how you debug Drupal, in a nutshell. There can be a lot more to it, but there’s no need to go all super deep into it. With these 2 methods I basically taught myself the inner workings of Drupal. You can also use them to diagnose just about any problem with the code level of Drupal. If you have any questions, hit me up on Twitter @labboy0276

And check out the BADcamp presentation slides..