给你的网站添加 console.js
本文仅先给使用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,仅此而已,如此简单。
github地址:https://github.com/yanhaijing/console.js
给你的网站添加 console.js的更多相关文章
- 网站添加第三方登陆(PHP版)
这两周正在写毕业设计,我做的是一个问答网站.先介绍一下这个网站:这是一个关于大学生在线问答的网站,类似知乎和百度知道,不过功能没有人家多,毕竟这个网站我一个人在做.网站部署在阿里云,网站包括API,W ...
- 利用nginx向现有网站添加登录验证功能(不添加修改现有网站代码)
在不改变现有网站代码的前提下加入验证功能: 1.假设现有网站后端nodejs,端口3000,nginx配置如下 server { listen 80; server_name localhost; l ...
- [推荐] 查看网站使用的JS框架
查看各大网站使用的JS框架: 打开:http://oskarkrawczyk.github.com/wtframework/ 在这个中间的图片页面上右击,Add BookMarks.(添加到书签中) ...
- 给你的站点加入 console.js
本文仅先给使用console调试的FE同学,假设你还不知道console是什么.或者还停留在alert阶段,那就不要浪费时间了,say bay bay! 你是否试程序的过程中用过console.log ...
- 为网站添加IE6升级提示
原文 为网站添加IE6升级提示 IE6的是一款横跨十年的浏览器,作为一枚前端,对其已经失望透顶,但其在中国的市场比仍旧很高,中国大量的PC上安装的都是盗版Windows XP,而Windows XP上 ...
- 使用prismjs为网站添加代码高亮功能
prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...
- 网站图片增强JS插件2.0(兼容IE&FF)
网站图片增强JS插件2.0简单介绍:插件可以增强网站互动能力与外链建设,用户在欣赏图片的同时,把看好的图片直接制作成自己喜欢的样式后通过QQ等传播,增强外链建设,通过用户互动创造外链.(支持:放大缩小 ...
- console.js还有浏览器不支持?
今天看到项目中引入了一个插件,我超级惊讶 为什么引入console.js啊? 这个是插件的源码:https://github.com/yanhaijing/console.js 我搜到源作者对这个插件 ...
- 将网站添加到iPhone的主屏幕上
我之前有篇文章介绍过如何将网站固定到Windows的开始菜单,并可以自定义图标.颜色以及Windows推送通知,其实Apple也有类似的功能,通过在网页的head部分添加link标记,在Safari浏 ...
随机推荐
- mysql系列六、mysql创建用户、授权、备份及恢复命令
一.创建用户和授权 下面的操作中,其中someusername为用户名,somepassword为密码,somedbname为数据库名 1.创建用户 create user 'someusername ...
- Bootstrap3.0学习第二轮(栅格系统原理)
详情请查看 http://aehyok.com/Blog/Detail/8.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...
- Jenkins实现定时、顺序编译
1 Jenkins实现定时.顺序编译 l Jenkins 编译流程:更新代码,编译公共服务,编译普通服务(普通服务依赖于公共服务).以下图为例,首先执行 update,再执行 icto_c ...
- [BZOJ3295] [Cqoi2011]动态逆序对(带修改主席树)
题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...
- ubuntu 下抓包
笔记本安装了ubuntu 14.04, 利用笔记本的网卡进行抓包时,需要将网卡配置为monitor模式. (1)关闭无线网卡 sudo ifconfig wlan0 down (2)将无线网卡配置为m ...
- Android手机刘海屏(附工具类)
工具类 根据VIVO.OPPO.华为官方文档,这里整理了一个刘海屏工具类,判断设备是否为刘海屏,其他厂商公布相关方法后也会在此更新. OPPO: /** * OPPO * * @param conte ...
- Android JAR包、Library项目
[JAR包] android引入JAR包,打包成JAR包,打包成Library项目,导入Library项目 (1)项目导入JAR包:1.在项目目录里建立一个libs目录,将外部jar包拷贝在里面.2. ...
- 如何设置font-family
第一部分: 根据font-family的原则,假如客户终端不认识前面的字体,就自动切换到第二种字体,第二种不认识就切换到第三种,以此类推.假如都不能识别就调用默认字体 根据font-family的字体 ...
- LeetCode(27): 移除元素
Easy! 题目描述: 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1 ...
- 《转》理解restful
越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency).高 ...