Introducing Debug Bar

wordpress,

One of the features being introduced in the upcoming WordPress 3.1 release is the new Admin Bar.  This is designed to make it easier to get access to the more common administration area tools from the front end of your site but also introduces the possibility to easily integrate extra debugging features into your site for use in testing environments or production environments to help track down things like slow queries, PHP notices and warnings, and usage of deprecated functions.

During the development and RC phase for WordPress 3.1 some of the core development team have worked on building a plugin which adds these debugging features to any site running WordPress 3.1 or later.  The plugin started out with a very basic feature set just including MySQL query debugging information and statistics from the installed object cache based on the code that is used on WordPress.com.  Overtime we have added reporting of PHP notices and warnings, Logging of calls to the things that are deprecated (code derived from the Log Deprecated Notices plugin by Core Developer Andrew Nacin) and information about the WordPress Query being run as well as how the current request has been parsed by the WordPress rewrite engine.

The plugin requires WordPress 3.1 as it hooks into the new Admin Bar and I’m sure will be of great use to all WordPress core, plugin, and theme developers.

By default the MySQL queries and PHP Notices / Warnings tabs are not displayed. If you enable MySQL query recording with the SAVEQUERIES define in your wp-config.php then the queries tab will show. If you enable WP_DEBUG in your wp-config.php then the PHP Notices / Warnings tab will show.

Here are some screenshots of the plugins different tabs:

This shows the MySQL queries for the current page
A list of all the MySQL queries made for the current page load and details about what function calls generated them
Information about the object cache
This shows statistics information from the object cache - content depends on which object cache you are using
This shows any php notices or warnings in the current page
Details on any php notices or warnings on the current page
This shows the deprecated calls tab of the debug bar
Details on the calls to deprecated functions etc.
This shows the wp query tab of the debug bar
Details on the current WP Query object
This shows the request tab of the debug bar
Details on the parsing of the current request by the WordPress rewrite engine

You can find the plugin in WordPress.org Extend here: http://wordpress.org/extend/plugins/debug-bar/

Is there something else you think this plugin could provide debugging information on?

32 thoughts on “Introducing Debug Bar”

      1. This is a brilliant solution! Will help a lot in debugging and knowing what’s eating up more resources. Glad to have this plugin in the repository.

        And yes its right to display them in bytes so as to able to see minor variations.

  2. Pingback: A great tool for developers: the WordPress Debug Bar | WereWP

  4. We’ve had our own debugger that dumps this output to the html comments for years now, but this is somewhat more user-friendly and will be of use to more people. Well done there – very nice.

      1. Certainly more accessible to a wider range of folk. Most importantly, it makes for a very easy way to show people why theme A is slowing down their site in comparison to theme B. It helps to show quality differences, and that’s useful.

        We’ve had clients say “can we try this theme please?” to which we’ve had to point out that the 350 queries and four second page build times aren’t really a good idea!

      2. We’ve had clients say “can we try this theme please?” to which we’ve had to point out that the 350 queries and four second page build times aren’t really a good idea!

        Yeah that isn’t good 😀

  5. Impressive! Can’t wait to sift through the queries to see if there’s room for improvement.

  6. Nice!

    I’ve been using a query monitoring and debugging plugin I wrote a long time ago now (I’m sure many many other developers do too). Presentationally, mine is crude but it provides the exact information I want. Here are some other things from it that could go into Debug Bar:

    1. A list of the WordPress conditionals that evaluate to true (is_home(), is_single(), etc).
    2. Expensive queries (longer than 0.2s by default, but configurable) are highlighted in red so they can be investigated.
    3. A list of all WordPress actions in the order they’re fired (but only actions, not filters, as there are too many).
    4. Split each SQL query onto newlines at keywords so they’re easier to read.
    5. List of functions that perform SQL queries, grouped by function and ordered by their total request time (you end up with get_posts(), get_user_by(), etc). Makes it easy to see problem functions.
    6. Stack trace for everything displayed on mouseover (with all requires and includes stripped out for simplification).
    7. List of every HTTP request performed (by the WP_HTTP class) with request info and response stats. Fairly edge case usefulness.

    1. John,

      These are great suggestions! I think we’ve already done #1. Also, as Peter will tell you, patches welcome. 🙂 A bunch of us are or will be working on this. I’ll likely even roll in my Log Deprecated Notices plugin into it, or more likely spin off a shared library to make it easier to upkeep.

      Cheers,
      Nacin

  7. I do not know if it would be possible, but i would prefer automatic setting without need to modify config.php by hand and option to enable this debug bar only if Admin is logged in.

      1. Great, I’ll have a look at this too. My plugins usually var_dump() or error_log() stuff in a useful but ugly way, so it’s probably neater and more efficient to hook into this.

      2. This will make my live easier. Now I’m dumping debug info all over the screen.
        Are you planning anything on php memory used and/or time used?

  9. Pingback: Debug Bar – כלי דיבאגינג לוורדפרס 3.1 ומעלה | יואב, על וורדפרס
  10. Pingback: WordPress Plugin Releases for 1/7 « Weblog Tools Collection

  11. I’ve just updated to the latest version of Debug Bar (I’m running WP 3.1-RC2) and it no longer appears on the Admin Bar. Is there any reason why this might be the case?

    Thanks.

      1. A definate problem, I’m sorry to say. I’ve just re-installed version 0.2 of Debug Bar and the debug option appears in the Admin Bar. I then replaced this with 0.3 and it disappears.

        Yes, I’m signed in as Admin and can see the standard admin bar at the top of my blog.

      4. Ignore the above. I hadn’t realised that the Debug button had moved to the right hand side of the search field – I was running the screen windowed and hadn’t noticed it.

        Apologies.

  12. Pingback: WordPress 3.1: What’s new - op111.net

  13. After my, ahem, previous problems with Admin Bar (which turned out to simply be me not noticing that the Debug menu option had moved) I now have, what I believe, is a genuine problem.

    I’ve just installed version 0.5 and clicking on “Debug” causes, well, nothing to happen. No Debug menu appears or anything.

    I’ve tried previous versions and it appears to “break” with version 0.4.

    As mentioned before, I’m running WP 3.1-RC2.

    1. Wierd. In the latest version of the debug bar it now appears at the bottom of the screen as a slide up section rather than the pop-up over the whole page.

      Which browser are you using?

      1. Firefox 3.6.13 under XP and 7 64-bit.

        I’ve looked at my source code and, particularly, the admin bar. Should the link to the debug option simply be an empty anchor, as that’s what I’m seeing. When I click on it, it just refreshes the page.

Comments are closed.