check/log php vars to custom browser window/console

log php vars to custom browser console.php

<?php
/**
 * varLog
 *
 * Logs messages/variables/data to browser by creating custom console/floating window at bottom
 *
 * @param $name
 * @param $data
 * @author Sarfraz
 */
function varLog($name, $data)
{
    $type = ($data || gettype($data)) ? gettype($data) : '';

    $output = $data;
    if (is_array($data) || is_object($data)) {
        $output = '<table style="color:#fff; font-size:14px;" width="100%"><tr><td width="100" style="border:1px solid #ccc; border-bottom:0;"><strong>Propery</strong></td><td width="100" style="border:1px solid #ccc; border-bottom:0;"><strong>Value</strong></td></tr>';

        foreach ($data as $key => $value) {
            $key = preg_replace('~[\r\n]+~', '', $key);
            $value = preg_replace('~[\r\n]+~', '', $value);

            $output .= '<table style="color:#fff; font-size:13px;" width="100%"><tr><td width="100" style="border:1px solid #ccc; border-bottom:0;">' . $key . '</td><td width="100" style="border:1px solid #ccc; border-bottom:0;">' . $value . '</td></tr></table>';
        }
    }

    $js = <<< JSCODE
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        (function () {
            var varlog = document.createElement('div');
            var stylesObject = {
                "position": "fixed",
                "bottom": "5px",
                "right": "0",
                "left": "0",
                "min-height": "100px",
                "height": "auto",
                "width": "75%",
                "margin": "auto",
                "overflow": "auto",
                "background": "rgba(11,22,33, 0.7)",
                "box-shadow": "0 0 5px 5px gray",
                "color":"#fff",
                "padding": "5px",
                "font-family": "tahoma",
                "font-size": "12px",
                "border-radius": "10px",
                "border": "1px solid white"
            };

            // set styles
            for (var style in stylesObject) {
                if (stylesObject.hasOwnProperty(style)) {
                    varlog.style[style] = stylesObject[style];
                }
            }

            // set content
            varlog.innerHTML = '<strong style="font-size:16px;">$name (type: $type)</strong><hr style="margin:0;"><br>';
            varlog.innerHTML += '$output';

            // show now
            document.body.appendChild(varlog);

        }());
    });

    </script>
JSCODE;

    echo $js;
}