Debugging PHP in browser’s Javascript console

D

Debugging PHP is often done in many ways. By printing some info on the screen, using die or var_dump, using log files in which you can always write errors, warnings and similar. The bad thing is, it will destroy your layout, and it will be barely readable.

But why not using only one tool for all scripts (PHP and Javascript). As FireFox and Chrome have Javascript consoles, we can easily use them to debug PHP, too. This way you can have nice colored output, with line numbers and everything you need. The best thing is you can print arrays or even the whole object to console.

You will say that it will destroy browsers that do not use/have console, like IE. But I have taken care of that, too.

First, I will show you the class that is responsible for the whole thing:

class PHPDebug {
    
function __construct() {
    if (!defined("LOG"))    define("LOG",1);
    if (!defined("INFO"))   define("INFO",2);
    if (!defined("WARN"))   define("WARN",3);
    if (!defined("ERROR"))  define("ERROR",4);

    define("NL","\r\n");
    echo '<script type="text/javascript">'.NL;
    
    /// this is for IE and other browsers w/o console
    echo 'if (!window.console) console = {};';
    echo 'console.log = console.log || function(){};';
    echo 'console.warn = console.warn || function(){};';
    echo 'console.error = console.error || function(){};';
    echo 'console.info = console.info || function(){};';
    echo 'console.debug = console.debug || function(){};';
    echo '</script>';
    /// end of IE    
}

function debug($name, $var = null, $type = LOG) {
    echo '<script type="text/javascript">'.NL;
    switch($type) {
        case LOG:
            echo 'console.log("'.$name.'");'.NL;    
        break;
        case INFO:
            echo 'console.info("'.$name.'");'.NL;    
        break;
        case WARN:
            echo 'console.warn("'.$name.'");'.NL;    
        break;
        case ERROR:
            echo 'console.error("'.$name.'");'.NL;    
        break;
    }
    
    if (!empty($var)) {
        if (is_object($var) || is_array($var)) {
            $object = json_encode($var);
            echo 'var object'.preg_replace('~[^A-Z|0-9]~i',"_",$name).' = \''.str_replace("'","\'",$object).'\';'.NL;
            echo 'var val'.preg_replace('~[^A-Z|0-9]~i',"_",$name).' = eval("(" + object'.preg_replace('~[^A-Z|0-9]~i',"_",$name).' + ")" );'.NL;
            switch($type) {
                case LOG:
                    echo 'console.debug(val'.preg_replace('~[^A-Z|0-9]~i',"_",$name).');'.NL;    
                break;
                case INFO:
                    echo 'console.info(val'.preg_replace('~[^A-Z|0-9]~i',"_",$name).');'.NL;
                break;
                case WARN:
                    echo 'console.warn(val'.preg_replace('~[^A-Z|0-9]~i',"_",$name).');'.NL;        
                break;
                case ERROR:
                    echo 'console.error(val'.preg_replace('~[^A-Z|0-9]~i',"_",$name).');'.NL;    
                break;
            }
        } else {
            switch($type) {
                case LOG:
                    echo 'console.debug("'.str_replace('"','\\"',$var).'");'.NL;
                break;
                case INFO:
                    echo 'console.info("'.str_replace('"','\\"',$var).'");'.NL;
                break;
                case WARN:
                    echo 'console.warn("'.str_replace('"','\\"',$var).'");'.NL;    
                break;
                case ERROR:
                    echo 'console.error("'.str_replace('"','\\"',$var).'");'.NL;
                break;
            }
        }
    }
    echo '</script>'.NL;
}
}

I will not go into details about the code, as it should be understandable to medium experienced PHP programmer. Basically, this class is generating JavaScript to insert messages or variables to console. Simple as that.

The part that is dealing with IE is creating empty functions for every console function we are using, and thus IE is working despite of writing to console. Cool.

Now, how to use this class, below is code that is used on the DEMO page:

// include and instantiate the class
    require_once("PHPDebug.php");
    $debug = new PHPDebug();
    
    // simple message to console
    $debug->debug("A very simple message");
    
    // vaiable to console
    $x = 3;
    $y = 5;
    $z = $x/$y;
    $debug->debug("Variable Z: ", $z);
    
    // a warnign
    $debug->debug("A simple Warning", null, WARN);
    
    // info
    $debug->debug("A simple Info message", null, INFO);
    
    // An error
    $debug->debug("A simple error messsage", null, ERROR);
    
    // Array in console
    $fruits = array("banana", "apple", "strawberry", "pineaple");
    $fruits = array_reverse($fruits);
    $debug->debug("Fruits array", $fruits);
    
    
    // object to console
    $book               = new stdClass;
    $book->title        = "Harry Potter and the Prisoner of Azkaban";
    $book->author       = "J. K. Rowling";
    $book->publisher    = "Arthur A. Levine Books";
    $book->amazon_link  = "http://www.amazon.com/dp/0439136369/";
    $debug->debug("Object", $book);

To see above code in action, open your console (in FireFox or Google Chrome) and go to the DEMO PAGE.

You can do the same with Internet Explorer, and the div containing message will appear, and IE will not break.

Above code is free and you can use it however you see fit.

About the author

Zvonko Biškup

A passionate web developer with more than 13 years experience in PHP and other web related technology. My main interest is WordPress and new PHP frameworks.
Owner of Influendo Programming.
Enjoys exploring new stuff and possibilities, using new technologies and just having fun developing awesome stuff.

<span class="dsq-postid" data-dsqidentifier="169 https://www.codeforest.net/?p=169">11 comments</span>

Tags