JavaScript console log in Magento

Question

I have a custom phtml pages in Magento. As far I know Magento uses jQuery and prototype libraries.

For example, if I need external jQuery/jQueryUI, I need t

Answer 1

This is a quick fix.

jQuery(document).ready(function(){
   window.console = jQuery('<iframe>').hide().appendTo('body')[0].contentWindow.console;
});

Source: http://updownleftright.net/blog/2011/09/javascript-tip-of-the-day-restoring-console-log-on-a-magento-site

Answer 2

In the file js.js there is this code :

if (!("console" in window) || !("firebug" in console))
{
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {}
}

So what it actually does, if the console is not the firebug console (in firefox) , it deactivate it. So in the built in console of google chrome, it doesn't work.

There is 2 options : Use firefox with firebug , or remove this block of code.

Answer 3

Adding this layout update in your app/design/frontend/default/default/layout/local.xml or your theme's app/design/frontend/default/default/layout/page.xml in the <default> handle is the cleanest, most direct way to add back the console object in all browsers on all pages.

<default>
    <reference name="content">
        <block type="core/text" name="fix.console" as="fix.console">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript">
                    iframe                  = document.createElement('iframe');
                    iframe.style.display    = 'none';
                    document.getElementsByTagName('body')[0].appendChild(iframe);
                    window.console          = iframe.contentWindow.console;
                    console.firebug         = "faketrue";                   
                </script>]]></text>
            </action>
        </block>
    </reference>
</default>

Answer 4

Why not check if the Console object is defined first?

Instead of:

if (!("console" in window) || !("firebug" in console))

You could write:

if( typeof console === 'undefined' )

Answer 5

All you need to do before you console log the first time on the page.

 delete window['console'];

Answer 6

After AlexB post I used this work around.

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if (!("console" in window) || !("firebug" in console) && !is_chrome)
{
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

    window.console = {};
    for (var i = 0; i < names.length; ++i)
        window.console[names[i]] = function() {}
}

As you can see, the is_chrome var returns true or false, adding !is_chrome stops the code from running.