CODEWITHSUNDEEP
javascriptmagentoconsoleloggingconflict
enloz
enloz

Reputation: 5844

JavaScript console log in Magento

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 to use .noConflict()

But if I want to use 

console.log('Hello world');

In Chrome 15 console I got no response, nothing. Also tried with Firebug.

Obviously there is some conflict with Magento JavaScript code. Is there any solution?

Upvotes: 14

Views: 15159

Answers (9)

Tobias Hagenbeek
Tobias Hagenbeek

Reputation: 1213

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

 delete window['console'];

Upvotes: 2

kalenjordan
kalenjordan

Reputation: 2446

This is no longer an issue as of latest version in the Mage core. The code that breaks console.log() is commented out now. I'm not sure exactly in which version it was fixed, but it's fixed as of CE 1.7.0.2.

Upvotes: 1

Jürgen Thelen
Jürgen Thelen

Reputation: 12727

Using console.log() on browsers using Firebug 1.9.0+ with Magento up to 1.6.2.0 will fail, because Magento checks for the console.firebug property, but this property has been removed with Firebug 1.9.0 for privacy reasons.

See the file js/varien/js.js:

if (!("console" in window) || !("firebug" in console))
{
    // :
}

Since Magento 1.7.0.0 this whole condition is commented out to fix this (and other) issue(s).

Upvotes: 1

witherspoon
witherspoon

Reputation: 141

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' )

Upvotes: 2

sg3s
sg3s

Reputation: 9567

So in light of not wanting to smear this site with profanity I will just say someone wasn't thinking in the magento team or somehow some crappy code got into live releases....

If your console.log() is not working on a Magento installation it is likely because of the following:

In magento/js/varien/js.js @ line ~636, Magento ver. 1.6.2.0

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() {}
}

This effectively prevents console.log() from working in any browser other than firefox with firebug.

To protect IE, surely, but I think this is the wrong way to get arround it, instead people should be aware of what they do with their logging and face the consequences when they don't.

To fix it just make sure you put delete window['console']; (javascript) before you try to do a console.log(), or if you don't mind modifying the core files, delete the code above.

Please note: remove the console fix for production, the delete doesn't work in IE6-8 and throws an error

Upvotes: 45

Anthony
Anthony

Reputation: 2411

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>

Upvotes: 3

haifacarina
haifacarina

Reputation: 1210

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

Upvotes: 2

Sam Cambridge
Sam Cambridge

Reputation: 11

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.

Upvotes: 1

Alex Beauchemin
Alex Beauchemin

Reputation: 1181

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.

Upvotes: 2

Related Questions