Outputting PHP To Browser Console

Although there exist classes for outputting PHP to browser console such as Google’s PHP Console and certain others, I was looking for a way to output PHP to browser console without including those classes in my PHP files or installing any browsesr plugin to do the same. Currently, I am working on facebook application development in which you have to commit/upload the code to check certain output out of PHP unlike offline development where you check the code output before committing it up. This makes facebook application development a longer process for a developer but you got to live with it because you don’t have a choice.

Anyways, to speed up the code output checking process a little and rather using debug_backtrace, print_r, print/echo, var_dump, etc which you need to remove/comment again, I created a function to get output of PHP on the browser console. One could use error_log function but even that makes you go to your log file and then see the output. Of course, browser needs to support/have the console so that code result is output there. Because IE less than 8 doesn’t have console, this won’t work in IE less than 8, though result won’t be affected in it. Notice that you can see console in IE=>8 by pressing F12 key and then going to Script tab where you need to make sure Console tab is selected on the right side.

Here is the function:

     /**
     * Logs messages/variables/data to browser console from within php
     *
     * @param $name: message to be shown for optional data/vars
     * @param $data: variable (scalar/mixed) arrays/objects, etc to be logged
     * @param $jsEval: whether to apply JS eval() to arrays/objects
     *
     * @return none
     * @author Sarfraz
     */
     function logConsole($name, $data = NULL, $jsEval = FALSE)
     {
          if (! $name) return false;

          $isevaled = false;
          $type = ($data || gettype($data)) ? 'Type: ' . gettype($data) : '';

          if ($jsEval && (is_array($data) || is_object($data)))
          {
               $data = 'eval(' . preg_replace('#[\s\r\n\t\0\x0B]+#', '', json_encode($data)) . ')';
               $isevaled = true;
          }
          else
          {
               $data = json_encode($data);
          }

          # sanitalize
          $data = $data ? $data : '';
          $search_array = array("#'#", '#""#', "#''#", "#\n#", "#\r\n#");
          $replace_array = array('"', '', '', '\\n', '\\n');
          $data = preg_replace($search_array,  $replace_array, $data);
          $data = ltrim(rtrim($data, '"'), '"');
          $data = $isevaled ? $data : ($data[0] === "'") ? $data : "'" . $data . "'";

$js = <<<JSCODE
\n<script>
     // fallback - to deal with IE (or browsers that don't have console)
     if (! window.console) console = {};
     console.log = console.log || function(name, data){};
     // end of fallback

     console.log('$name');
     console.log('------------------------------------------');
     console.log('$type');
     console.log($data);
     console.log('\\n');
</script>
JSCODE;

          echo $js;
     } # end logConsole

Here is an example of how to use it:

$name = 'sarfraz';

$fruits = array("banana", "apple", "strawberry", "pineaple");

$user = new stdClass;
$user->name = "Sarfraz";
$user->desig = "Sr. Software Engineer";
$user->lang = "PHP";

logConsole('$name var', $name, true);
logConsole('An array of fruits', $fruits, true);
logConsole('$user object', $user, true);

Above code will result in what is shown in the image above. Although this does not prevent committing code first to see the code output if you are on facebook application development but it defintely does save some time. I have been using this function successfully so far, please let me know your ideas if any on how to improve this piece of code further. Have fun !

Dreamweaver Tip: Search And Replace Tag Attributes

If you ever come across a situation where you want to replace tag attributes, this regular expression tip must prove extremely useful to you. Suppose you have a main table with lots of nested tables in it and you want to replace <table width = “400”> or <table width = “500px”> with <table width = “100%”> then you can put the regular expression at rescue instead of finding and replacing each attribute manually. I was working on a site developed by someone else but pages’ layout was not correct because of the fact that nested tables had been set to different pixel values rather than percentage values. What is more, some of the nested tables had longer width than that of main container table. So I had to replace width of those tables from pixels to percentage to correct the layout issue. You can use following regular expression at the dreamweaver Find dialog box to find all those tags having width set to pixels rather than percentage.

width=”\d+p?x?”

Oh, what if you wanted to search attributes having percentages rather than pixels, very simple regular expression:

width=”\d+%”

Note that you can apply the similar regex for other attributes like height, etc. All you have to do is to change the word width to the desired attribute name.

When you start searching, make sure that “Use Regular Expression” checkbox is checked at the Find dialog.

Dreamweaver Tip: Search & Replace Code Snippets

dw_tip_tagWhile working on a project, I came across a need of deleting a piece of code from a number of pages as per the client’s requirements. Well if I would have done that manually then surely it would have taken a great deal of time, so I thought of creating some regular expression to do the trick and guess what it saved me a lot of time.

.Here is the regex:

<STYLE[^>]*>([\s\S]*?)<\/STYLE[^>]*>

What above means is that delete everything inside the <style></style> tags including the tags themselves. When you do the search-replace using dreamweaver, make sure that you check the Use Regular Expression check box at the Find and Replace dialog box. That’s it !! :)