jump to navigation

How to Debug PHP Code with Your Browser’s Console Tab September 7, 2012

Posted by Tournas Dimitrios in PHP.

Debugging PHP applications has always been a common activity , as no matter the experience of the developer , there is almost always a bit of syntax error (at least , it happens to me often) . For a quick and simple debugging process , the “echo” statement is probably the most used tool (combined with one of  these three variables :  var_dump , print_r , var_export() ) . While there are tools that reveal more details during debugging  (such as XDebug) , you don’t always have access to install them on the server you’re working with . Fortunately, you can also gain some reasonable PHP-debugging capabilities through your browser’s web-development tool . Today’s article will present a way to extend the functionality of two open-source browsers (Firefox and Chrome)  by installing plugins . The PHP-script will dump errors , traces or objects’s data into the browser’s enabled PHP-console .

Extending Chrome :

  • Install the extension (ChromePHP)  from the Google Chrome Extension Gallery into Chrome . A successful installation is notified by an icon on Chrome’s toolbar .
  •  Download from GitHub the ChromePhp class for logging and put it somewhere in your include path .This class allows you to log variables to the Chrome console .
  • Write code into your PHP-script
     include 'ChromePhp.php';
    ChromePhp::log('This is just a log message');
    ChromePhp::warn("This is a warning message " ) ;
    ChromePhp::error("This is an error message" ) ;
    // using labels
    foreach ($_SERVER as $key => $value) {
        ChromePhp::log($key, $value);
  • Open Chrome and Click the extension icon to enable logging (the icon becomes light-blue) . If all is working correctly then your output will look something like this

    Make sure you only include this in a development environment. You don’t want users seeing your debug statements on production.

Extending Mozilla FireFox : 

While previous method is simple to implement on a hosting environment , this example is tedious if you are not comfortable  with installing PEAR-packages . For starters , my previous article explains how to install PEAR-packages on WAMP in ten steps .

  • Install  into FF the following two extensions  , Firebug and FirePHP .
  • install PEAR’s “Log package  ( pear  install  Log-1.12.7 )  . Notice the version .
  • First set an extra repository in the list and install FirePHP Core Library from PEAR channel
    pear   channel-discover   pear.firephp.org
    pear  install   firephp/FirePHPCore
  • Write a simple Log-message
    echo "FirePHP test" ;
    $firephp = FirePHP::getInstance(true);
    $var = array('i'=>10, 'j'=>20 , 'd'=>'John Doe' , 'e'=>'Peter Armstrong');
    $firephp->log($var, 'Iterators');
    $firephp->log('Hello , this is a message from FirePHP');
  • Access the PHP-script via Firefox (e.g. http://localhost/ffdebug.php) . Ensure your Firebug ,  Net AND Console panels are enabled . You should see something like this:
    This demonstration is just a limited subset of the functionality available through FirePHP . For more information  visit FirePHP’s user-documentation  at this link  .  . This reference has everything needed for using FirePHP to its greatest debugging capabilities .

Keep smiling and ….. Happy debugging🙂  .


1. wohn - September 10, 2012

It’s really a great and helpful piece of information. I’m happy that you just shared this helpful info with us. Please stay us up to date like this. Thanks for sharing.

2. Bennie - September 13, 2012

I wish i had a style like that

3. Ghov - September 14, 2012

Wow, fantastic weblog format! How long have you ever been running a blog for? you make running a blog look easy. The full glance of your website is great, as neatly as the content!

4. Chester - September 15, 2012

This is the only time I’ve been to your site. Thank you for explaining more information.

5. Frank - June 12, 2014

Hi there i am kavin, its my first time to commenting anywhere, when i read this article i thought i could also make comment due to this sensible paragraph.

tournasdimitrios1 - June 12, 2014

Welcome Frank🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s