Debugging Tools

Contents

Introduction

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

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 var_dump and 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.

https://xdebug.org

Query Monitor

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.

Query Monitor

Debug Bar

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.

Debug Bar

Debug Logging

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.

WooCommerce developers use these tools to debug JavaScript-based features in WooCommerce Admin such as the new home screen and analytics. It provides additional insights about React and Redux usage that the native browser developer tools are otherwise unaware of. This includes inspecting the props, state, and hooks of React components, and inspecting (or even rewinding) the state changes in data stores.

←

Back: Linting Tools

→

Next: Setting up a local environment for testing