Efficient debugging workflow for WordPress developers

You might be familiar with var_dump(),now upgrade to kint and become more efficient while you debug your code.

Efficient debugging workflow for WordPress  developers

Subscribe to my newsletter and never miss my upcoming articles

When I started developing on wordpress with php I would always reach for var_dump() which would show me information about the variable. It did what it promised, it dumped the information of the variable.

For example.

$variable = array( 1, 2, 3 );
var_dump( $variable );
die(); // Stop the code. I will come back to this later.

This is rendered like this on the frontend.

image.png

This looked good enough for a simple array, if it was a multidimensional array like below

$cars = array (
  array("Volvo",22,18),
  array("BMW",15,13),
  array("Saab",5,2),
  array("Land Rover",17,15)
); // This array is taken from the popular website w3schools šŸ˜œ
var_dump( $cars );
die(); // Stop the code. I will come back to this later.

Okay let's look at the output.

image.png

I am very sure that this is very difficult for most developers to scan and make sense out of šŸ˜‘.

In my pursuit to make my life easier I found other solution to my problem, "Pretty printing arrays".

$cars = array (
  array("Volvo",22,18),
  array("BMW",15,13),
  array("Saab",5,2),
  array("Land Rover",17,15)
); 
print("<pre>".print_r($cars,true)."</pre>");
die(); // Stop the code. I will come back to this later.

Output :

image.png

This is already much better. I can scan the array in a format, its easier to understand.

But my happiness didn't last for too long, when I started working with classes and objects.

I will use global variable of woocommerce to depict the issue which I faced.

global $woocommerce;
print("<pre>".print_r($woocommerce,true)."</pre>");
die();

Output :

image.png

Okay that is readable but its very long. To give you a prespective.

image.png This is in the lowest zoom of 25% and there is still a lot of scrolling left.

That's a lot about the problem, lets get into the solution. šŸ˜

Solution - Debug Toolkit

The solution is a plugin called Debug Toolkit by author hellofromTonya .

image.png

This plugin is available on wordpress plugin directory. You can download it here.

How is it a solution?

It comes with three very awesome tools.

  1. Whoops - whoops is a nice little library that helps you develop and maintain your projects better, by helping you deal with errors and exceptions in a less painful way.
  2. Kint - Zero-setup replacement for var_dump(), print_r(), and debug_backtrace().
  3. VarDumper - The VarDumper component provides mechanisms for extracting the state out of any PHP variables. Built on top, it provides a better dump() function that you can use instead of var_dump.

How to use it ?

Once you have installed the plugin activate it and you are ready. Nothing else is needed. You can start using it.

It is advised to use this plugin only on development and staging servers.

Let's use this plugin to dump our $wocommerce variable.

This plugin provides us with two type of dumper

  1. vd() - from VariableDumper
  2. d() - from Kint

Lets test both of them.

Testing vd()

image.png

So much better, we get color coding and toggles, we can use toggle open only those which we want. Let's try to find what our WC_Cart looks like it.

image.png

I can keep toggling on and off to read the output.

Testing d()

image.png

This may looks similar to vd(); but its not. You can toggle parts of output in here as well.

image.png

But it also has an Available methods tab which shows all the methods that are applicable on that particular variable.

image.png

And not only for the variable but you can also see Available methods for children values. For example we can see available methods for our cart.

image.png

This becomes so handy that I have discovered so many methods using this that I couldn't find on stackoverflow and wordpress support forum. This is like a crisp doc with variable information. And if code has a docbloc you can see that information here.

Example image.png

It doesn't end at vd and d. You can use

  1. vd() is an alias for vdump()
  2. vdd() and vdd() are aliases for vdump_and_die()
  3. d() is an alias for dump()
  4. dd() and ddd() are aliases for dump_and_die()

What number 2 and 4 does is that it will halt the code at the dumping line and won't run it further.

Tracing

Generates a backtrace for a code is called tracing.

  1. tracevd(); ā€“ Combines trace() and vd()
  2. traced(); ā€“ Combines trace() and d()
  3. tracevdd(); ā€“ Combines trace() and vdd()
  4. tracedd(); ā€“ Combines trace() and dd()
  5. tracevddd(); ā€“ Combines trace() and vddd()
  6. traceddd(); ā€“ Combines trace() and ddd()

Output of tracevdd(); image.png

Apart from dumping the the variable information it also gives you the traceback.

What power it gives you, you ask ?

You can see the line of code it hit before at every trace. image.png

You can see what was the value of the arguments at that time. image.png

And, also Callee object whenever possible. image.png

Errors and exception.

Whoops extenstion of this plugin makes your life a lot better by giving you a clean look when you hit an error.

image.png

On the top left hand side it gives you the error. image.png

You get a view of code on which the error occured.

Befow that are stack frames which you can click on and see the trace of code.

You can test Whoops live here. filp.github.io/whoops/demo

My opinion on XDebug

Xdebug is said to be the defacto for php development and help with a lot of things.

  • Step Debugging
  • Better var_dump()
  • Tracing
  • Profiling
  • Code Coverage Analysis

I think its a great tool and helps with improving developers development experience. But it can be very tough to setup for a lot of developers. I myself have tried to install and use it and haven't been very successful in doing so.

I also think that Debug Toolkit is a plugin which gives a lot of tools to developers in 0 configuration. The reason I wanted to write this blog is because of the low number of download of this plugin.

image.png

I hope you will start using it and make your life a lot easier. šŸ˜

Please share your experience of using Debug toolkit in the comments below. You can also ask questions you may have. I will try my best to answer them.

Ā 
Share this
Proudly part of