How to add PHP Debug Bar in WordPress?

As a WordPress developer, sometimes you use echo, var_dump, print or print_r to know the type and value of a variable in PHP. But this process is very slow as it takes 4 steps to retrieve the result.

1. Download a file from your remote server.
2. Type echo or any in your code and save your file.
3. Upload it to server via FTP/SSH
4. Reload the browser and display the value.
5. Again remove the echo and upload it again.

But the problem occurs when you do not know the type of a variable and use echo for displaying the value of a object. Here comes PHP Debug Bar. It can save you time and increase your productivity. Some of its features are:

• Generic debug bar with no other dependencies
• Easy to integrate with any project
• Clean, fast and easy to use interface
• Handles AJAX request
• Includes generic data collectors and collectors for well known libraries
• The client side bar is 100% coded in javascript
• Easily create your own collectors and their associated view in the bar
• Save and re-open previous requests

If you include it with from their sample example, you may face some issues like below:

1. Bar will not be visible as your project must be in main domain,
2. Your WordPress project may break as it includes jQuery at the html head and WordPress also includes another one.

So, follow the steps below to add PHP Debug Bar in WordPress Installation. Make sure you have composer installed on your system.

1. Open terminal/command prompt and go to root installation of your WordPress.
2. Type `sudo composer require maximebf/debugbar`. It will download neccesary files for debug bar. Remove `sudo` if you are a Windows user.
3. Now, create a file named `debug-bar.php` and include it in your theme “inc” folder.
4. Copy and paste the code given below.
5. Edit your theme’s `functions.php` file and add this lines `
   require ABSPATH . ‘vendor/autoload.php’;

   require get_theme_file_path(‘inc/debug-bar.php’);

   `

<?php
use DebugBar\StandardDebugBar;

if( ! WP_DEBUG ) return;

require ABSPATH . 'vendor/autoload.php';

$debugbar = new StandardDebugBar();
$debugbarRenderer = $debugbar->getJavascriptRenderer();
$debugbarRenderer->setOptions( array( 'base_url' => site_url('/vendor/maximebf/debugbar/src/DebugBar/Resources/') ) );
$debugbarRenderer->setIncludeVendors(false);

add_action('wp_head', function() {
    global $debugbarRenderer;
    echo $debugbarRenderer->renderHead();
});

add_action('wp_footer', function() {
    global $debugbarRenderer;
    echo $debugbarRenderer->render();
});

Thats all. Happy coding.

Subscribe

Notify of

new follow-up commentsnew replies to my comments

Label

{} [+]

Name*

Email*

Label

{} [+]

Name*

Email*

0 Comments

Inline Feedbacks

View all comments