FireBug – Adding Your Own Debug Panels

In this tutorial, we will cover how to add your own debug panels to FireBug. This feature of FireBug is what really make it a useful tool for what you are developing! Since I recently integrated FireBug into a WordPress Plugin, we will be using this use case for our tutorial today. One goal we had when doing this integration was to add a custom debug panel that would give us all of the SQL Queries that WordPress makes when loading a page.

Start Creating Your Custom Panel

For this tutorial, we are going to assume you’ve successfully integrated FireBug into your project. To recap the simplest integration looks like this:

<?php
$fireBug = \UA1Labs\Fire\Bug::get();
$fireBug->enable();
echo $fireBug->render();

A custom FireBug debug panel consists of two parts. The class that represents the content of the panel. And the template that is bound to the class to render the results you are looking for. So let’s start by building out your class.

<?php
namespace UA1Labs\Fire\Studio\Feature\Debug\Panel;
use \UA1Labs\Fire\Bug\Panel;
class WpSqlQueries extends Panel
{
    const ID = 'wpsqlqueries';
    const NAME = 'Wordpress SQL';

    public function __construct()
    {
        parent::__construct(self::ID, self::NAME, __DIR__ . '/../templates/panels/sql-queries.phtml');
    }
}

Above you will find an example of the basic boilerplate code to start building out the data for your panel. Of course, there are so many ways to create the class. This is the way we do it at UA1 Labs. Other implementations are acceptable as well.

Notice, we have included a template file within our parent constructor. So let’s go ahead and get the boilerplate code prepared for that part of the custom panel we are creating.

<?php
// nothing to display yet ;)

Now that you have the basic boiler plate, we can go ahead and start adding the code that will display our queries.

$wpdb->queries

Before we get started adding our custom code, let’s first talk about how WordPress gives us the information about the queries it runs to load a page. WordPress has a configuration, that when turned on, will store the settings in its global $wpdb object. So for us to even get these queries, we can simply add define('SAVEQUERIES', true); within our code. Now we can access our the global $wpdb object.

<?php
// getting the queries from the $wpdb object
$sqlQueries = global $wpdb->queries;

The queries come in the following format:

array(19) {
  [0]=>
  array(4) {
    [0]=>
    string(86) "SELECT option_value FROM wp_options WHERE option_name = 'can_compress_scripts' LIMIT 1"
    [1]=>
    float(0.00031805038452148)
    [2]=>
    string(651) "require('wp-blog-header.php'), require_once('wp-load.php'), require_once('wp-config.php'), require_once('wp-settings.php'), do_action('init'), WP_Hook->do_action, WP_Hook->apply_filters, wp_widgets_init, do_action('widgets_init'), WP_Hook->do_action, WP_Hook->apply_filters, WP_Widget_Factory->_register_widgets, WP_Widget->_register, WP_Widget_Text->_register_one, wp_add_inline_script, wp_scripts, WP_Scripts->__construct, WP_Scripts->init, do_action_ref_array('wp_default_scripts'), WP_Hook->do_action, WP_Hook->apply_filters, wp_default_packages, wp_register_tinymce_scripts, script_concat_settings, get_site_option, get_network_option, get_option"
    [3]=>
    float(1573188354.9593)
  }
  [1]=>
  array(4) {
    [0]=>
    string(80) "SELECT option_value FROM wp_options WHERE option_name = 'theme_switched' LIMIT 1"
    [1]=>
    float(0.00020003318786621)
    [2]=>
    string(219) "require('wp-blog-header.php'), require_once('wp-load.php'), require_once('wp-config.php'), require_once('wp-settings.php'), do_action('init'), WP_Hook->do_action, WP_Hook->apply_filters, check_theme_switched, get_option"
    [3]=>
    float(1573188354.9608)
  }
{...}

So, now that we have this in mind, let’s get started!

Our Custom Code For Displaying WP Queries

First we need a place to store the queries within the panel object.

class WpSqlQueries extends Panel
{...}

    /**
     * The queries from wordpress
     *
     * @var array<array>
     */
    private $queries;

{...}

Next we need a way to set and get the $queries.

class WpSqlQueries extends Panel
{...}

    /**
     * Add sql query to the stack.
     *
     * @param array<array> $queries
     */
    public function addWpQueries($queries)
    {
        $this->queries = $queries;
    }

    /**
     * Returns an array of sql queries
     *
     * @return array<object>
     */
    public function getWpQueries()
    {
        return $this->queries;
    }

{...}

Now we add logic to our template to use the newly created $queries property we added to our panel object. Quick hint, the way this all works is that when you add data to your panel object, it becomes available to your template by using the $this keyword within the template file.

Now add the following code to your template file:

$queries = $this->getWpQueries();

if (!empty($queries)) {
    foreach ($queries as $query) {
        echo $this->renderCode($query[0]);
        echo $this->renderLabel($query[1] . ' ' . __('milliseconds', 'firestudio'));
        echo $this->renderSeparator();
    }
} else {
    echo $this->renderLabel(__('No WordPress SQL Statements Executed...', 'firestudio'));
}

You may have already noticed that we are using some methods like $this->renderCode(), $this->renderLabel(), and $this->renderSeparator(). Well, you have access to these methods because you extended the \UA1Labs\Fire\Bug\Panel class. These methods are used as helpers so that you don’t need to know what HTML you need to return in order for you to match with the built in styles. You can read more about these methods within our API Documentation.

Register The Panel With FireBug

Now all that is left to do is to register the panel with FireBug and find a place to add the queries to the WpSqlQueries object.

First register the new panel:

<?php
$fireBug = \UA1Labs\Fire\Bug::get();
$fireBug->addPanel(new UA1Labs\Fire\Studio\Feature\Debug\Panel\WpSqlQueries());

Now, add the queries to the WpSqlQueries panel:

<?php
$fireBug = \UA1Labs\Fire\Bug::get();
$wpSqlQueries = $fireBug->getPanel(UA1Labs\Fire\Studio\Feature\Debug\Panel\WpSqlQueries::ID);
$wpSqlQueries->addWpQueries($wpdb->queries);

And now when FireBug renders, you’ll be able to see your newly added panel!

Leave a comment

Leave a Reply