IE8中console.log发生了什么?


Answers:


229

对于后备甚至更好的是:


   var alertFallback = true;
   if (typeof console === "undefined" || typeof console.log === "undefined") {
     console = {};
     if (alertFallback) {
         console.log = function(msg) {
              alert(msg);
         };
     } else {
         console.log = function() {};
     }
   }


71
这太不切实际了-如何调试可能会对每次console.log()发出警报的东西来调试网站。如果您的代码中有10多个调用log()怎么办。如果味精是一个对象怎么办?作为起点,沃尔特的答案更有意义。
2013年

7
@Precastic:人们将停止使用浏览器:P
Amogh Talpallikar 2014年

请参阅对Lucky先生的回答的评论
Daniel Schilling 2014年

1
一个不显眼(尽管不完美)的替代方法是设置document.title。至少它不会通过模式警报来锁定浏览器。
brennanyoung

257

console.log仅在打开开发人员工具(F12可以将其切换为打开和关闭)后可用。有趣的是,在打开它之后,您可以将其关闭,然后仍然通过console.log调用发布到它,然后在重新打开它们时就会看到它们。我认为这是一个错误,可能已修复,但我们会看到。

我可能只会使用以下内容:

function trace(s) {
  if ('console' in self && 'log' in console) console.log(s)
  // the line below you might want to comment out, so it dies silent
  // but nice for seeing when the console is available or not.
  else alert(s)
}

甚至更简单:

function trace(s) {
  try { console.log(s) } catch (e) { alert(s) }
}

11
无论哪种方式,您都不应该盲目地调用console.log,因为$ other-browsers可能没有它,并因此而死于JavaScript错误。+1
肯特·弗雷德里克

8
您可能无论如何都要在发布之前关闭跟踪;)
Kent Fredric 2009年

2
在没有打开开发人员工具的情况下不要进行日志记录是有意义的,但是如果不是悄无声息地失败,那就让它抛出异常是这里真正令人困惑的决定。
ehdv

4
我想指出包装这样的console.log的缺点...您将不再看到日志的来源。我发现有时在最顶层使用非常有用的做法是,让每个控制台行都源自代码中的完全相同的位置,这看起来是错误的。
马丁·威斯汀

2
alert是邪恶的。使用警报时,某些代码的行为会有所不同,因为文档会失去焦点,从而使错误更难以诊断或在以前没有的地方创建错误。另外,如果您不小心console.log在生产代码中留下了a ,则它是良性的(假设它不会爆炸)-只需静默登录到控制台即可。如果您不小心alert在生产代码中留下了,则用户体验将受到破坏。
Daniel Schilling

56

这是我对各种答案的看法。我实际上想查看记录的消息,即使在激发它们时没有打开IE控制台,因此也将它们推入console.messages我创建的数组中。我还添加了一个功能,console.dump()以方便查看整个日志。console.clear()将清空消息队列。

此解决方案还“处理”其他控制台方法(我相信所有方法都源自Firebug控制台API

最后,此解决方案采用IIFE的形式,因此不会污染全局范围。fallback函数参数在代码底部定义。

我只是将其放到每个页面都包含的主JS文件中,而不必理会它。

(function (fallback) {    

    fallback = fallback || function () { };

    // function to trap most of the console functions from the FireBug Console API. 
    var trap = function () {
        // create an Array from the arguments Object           
        var args = Array.prototype.slice.call(arguments);
        // console.raw captures the raw args, without converting toString
        console.raw.push(args);
        var message = args.join(' ');
        console.messages.push(message);
        fallback(message);
    };

    // redefine console
    if (typeof console === 'undefined') {
        console = {
            messages: [],
            raw: [],
            dump: function() { return console.messages.join('\n'); },
            log: trap,
            debug: trap,
            info: trap,
            warn: trap,
            error: trap,
            assert: trap,
            clear: function() { 
                  console.messages.length = 0; 
                  console.raw.length = 0 ;
            },
            dir: trap,
            dirxml: trap,
            trace: trap,
            group: trap,
            groupCollapsed: trap,
            groupEnd: trap,
            time: trap,
            timeEnd: trap,
            timeStamp: trap,
            profile: trap,
            profileEnd: trap,
            count: trap,
            exception: trap,
            table: trap
        };
    }

})(null); // to define a fallback function, replace null with the name of the function (ex: alert)

一些额外的信息

该行var args = Array.prototype.slice.call(arguments);arguments对象创建一个数组。这是必需的,因为参数实际上不是Array

trap()是任何API函数的默认处理程序。我将参数传递给,message以便您获得传递给任何API调用(而不仅仅是console.log)的参数的日志。

编辑

我添加了一个额外的数组console.raw来捕获传递给的参数trap()。我意识到args.join(' ')将对象转换为字符串"[object Object]"有时可能是不希望的。感谢bfontaine建议


4
+1这是唯一有意义的解决方案。您希望在哪个世界中看到要显式发送到控制台的消息!
2013年

好答案。真的很喜欢您提到的IIFE文章,这可能是迄今为止我读过的最好的文章之一。您能否详细说明这两行trap功能的目的是什么var args = Array.prototype.slice.call(arguments); var message = args.join(' ');?为什么将参数通过此参数传递给消息?
user1555863

1
@ user1555863我已经更新了答案以回答您的问题,请参阅代码下面的部分。
2013年

1
我认为您的“ console.clear()”函数的第二行应为“ console.raw.length = 0”,而不是“ console.row.length = 0”。
史蒂夫·J

52

值得注意的是,console.logIE8中不是真正的Javascript函数。它不支持applyor call方法。


3
+1这是我今天早上的确切错误。我正在尝试将参数应用于console.log,而IE8却令我讨厌。
Bernhard Hofmann 2012年

[笑话]微软说:“让我们覆盖人们的控制台对象对我们来说是不安全的”:/
汤姆·罗杰罗

1
我一直在使用:console.log=Function.prototype.bind.call(console.log,console);解决这个问题。
mowwwalker

1
IE8没有bind
katspaugh

44

假设您不关心警报的后备情况,这是解决Internet Explorer缺点的一种更简洁的方法:

var console=console||{"log":function(){}};

+1因为我要在匿名函数中确定代码范围,所以将控制台放入这样的变量中对我来说是最好的解决方案。帮助我不干扰其他库中发生的任何其他控制台挂接。
Codesleuth

2
您要在开发人员工具打开后立即开始记录。如果将此解决方案置于长期存在的范围内(例如,将内部函数注册为回调),它将继续使用无提示回退。
贝尼·切尔尼亚夫斯基-帕斯金

+ 1 / -1 = 0:+1,因为解决方案应更多地基于防止console.logs破坏IE中的站点-不用于调试...如果要调试,只需按f12键并打开控制台: )-1,因为您应在覆盖控制台之前检查控制台是否存在。
1nfiniti

一些IE插件将console和console.log定义为空对象,而不是函数。
莉莉丝·里弗

24

我真的很喜欢“ orange80”发表的方法。它很优雅,因为您只需设置一次就可以忘记它。

其他方法要求您做一些不同的事情(调用简单的东西除外) console.log()每次都),这只是在麻烦……我知道我最终会忘记的。

通过将代码包装到一个实用程序函数中,我已经迈出了一步,您可以在javascript的开头,只要在任何日志记录之前,都可以在任何地方调用一次。(我将其安装在公司的事件数据路由器产品中。这将有助于简化其新管理界面的跨浏览器设计。)

/**
 * Call once at beginning to ensure your app can safely call console.log() and
 * console.dir(), even on browsers that don't support it.  You may not get useful
 * logging on those browers, but at least you won't generate errors.
 * 
 * @param  alertFallback - if 'true', all logs become alerts, if necessary. 
 *   (not usually suitable for production)
 */
function fixConsole(alertFallback)
{    
    if (typeof console === "undefined")
    {
        console = {}; // define it if it doesn't exist already
    }
    if (typeof console.log === "undefined") 
    {
        if (alertFallback) { console.log = function(msg) { alert(msg); }; } 
        else { console.log = function() {}; }
    }
    if (typeof console.dir === "undefined") 
    {
        if (alertFallback) 
        { 
            // THIS COULD BE IMPROVED… maybe list all the object properties?
            console.dir = function(obj) { alert("DIR: "+obj); }; 
        }
        else { console.dir = function() {}; }
    }
}

1
很高兴您喜欢它:-)我出于您提到的确切原因使用它-b / c这是一个很好的安全措施。在您的代码中放置一些“ console.log”语句以进行开发,却忘记了以后将其删除,这太容易了。至少如果您这样做,并将其放在使用console.log的每个文件的顶部,您将永远不会因为客户在console.log上浏览器失败而导致网站中断。以前救过我!不错的改进,顺便说一句:-)
jpswain 2011年

1
“这太容易了……忘记删除它们”。我对临时调试日志记录始终会做的一件有用的事情是在代码前添加一个空注释,/**/console.log("...");因此很容易搜索和查找临时代码。
劳伦斯·多尔

8

如果您对所有console.log调用都“未定义”,则可能意味着您仍然加载了旧的firebuglite(firebug.js)。即使它们存在,它将覆盖IE8 console.log的所有有效功能。无论如何,这就是我发生的事情。

检查其他代码是否覆盖控制台对象。


5

对于任何缺少控制台的浏览器,最佳解决方案是:

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

1
这具有明显的问题,即使用console.group或console.GroupCollapsed记录的对象或字符串将完全消失。这是不必要的,应该将它们映射到console.log(如果有)。

3

有很多答案。我对此的解决方案是:

globalNamespace.globalArray = new Array();
if (typeof console === "undefined" || typeof console.log === "undefined") {
    console = {};
    console.log = function(message) {globalNamespace.globalArray.push(message)};   
}

简而言之,如果console.log不存在(或在这种情况下未打开),则将日志存储在全局名称空间Array中。这样,您就不会受到数百万条警报的困扰,并且仍可以在开发者控制台打开或关闭的情况下查看日志。


2
如果(window.console &&'function'=== typeof window.console.log){
    window.console.log(o);
}

您是说window.console.log()即使在IE8中也可能不可用console.log()
LarsH 2013年

这里的问题是typeof window.console.log === "object",不是"function"
同步

2

这是我的“ IE,请不要崩溃”

typeof console=="undefined"&&(console={});typeof console.log=="undefined"&&(console.log=function(){});

1

我在github上找到了这个:

// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function f() {
    log.history = log.history || [];
    log.history.push(arguments);
    if (this.console) {
        var args = arguments,
            newarr;
        args.callee = args.callee.caller;
        newarr = [].slice.call(args);
        if (typeof console.log === 'object') log.apply.call(console.log, console, newarr);
        else console.log.apply(console, newarr);
    }
};

// make it safe to use console.log always
(function(a) {
    function b() {}
    for (var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","), d; !! (d = c.pop());) {
        a[d] = a[d] || b;
    }
})(function() {
    try {
        console.log();
        return window.console;
    } catch(a) {
        return (window.console = {});
    }
} ());

1

我从上面开始使用Walter的方法(请参阅:https : //stackoverflow.com/a/14246240/3076102

我混合了在这里https://stackoverflow.com/a/7967670找到的解决方案,以正确显示对象。

这意味着陷阱功能变为:

function trap(){
    if(debugging){
        // create an Array from the arguments Object           
        var args = Array.prototype.slice.call(arguments);
        // console.raw captures the raw args, without converting toString
        console.raw.push(args);
        var index;
        for (index = 0; index < args.length; ++index) {
            //fix for objects
            if(typeof args[index] === 'object'){ 
                args[index] = JSON.stringify(args[index],null,'\t').replace(/\n/g,'<br>').replace(/\t/g,'&nbsp;&nbsp;&nbsp;');
            }
        }
        var message = args.join(' ');
        console.messages.push(message);
        // instead of a fallback function we use the next few lines to output logs
        // at the bottom of the page with jQuery
        if($){
            if($('#_console_log').length == 0) $('body').append($('<div />').attr('id', '_console_log'));
            $('#_console_log').append(message).append($('<br />'));
        }
    }
} 

我希望这是有帮助的:-)


0

它可以在IE8中使用。点击F12,打开IE8的开发人员工具。

>>console.log('test')
LOG: test

6
在我的情况下,此问题为“未定义”。
acme 2010年

6
正如Lucky先生指出的那样:“ console.log仅在打开开发人员工具后可用(F12可以将其切换为打开和关闭)。”
消音器

0

我喜欢这种方法(使用jquery的doc就绪)...它甚至可以在ie中使用控制台。唯一的不足是,如果在页面加载后打开ie的开发工具,则需要重新加载页面...

考虑到所有功能,它可能会显得有些花哨,但是我只使用log,所以这就是我要做的。

//one last double check against stray console.logs
$(document).ready(function (){
    try {
        console.log('testing for console in itcutils');
    } catch (e) {
        window.console = new (function (){ this.log = function (val) {
            //do nothing
        }})();
    }
});

0

这是一个版本,它将在开发人员工具打开时(而不是在关闭时)登录到控制台。

(function(window) {

   var console = {};
   console.log = function() {
      if (window.console && (typeof window.console.log === 'function' || typeof window.console.log === 'object')) {
         window.console.log.apply(window, arguments);
      }
   }

   // Rest of your application here

})(window)

范围是有限的,可以支持在代码执行过程中打开IE8 DevTools的情况,但是在IE8中不起作用,console.log是一个对象,因此它没有apply方法。
Nishi

0

在html中创建自己的控制台.... ;-)这可能会有所帮助,但您可以从以下内容开始:

if (typeof console == "undefined" || typeof console.log === "undefined") {
    var oDiv=document.createElement("div");
    var attr = document.createAttribute('id'); attr.value = 'html-console';
    oDiv.setAttributeNode(attr);


    var style= document.createAttribute('style');
    style.value = "overflow: auto; color: red; position: fixed; bottom:0; background-color: black; height: 200px; width: 100%; filter: alpha(opacity=80);";
    oDiv.setAttributeNode(style);

    var t = document.createElement("h3");
    var tcontent = document.createTextNode('console');
    t.appendChild(tcontent);
    oDiv.appendChild(t);

    document.body.appendChild(oDiv);
    var htmlConsole = document.getElementById('html-console');
    window.console = {
        log: function(message) {
            var p = document.createElement("p");
            var content = document.createTextNode(message.toString());
            p.appendChild(content);
            htmlConsole.appendChild(p);
        }
    };
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.