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?

回答1:

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

回答2:

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>

回答3:

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.

回答4:

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

回答5:

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

回答6:

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

 delete window['console'];

回答7:

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.

回答8:

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

回答9:

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.