JavaScript-如何重新封装一个console.log()?

JavaScript-如何重新封装一个console.log()?

灵芸 发布于 2017-08-08 字数 290 浏览 1456 回复 4

我们在写前端的时候经常用到console.log()方法来调试代码,而且一般开发都是用Firefox或者是Chrom+Firebug来调试,那么console.log()就特别好用,但是在IE下不支持,可是有时候这些调试代码可能忘记删除了,有没有办法用JavaScript重新封装一下console.log()方法,让其在IE下不会因console.log()而报错。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

灵芸 2017-10-17 4 楼

给你个console.log兼容几乎所有浏览器的代码:

 / Tell IE9 to use its built-in console
if (Function.prototype.bind && console && typeof console.log == "object") {
["log","info","warn","error","assert","dir","clear","profile","profileEnd"]
.forEach(function (method) {
console[method] = this.call(console[method], console);
}, Function.prototype.bind);
}

// log() -- The complete, cross-browser (we don't judge!) console.log wrapper for his or her logging pleasure
if (!window.log) {
window.log = function () {
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
// Modern browsers
if (typeof console != 'undefined' && typeof console.log == 'function') {

// Opera 11
if (window.opera) {
var i = 0;
while (i < arguments.length) {
console.log("Item " + (i+1) + ": " + arguments[i]);
i++;
}
}

// All other modern browsers
else if ((Array.prototype.slice.call(arguments)).length == 1 && typeof Array.prototype.slice.call(arguments)[0] == 'string') {
console.log( (Array.prototype.slice.call(arguments)).toString() );
}
else {
console.log( Array.prototype.slice.call(arguments) );
}

}

// IE8
else if (!Function.prototype.bind && typeof console != 'undefined' && typeof console.log == 'object') {
Function.prototype.call.call(console.log, console, Array.prototype.slice.call(arguments));
}

// IE7 and lower, and other old browsers
else {
// Inject Firebug lite
if (!document.getElementById('firebug-lite')) {
// Include the script
var script = document.createElement('script');
script.type = "text/javascript";
script.id = 'firebug-lite';
// If you run the script locally, point to /path/to/firebug-lite/build/firebug-lite.js
script.src = 'https://getfirebug.com/firebug-lite.js';
// If you want to expand the console window by default, uncomment this line
//document.getElementsByTagName('HTML')[0].setAttribute('debug','true');
document.getElementsByTagName('HEAD')[0].appendChild(script);
setTimeout(function () { log( Array.prototype.slice.call(arguments) ); }, 2000);
}
else {
// FBL was included but it hasn't finished loading yet, so try again momentarily
setTimeout(function () { log( Array.prototype.slice.call(arguments) ); }, 500);
}
}
}
}

详细请参考:Complete cross-browser console.log

瑾兮 2017-10-12 3 楼

51JS上有一个详细介绍封装console.log()的方法,你可以参考一下:

这个是当不存在console对象时屏蔽console

 if(!window.console){
window.console={}
window.console.log=function(){return;}
}

http://bbs.51js.com/thread-85425-1-1.html

清晨说ぺ晚安 2017-09-30 2 楼

我分享一个轻量级的小工具,专门为ie下调试js用,Faux Console,使用方法:
包括下面两个文件;

 <style type="text/css">@import 'fauxconsole.css';</style>
<script type="text/javascript" src="fauxconsole.js"></script>

console.log(message) - adds message to the log
console.show() - shows the console
console.hide() - hides the console

泛泛之交 2017-09-08 1 楼

屏蔽console.log()

if (typeof console == "undefined") {
this.console = {log: function() {}};
}

重新封装console.log()

var c = window.console;
window.console = {
log :function(str) {
alert(str);
}
}
// alerts hello
console.log("hello");