给你的网站添加 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

时间: 2024-10-11 00:46:26

给你的网站添加 console.js的相关文章

使用prismjs为网站添加代码高亮功能

prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高亮解决方案.科技爱好者博客就是使用了Prism.js 实现漂亮的代码语法高亮功能,本文教你如何在wordpress上快速使用Prismjs实现代码高亮. 一.下载JS和CSS文件并上传到网站根目录. 在Prismjs网站下载页面下载需要的JS和CSS文件,下载页面: http://prismjs.c

网站添加第三方登陆(PHP版)

这两周正在写毕业设计,我做的是一个问答网站.先介绍一下这个网站:这是一个关于大学生在线问答的网站,类似知乎和百度知道,不过功能没有人家多,毕竟这个网站我一个人在做.网站部署在阿里云,网站包括API,Web,IOS,三大模块,现在没有找到人帮忙写安卓,唉...  网站API已经写完了,Web端正在完善开发中,毕业答辩之前会吧基本功能上线,小伙伴们可以访问看看增加人气,不过没有写完,并且看着不咋好看,因为没人写前端,我又不擅长写页面所以有点低端.域名是:http://www.olas.cn 上面说的

给你的站点加入 console.js

本文仅先给使用console调试的FE同学,假设你还不知道console是什么.或者还停留在alert阶段,那就不要浪费时间了,say bay bay! 你是否试程序的过程中用过console.log(***),发如今现代浏览器里执行好好的,到了ie里却出现莫名其妙的错误,你全然不知道为什么. 或者你知道在ie下console不能使用.每次上线前都要凝视掉console的代码,一不小心漏掉了一个. 假设有过上面类似的情况,和我有着相同的烦恼,那恭喜你.console.js就是为你准备的.(假设你

网站图片增强JS插件2.0(兼容IE&amp;FF)

网站图片增强JS插件2.0简单介绍:插件可以增强网站互动能力与外链建设,用户在欣赏图片的同时,把看好的图片直接制作成自己喜欢的样式后通过QQ等传播,增强外链建设,通过用户互动创造外链.(支持:放大缩小.加文字.闪图.叠图.加对话框等等,特别支持GIF动画.)使用方法:复制并粘贴下面的JS代码,放到您的网页的最末端,如果您的网站使用的模板,您也可以复制代码到您的模板,图片编辑功能将会体现在您每一张图片上.<!-- Prcture Editor BEGIN --><script langua

网站添加微信支付功能(小白填坑)

本周的工作安排就是在网站添加支付功能,包括支付宝.微信.财付通等,今天这篇文章先说一下微信支付吧,支付宝的太容易了基本看一下都会了 1.首先准备工作,开通了支付功能的账号,具体怎么开通的我也不熟悉因为我做的时候都是使用开通好的账号(目前微信支付好像只支持商家不支持个人吧?) 2.按照我的性格当然是百度一下啦,但是微信支付的文档说明事例实在是太坑了,完全不是我这种小白可以一下看懂的,在这夸奖一下支付宝,支付宝的事例文档做的太好了基本做的时候没什么坑 准备工作结束开工: 我的开发环境是java,所以

WordPress 网站添加弹窗广告代码

我们平时访问网站.博客时经常会打开网页后看到弹出一个图片广告.如果作为普通访客可能会略有抵触,但是作为站长,我们却十分需要这样的广告来为网站赚钱贴补一下服务器维护费用. 1.修改 JavaScript 代码: var popup = document.getElementById('qgg_popup'); var popup_box = document.querySelector('.qgg_popup_box'); var popup_close = document.querySelec

为网站添加favicon.ico图标

前言 貌似每次都是等到网站快收尾时才做favicon.ico的,这次也不例外.这年代-- 步骤 1.PS制作正方形图标,格式为jpg.jpeg.gif或png. 2.将图标转换为ICO格式,网上有很多在线转换工具,如http://www.ico.la/old.html . 3.将转换好的ICO格式图标放到网站中. 4.网页代码<head></head>之间添加: <link rel="shortcut icon" href="images/fav

板邓:给网站添加favicon图标

网站添加favicon图标可以让浏览器识别我们网站的品牌!所以还是蛮重要的! 第一步:制作你的logo图标favicon.png,然后把图片文件后缀改成favicon.ico:用ftp上传到根目录. 第二步:在网站的模板文件header 添加一段代码即可 <link rel="shortcut icon" href=favicon.ico" type="image/x-icon"

将网站添加到iPhone的主屏幕上

我之前有篇文章介绍过如何将网站固定到Windows的开始菜单,并可以自定义图标.颜色以及Windows推送通知,其实Apple也有类似的功能,通过在网页的head部分添加link标记,在Safari浏览器中我们可以轻易地将网站添加到iPhone的主屏幕,使它看起来就像一个普通的app一样. 要实现该功能很简单,只需要在你网站的根目录下放一张名为"apple-touch-icon.png"的图片即可,像添加favicon一样(将名为"favicon.ico"的图标放在