256

根据这篇文章,它是在测试版中,但它不在版本中?

4

17 回答 17

258

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) }
}
于 2009-03-27T15:47:21.203 回答
230

更好的后备是这样的:


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

于 2011-05-11T16:33:17.263 回答
58

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

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

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

我只是将它放在我的主 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这是必需的,因为arguments 并不是真正的 Array

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

编辑

我添加了一个额外的数组console.raw,它完全按照传递给trap(). 我意识到将对象转换为有时可能不受欢迎args.join(' ')的字符串。"[object Object]"感谢bfontaine建议

于 2013-01-09T20:51:28.457 回答
52

值得注意的是,console.log在 IE8 中并不是真正的 Javascript 函数。它不支持applyorcall方法。

于 2009-08-11T18:20:43.893 回答
44

假设您不关心警报的后备,这里有一个更简洁的方法来解决 Internet Explorer 的缺点:

var console=console||{"log":function(){}};
于 2012-01-22T04:07:31.363 回答
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() {}; }
    }
}
于 2011-09-12T01:22:59.013 回答
8

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

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

于 2009-10-20T19:56:09.957 回答
6

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

// 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;
        }
    }
}());
于 2013-06-03T19:29:43.987 回答
4

有这么多的答案。我的解决方案是:

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

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

于 2014-03-20T14:05:56.740 回答
3

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

typeof console=="undefined"&&(console={});typeof console.log=="undefined"&&(console.log=function(){});
于 2013-11-13T02:02:41.120 回答
2
if (window.console && 'function' === typeof window.console.log) {
    window.console.log(o);
}
于 2011-04-01T13:50:18.187 回答
2

我在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 = {});
    }
} ());
于 2013-08-23T11:44:05.617 回答
2

我从上面使用沃尔特的方法(见: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 />'));
        }
    }
} 

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

于 2013-12-06T21:40:29.550 回答
1

我喜欢这种方法(使用 jquery 准备好的文档)......它甚至可以让你在 ie 中使用控制台......唯一的问题是,如果你在页面加载后打开 ie 的开发工具,你需要重新加载页面......

通过考虑所有功能,它可能会更流畅,但我只使用日志,所以这就是我所做的。

//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
        }})();
    }
});
于 2014-04-22T14:38:53.067 回答
1

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

(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)
于 2014-10-02T00:41:10.007 回答
1

在 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);
        }
    };
}
于 2014-10-13T15:34:06.163 回答
0

它适用于 IE8。按 F12 打开 IE8 的开发者工具。

>>console.log('test')
LOG: test
于 2009-03-27T15:40:23.483 回答