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.
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.
$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.
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.
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.
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();
Okay that is readable but its very long. To give you a prespective.
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 .
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.
- 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.
- Kint - Zero-setup replacement for var_dump(), print_r(), and debug_backtrace().
- 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
This plugin provides us with two type of dumper
vd()- from VariableDumper
d()- from Kint
Lets test both of them.
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.
I can keep toggling on and off to read the output.
This may looks similar to
vd(); but its not. You can toggle parts of output in here as well.
But it also has an
Available methods tab which shows all the methods that are applicable on that particular variable.
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.
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.
It doesn't end at
d. You can use
vd()is an alias for
vdd()are aliases for
d()is an alias for
What number 2 and 4 does is that it will halt the code at the dumping line and won't run it further.
Generates a backtrace for a code is called tracing.
tracevd();– Combines trace() and vd()
traced();– Combines trace() and d()
tracevdd();– Combines trace() and vdd()
tracedd();– Combines trace() and dd()
tracevddd();– Combines trace() and vddd()
traceddd();– Combines trace() and ddd()
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.
You can see what was the value of the arguments at that time.
And, also Callee object whenever possible.
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.
On the top left hand side it gives you the error.
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()
- 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.
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.