我正在使用 Firebug 并有一些声明,例如:
console.log("...");
在我的页面。在 IE8(也可能是早期版本)中,我收到脚本错误,提示“控制台”未定义。我试着把它放在我的页面顶部:
<script type="text/javascript">
if (!console) console = {log: function() {}};
</script>
我仍然收到错误。有什么办法可以摆脱错误?
我正在使用 Firebug 并有一些声明,例如:
console.log("...");
在我的页面。在 IE8(也可能是早期版本)中,我收到脚本错误,提示“控制台”未定义。我试着把它放在我的页面顶部:
<script type="text/javascript">
if (!console) console = {log: function() {}};
</script>
我仍然收到错误。有什么办法可以摆脱错误?
尝试
if (!window.console) console = ...
无法直接引用未定义的变量。但是,所有全局变量都是全局上下文的同名属性(window
在浏览器的情况下),访问未定义的属性是可以的。
或者,if (typeof console === 'undefined') console = ...
如果您想避免使用魔法变量window
,请参阅@Tim Down 的回答。
将以下内容粘贴到 JavaScript 的顶部(在使用控制台之前):
/**
* Protect window.console method calls, e.g. console is not defined on IE
* unless dev tools are open, and IE doesn't define console.debug
*
* Chrome 41.0.2272.118: debug,error,info,log,warn,dir,dirxml,table,trace,assert,count,markTimeline,profile,profileEnd,time,timeEnd,timeStamp,timeline,timelineEnd,group,groupCollapsed,groupEnd,clear
* Firefox 37.0.1: log,info,warn,error,exception,debug,table,trace,dir,group,groupCollapsed,groupEnd,time,timeEnd,profile,profileEnd,assert,count
* Internet Explorer 11: select,log,info,warn,error,debug,assert,time,timeEnd,timeStamp,group,groupCollapsed,groupEnd,trace,clear,dir,dirxml,count,countReset,cd
* Safari 6.2.4: debug,error,log,info,warn,clear,dir,dirxml,table,trace,assert,count,profile,profileEnd,time,timeEnd,timeStamp,group,groupCollapsed,groupEnd
* Opera 28.0.1750.48: debug,error,info,log,warn,dir,dirxml,table,trace,assert,count,markTimeline,profile,profileEnd,time,timeEnd,timeStamp,timeline,timelineEnd,group,groupCollapsed,groupEnd,clear
*/
(function() {
// Union of Chrome, Firefox, IE, Opera, and Safari console methods
var methods = ["assert", "cd", "clear", "count", "countReset",
"debug", "dir", "dirxml", "error", "exception", "group", "groupCollapsed",
"groupEnd", "info", "log", "markTimeline", "profile", "profileEnd",
"select", "table", "time", "timeEnd", "timeStamp", "timeline",
"timelineEnd", "trace", "warn"];
var length = methods.length;
var console = (window.console = window.console || {});
var method;
var noop = function() {};
while (length--) {
method = methods[length];
// define undefined methods as noops to prevent errors
if (!console[method])
console[method] = noop;
}
})();
函数闭包包装器将变量范围限定为不定义任何变量。这可以防止未定义console
和未定义console.debug
(以及其他丢失的方法)。
编辑:我注意到HTML5 Boilerplate在其 js/plugins.js 文件中使用了类似的代码,如果您正在寻找(可能)保持最新的解决方案。
另一种选择是typeof
运算符:
if (typeof console == "undefined") {
this.console = {log: function() {}};
}
另一种选择是使用日志库,例如我自己的log4javascript。
要获得更强大的解决方案,请使用这段代码(取自 twitter 的源代码):
// 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;
}
}
}());
在我的脚本中,我要么使用简写:
window.console && console.log(...) // only log if the function exists
或者,如果编辑每个 console.log 行不可能或不可行,我会创建一个假控制台:
// check to see if console exists. If not, create an empty object for it,
// then create and empty logging function which does nothing.
//
// REMEMBER: put this before any other console.log calls
!window.console && (window.console = {} && window.console.log = function () {});