本文仅先给使用console调试的FE同学,如果你还不知道console是什么,或者还停留在alert阶段,那就不要浪费时间了,say bay bay!

你是否试程序的过程中用过console.log(***),发现在现代浏览器里运行好好的,到了ie里却出现莫名其妙的错误,你完全不知道为什么。

或者你知道在ie下console不能使用,每次上线前都要注释掉console的代码,一不小心漏掉了一个。

如果有过上面类似的情况,和我有着同样的烦恼,那恭喜你,console.js就是为你准备的。(如果你用着非常牛逼的自动化工具,能自动过滤掉console的话,往下看下也是会有收获的)

你还在写类似下面这样的代码吗?

if (console && console.log) {

console.log(***);

}

或者

console.log = console.log || function () {}

那么是时候做出改变了,console.js会帮你解决这些问题。

console.js是什么

console.js是一个微型js库,用来修复在不支持或部分支持console的浏览器下,调用console.***出错的问题。

这其实有点类似reset.css或者html5shim的做法,console.js参考了MSDN MDN Firebug三个文档对console的介绍。是其中提到api的超集。

console.js的全部代码如下,这么简单的代码,还是老规矩不解释:

;(function(g) {

'use strict';

var _console = g.console || {};

var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'exception', 'error', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];

var console = {version: '0.1.0'};

var key;

for(var i = 0, len = methods.length; i < len; i++) {

key = methods[i];

console[key] = function (key) {

return function () {

if (typeof _console[key] === 'undefined') {

return 0;

}

Function.prototype.apply.call(_console[key], _console, arguments);

};

}(key);

}

g.console = console;

}(window));

小贴士:你知道最前面的分号是干嘛用的吗?

其实是为了防止自动化工具拼接js时,前面的js的结尾处忘记了加分号,然后拼接出来的代码就挂了。属于防御式编程。

例如a.js和b.js代码如下:

a.js

(function () {

//...

}())

b.js

(function () {

//...

}());

上面的代码被合后就会变为

(function () {

//...

}())

(function () {

//...

}());

这段代码执行时就会报错了,穿插一个小知识点,太小了,无法自成文章。

更多信息请参考console.js的文档。

仅此而已了吗?

我一直在思考还可以做哪些改进,或者功能,仅此而已了吗?当然不是,我能想到的还可以做下面的一些改进。

增加一个对原始console的访问接口,类似jq的noConflict,或者在现在的console上加一个对原来console的引用。

增加对域名的过滤功能,比如我们可能只希望log信息在调试的时候输出,而在线上时不做输出。

目前对不支持的接口仅简单赋值为空函数,可考虑对不支持的接口做模拟,对不支持console功能的浏览器,提供自定义模拟console。

当然这些功能是否应该加入console.js,是个问题,应该思考下,console.js的初衷是什么。。。

不足

对于ie8 9浏览器,在首次打开控制台时,会新建console对象,现在console.js,尽在页面载入时做修复,无法解决这个问题。

但对于打开控制台的人,绝大多数应该不属于用户吧。($ _ $)

总结

console.js 与console就想html5shim于html5,仅此而已,如此简单。

console js刷新页面_Console.js使用说明相关推荐

  1. php中location.reload,js刷新页面location.reload()用法详解

    本文介绍了js刷新页面函数location.reload()的用法,有关js location.reload()函数的例子,有需要的朋友参考下. 在javascript编程中,多使用location. ...

  2. DIV弹窗 JS刷新页面

    关闭弹出页面,刷新父页面 window,self指代的是当前页面 parent,opener指的是当前页面的父页面 js刷新页面 location.href=location.href Code    ...

  3. js刷新页面有哪几种方法

    js刷新页面有哪几种方法 一.总结 一句话总结:location属性的reload方法即可:document.location.reload() 1.页面刷新有哪常见的8种方法? 1,history. ...

  4. js刷新页面方法大全

    js刷新页面方法大全js刷新页面方法大全作者: 字体:[[url=]增加[/url] [url=]减小[/url]] 类型:转载 时间:2008-05-10我要评论本文介绍下,用js刷新当前页面的几种 ...

  5. php js页面刷新,JS刷新页面方法总结

    这次给大家带来JS刷新页面方法总结,JS刷新页面的注意事项有哪些,下面就是实战案例,一起来看一下. JS刷新当前页面的几种方法总结reload 方法,该方法强迫浏览器刷新当前页面 replace 方法 ...

  6. js刷新页面location.reload()用法

    本文介绍了js刷新页面函数location.reload()的用法,有关js location.reload()函数的例子,有需要的朋友参考下. 在javascript编程中,多使用location. ...

  7. JS刷新页面的几种方法

    转载自   JS刷新页面的几种方法 Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 loc ...

  8. java中刷新js函数,js刷新页面location.reload()用法详解

    本文介绍了js刷新页面函数location.reload()的用法,有关js location.reload()函数的例子,有需要的朋友参考下. 在javascript编程中,多使用location. ...

  9. console js刷新页面_浏览器console自动刷新--转

    值班需要监控页面情况,手头也没有专用的监控设备,只能手动刷新.遂度之,解放双手. 代码如下: 1 timeout=prompt("Set timeout (Second):");2 ...

最新文章

  1. 做好准备迎接崭新的BCH了吗?
  2. Linux SSH命令使用大全
  3. 无招胜有招之Java进阶JVM(一)
  4. linux服务器上如何显示工作路径
  5. 批处理之for /r
  6. tago fences v2.5
  7. 微信小程序input输入框控制金额格式
  8. 如何看懂财务报表:(一)如何下载财报
  9. [javaSE] 基本类型(String相关)
  10. 【转】App应用内搜索:移动搜索的新入口
  11. 计算机趣事 英语作文,寒假趣事英语作文(通用10篇)
  12. 60种生活小窍门,分享
  13. 【汇正财经】什么是波段操作?
  14. 消防工程师答题做试题模拟真题微信小程序,margin:25px 50px 75px 100px;
  15. 01组团队项目-Alpha冲刺-6/6
  16. Unity C# 批量处理 命名空间 修改
  17. c语言库函数大全文库,c语言常用的库函数_相关文章专题_写写帮文库
  18. phpstorm无法打开设置的问题
  19. Java 当前时间转农历
  20. 解密中企动力:80余家公司近万人个个都干营销 不骗你

热门文章

  1. matlab中实时脚本与纯代码脚本
  2. ViSP安装与配置VS工程(常见方式-VS2019属性页方法)
  3. GetCurSel总结
  4. 宁夏启动人工智能助推教师队伍建设行动
  5. hihocoder1513 小Hi的烦恼
  6. 再读UNPv1:复习、实践、小结
  7. 网络字节序,主机字节序,地址转换函数
  8. MyBatis源码流程分析
  9. MariaDB主从复制、主主复制
  10. 8.6 GOF设计模式四: 策略模式… Strategy Pattern