Answers:
对于后备甚至更好的是:
var alertFallback = true;
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
if (alertFallback) {
console.log = function(msg) {
alert(msg);
};
} else {
console.log = function() {};
}
}
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) }
}
alert
是邪恶的。使用警报时,某些代码的行为会有所不同,因为文档会失去焦点,从而使错误更难以诊断或在以前没有的地方创建错误。另外,如果您不小心console.log
在生产代码中留下了a ,则它是良性的(假设它不会爆炸)-只需静默登录到控制台即可。如果您不小心alert
在生产代码中留下了,则用户体验将受到破坏。
这是我对各种答案的看法。我实际上想查看记录的消息,即使在激发它们时没有打开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的建议。
trap
功能的目的是什么var args = Array.prototype.slice.call(arguments); var message = args.join(' ');
?为什么将参数通过此参数传递给消息?
值得注意的是,console.log
IE8中不是真正的Javascript函数。它不支持apply
or call
方法。
console.log=Function.prototype.bind.call(console.log,console);
解决这个问题。
bind
。
假设您不关心警报的后备情况,这是解决Internet Explorer缺点的一种更简洁的方法:
var console=console||{"log":function(){}};
我真的很喜欢“ 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() {}; }
}
}
/**/console.log("...");
因此很容易搜索和查找临时代码。
对于任何缺少控制台的浏览器,最佳解决方案是:
// 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;
}
}
}());
有很多答案。我对此的解决方案是:
globalNamespace.globalArray = new Array();
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
console.log = function(message) {globalNamespace.globalArray.push(message)};
}
简而言之,如果console.log不存在(或在这种情况下未打开),则将日志存储在全局名称空间Array中。这样,您就不会受到数百万条警报的困扰,并且仍可以在开发者控制台打开或关闭的情况下查看日志。
如果(window.console &&'function'=== typeof window.console.log){ window.console.log(o); }
window.console.log()
即使在IE8中也可能不可用console.log()
?
typeof window.console.log === "object"
,不是"function"
我在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 = {});
}
} ());
我从上面开始使用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,' ');
}
}
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 />'));
}
}
}
我希望这是有帮助的:-)
它可以在IE8中使用。点击F12,打开IE8的开发人员工具。
>>console.log('test')
LOG: test
我喜欢这种方法(使用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
}})();
}
});
这是一个版本,它将在开发人员工具打开时(而不是在关闭时)登录到控制台。
(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)
apply
方法。
在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);
}
};
}
console.log
是有在IE8,但console
直到打开DevTools不创建对象。因此,对的调用console.log
可能会导致错误,例如,如果有机会在打开开发工具之前在页面加载时发生错误。这里的获奖答案将对其进行更详细的说明。