Magento中的JavaScript控制台日志记录

Question

我有一个在Magento中自定义的phtml页面。据我所知，Magento使用jQuery和原型库。

例如，如果我需要外部引用jQuery/jQueryUI，我需要使用.noConflict()

但是如果我想使用 $() 或者 jQuery() 来调用 Magento 中的 jQuery 库，我该怎么做呢？

console.log('Hello world');

在Chrome 15控制台中，我没有得到任何响应，也尝试过使用Firebug。

显然，这与Magento JavaScript代码存在某种冲突。有没有解决方案？

- enloz

---

建议：不是要贬低已接受回答者的水平，但来自@sg3s的回答可能是你问题的根源，并且更有可能帮助未来的读者！ - Jordan Gray

Answer 1

为了不在这个网站上使用粗言秽语，我只会说某些人在Magento团队中没有思考或者一些糟糕的代码被加入到了现有版本中...

如果在Magento安装中您的console.log()无法工作，可能是因为以下原因：

在magento/js/varien/js.js的第636行，Magento版本为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() {}
}

这有效地防止console.log()在除了带有Firebug的Firefox之外的任何浏览器中运行。

为了保护IE，但我认为这是解决问题的错误方式，相反人们应该知道他们在记录什么，并在他们不知所措时面对后果。

要修复它，只需确保在尝试console.log()之前先放置delete window['console'];（javascript），或者如果您不介意修改核心文件，请删除上面的代码。

请注意：在生产环境中删除控制台修复程序，因为在IE6-8中删除会失败并引发错误。

- sg3s

---

严重失误，确实如此。delete window['console']; 真是太好用了。向您致敬。 - Bosworth99

如果你只运行以下代码：if (!("console" in window)) {，这个方法不就可以了吗？我很确定Firebug仍然可以工作，而IE不会受到影响，但我会测试一下。 - runamok

这太可怕了——我甚至考虑过可能有其他脚本在重新定义 console.log，然后得出结论没有人会那么愚蠢，对吧？*叹气* 感谢上天我找到了这个答案！ - Jordan Gray

我几年前发布的h5bp解决方案链接已经失效了，这里是新链接。 - sg3s

谢谢，删除 window['console'] 命令解决了使用 jquery.validation 插件时遇到的同样问题。 - Jeff

Answer 2

将此布局更新添加到您的app/design/frontend/default/default/layout/local.xml或您的主题的app/design/frontend/default/default/layout/page.xml文件中的<default>句柄是向所有浏览器在所有页面上添加回控制台对象最干净，最直接的方法。

<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

---

为什么要插入一个iframe，如果你的浏览器有一个舒适的开发者控制台呢？^^ - hakre

它正在插入iframe但没有显示它，它只是用它来获取一个带有未污染的“控制台”变量的干净窗口对象。换句话说，它确实使用了您浏览器的“舒适开发人员控制台”。话虽如此，使用布局更新来完成这项工作相当奇怪，而不是将其放在现有的js文件中或添加一个新文件。很可能您已经拥有至少一些自定义JS文件并正在尝试调试它们，所以您知道如何做到这一点... - user2451227

Answer 3

这是一个快速解决方案。

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

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

本文介绍了如何在Magento网站上恢复使用console.log()函数进行JavaScript调试的方法。在Magento环境下，这个函数通常会被重定义或禁用，但通过添加一些简单的代码即可解决这个问题。

- haifacarina

---

请记住，jQuery不是Magento的一部分，必须显式添加。 - runamok

在domready事件之前，您仍将无法使用控制台。 - user2451227

Answer 4

为什么不先检查Console对象是否已定义？

而不是：

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

你可以写成：

if( typeof console === 'undefined' )

- witherspoon

Answer 5

在文件 js.js 中有以下代码：

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

实际上，如果控制台不是firebug控制台（在firefox中），它会将其停用。因此，在google chrome的内置控制台中，它无法工作。

有两个选项：使用带有firebug的firefox，或删除此代码块。

- Alex Beauchemin

Answer 6

在页面上第一次使用console log之前，您需要做的所有事情。

 delete window['console'];

- Tobias Hagenbeek

Answer 7

在 AlexB 发布后，我使用了这个解决方法。

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

正如您所看到的，is_chrome变量返回true或false，添加!is_chrome可以阻止代码运行。

- Sam Cambridge

Answer 8

在使用Firebug 1.9.0+与Magento 1.6.2.0之前的版本时，在浏览器上使用console.log()将会失败，因为Magento检查console.firebug属性，但出于隐私原因，该属性已被移除。

请参见文件js/varien/js.js：

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

自Magento 1.7.0.0版本以来，整个条件已被注释掉以解决此（和其他）问题。

- Jürgen Thelen

Answer 9

随着Mage核心的最新版本，这不再是一个问题。破坏console.log()的代码现在已经被注释掉了。我不确定它是在哪个版本中被修复的，但是在CE 1.7.0.2中已经修复了。

- kalenjordan