14

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?

adrien54
  • 1,620
  • 1
  • 26
  • 31
enloz
  • 5,704
  • 9
  • 37
  • 56
  • 5
    Suggestion: without intending disrespect to the accepted answerer, the answer from @sg3s is probably the root of your problem and far more likely to help future readers! – Jordan Gray May 02 '13 at 10:46

9 Answers9

45

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

sg3s
  • 9,411
  • 3
  • 36
  • 52
  • 3
    Seriously misstep, indeed. `delete window['console'];` worked a treat. +1 to you sir. – Bosworth99 Mar 20 '12 at 16:50
  • As a side note, they're close, but shouldn't be checking for firebug. Here is [the console fix used in h5bp](https://github.com/h5bp/html5-boilerplate/blob/master/js/plugins.js) which is cleaner too due to namespacing the code that fixes the console, preventing variable leaks. – sg3s Jul 26 '12 at 20:03
  • Wouldn't this work if you just ran: if (!("console" in window)) { I am pretty sure firebug would still would work and IE would not be affected but I'll test it. – runamok Mar 12 '13 at 17:03
  • @runamok yes, changing it into that would work, however there are more issues with this piece of code, I would recommend replacing it with the h5bp solution. – sg3s Mar 12 '13 at 17:41
  • 1
    This is horrific—I even considered that maybe some other script had redefined `console.log` before concluding that no one would be that stupid, right? *\*sigh\** Thank heavens I found this answer! – Jordan Gray Apr 24 '13 at 00:55
  • The link to the h5bp solution I posted a few years ago not longer works, [here's the new link](https://github.com/h5bp/html5-boilerplate/blob/master/src/js/plugins.js) – sg3s Sep 11 '14 at 09:18
  • thanks for this -- delete window['console'] worked to fix the exact same problem with jquery.validation plugin – Jeff Oct 08 '15 at 20:14
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>
Anthony
  • 2,371
  • 3
  • 20
  • 26
  • Why inserting an iframe if your browser has a comfortable developer console? ^^ – hakre May 16 '14 at 14:59
  • It is inserting the iframe but is not showing it, it is just using it to get a hold of a clean window object with an untainted "console" variable. In other words, it does use exactly the "comfortable developer console" of your browser. That said, using a layout update for it is quite weird instead of putting it in some of the existing js files or adding a new one. Quite likely you already have at least some custom JS files and are trying to debug them, so you know how to do it... – user2451227 May 22 '14 at 14:52
2

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' )
witherspoon
  • 141
  • 1
  • 1
  • 7
2

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

 delete window['console'];
Tobias Hagenbeek
  • 1,212
  • 3
  • 15
  • 30
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.

Alex Beauchemin
  • 1,072
  • 1
  • 17
  • 24
2

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

haifacarina
  • 1,212
  • 1
  • 12
  • 18
1

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

Jürgen Thelen
  • 12,745
  • 7
  • 52
  • 71
1

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.

kalenjordan
  • 2,446
  • 1
  • 24
  • 38
1

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.

Sam Cambridge
  • 11
  • 2