Debugging is a form of testing where code is inspected closely by running it and observing its behavior. Specialized debugging tools (debuggers) are often used in the process. These tools help developers track down the root causes of bugs, identify problematic pieces of code, and determine what kinds of corrective changes will resolve issues. Developers spend a large portion of their time debugging, as it’s not only something that happens when they’re fixing issues but also a necessary part of building new features.
The following debugging tools are commonly used by developers in the WooCommerce community. To use these tools, please also see our guide to learn how to enable debugging for a WooCommerce site.
XDebug is a PHP extension with a number of features that improve the developer experience. WooCommerce developers use it to set breakpoints, inspect stack traces, watch variables and change their values. It is a great alternative to adding
die statements in the code. It usually takes some time to set up XDebug for the first time, but once in place, it provides a powerful PHP step debugger for compatible IDEs and editors.
Query Monitor is a WordPress plugin that adds a developer tools panel to the WordPress Admin dashboard. It provides reports about the use of native WordPress components such as queries, hooks, blocks, enqueued scripts and stylesheets, and HTTP API calls.
Its reporting is used by WooCommerce developers to find potential issues such as slow queries.
The Debug Bar is a WordPress plugin that adds a menu item to the Admin Bar. Like Query Monitor, it provides information about native WordPress components. It is less comprehensive than Query Monitor but can be extended to report on more items.
Logs are invaluable when investigating issues reported by users. Quality logs can help developers re-trace the steps leading up to an error and provide insights to help reproduce an issue.
WooCommerce provides a log system which users can view in the admin dashboard at WooCommerce > Status > Logs.
Developers can add logging to their code using WooCommerce’s
wc_get_logger() function. For example:
$logger = wc_get_logger(); $logger->error( 'Error getting Foo', array( 'foo' => 'bar' ) );
In addition to errors, the logger provides other “log levels” such as warnings and informational messages ,that developers can use as well. See our post to learn more about the WooCommerce log system.
React DevTools / Redux DevTools
The React and Redux DevTools are a pair of browser extensions allowing React components and Redux state changes to be inspected closely.
- React DevTools for Firefox
- React DevTools for Chrome
- Redux DevTools for Firefox
- Redux DevTools for Chrome