给你的站点加入 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-08-03 19:03:25

给你的站点加入 console.js的相关文章

给你的网站添加 console.js

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

console.js还有浏览器不支持?

今天看到项目中引入了一个插件,我超级惊讶 为什么引入console.js啊? 这个是插件的源码:https://github.com/yanhaijing/console.js 我搜到源作者对这个插件的描述:"console.js is a small javascript library, fix console is undefined" 啥?还能够没有console.log?console.log还能够是undefined? 我真的超级惊讶,我以为所有的浏览器都有console.

chrome console js多行输入

一直以来,Chrome控制台都缺少象IE调试台那样的多行执行模式.  今天意外发现Chrome其实也支持多行模式.默认在Chrome控制台上输入回车后会执行该命令,只需要通过输入Shift+Enter来新建行即可. 

[Node.js] 關於 console.log 的格式化輸出

Node.js 當中的 console.log,除了基本字串的輸出之外,還可以利用 %s.%d.%j 格式化的輸出,就讓我們來看些例子吧! 一.範例1 (字串輸出):console.js console.log('%s', 'This is String.'); console.log('%s %s %s', 'This', 'is', 'String.'); console.log('%s', 'This', 'is', 'String.'); console.log('%s:%s', 'Th

Android 利用WebViewJavascriptBridge 实现js和java的交互(一)

此文出自:http://blog.csdn.net/sk719887916/article/details/47189607,skay 按安卓开发眼下现状来说,开发人员大部分时间还是花在UI的屏幕适配上,使用原生控件开发成本已不是那么理想,鉴于非常多项目和ios基于一致的ui界面.至使安卓UI开发成本花费更大的代价,因此眼下结合Html5和原生控件是解决UI适配的一种非常好的选择.处于APP性能也会用java和native层进行结合.无论是哪种结合.事实上原理都几乎相同,仅仅要依照它的协议来,是

JS乘法口诀表(一行代码)

(function(c){for(i=1;i<=9;i++){var s='';for(j=1;j<=i;j++){s+=i+'X'+j+'='+i*j+'\t';}c.debug(s);}})(console) JS乘法口诀表(一行代码),布布扣,bubuko.com

kendo method:destroy 解决有些在kendo.all.js 的js 库里报错问题

首先,不得不承认,kendo UI 是个不错的东西,特别对于一个前端开发到行不足的程序猿来说.而在我们使用过程中貌似还是会遇到各种奇怪的问题.比如我们会经常用到对一些控件进行重赋值. destroy 在kendo的configration 的Medhod 的描述是: Prepares the widget for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avo

js的MVC结构设计

基于jquery的Deferred,设计出如下MVC架构. 模型model interface.js interface: function(userid){ var dtd = $.Deferred(); $.post("user/service/User.getUserInfo.json",{},function(data){ if(data){ dtd.resolve(data.responseData); }else{ dtd.reject("00001:系统维护,稍

js求数组的最大值--奇技淫巧和笨方法

写这篇文章的原因我目前做的项目很少用到算法,于是这方面的东西自然就有点儿生疏.最近的一次编码中遇到了从数组中获取最大值的需求,当时我不自觉的想到了js的sort()函数,现在想来真是有些“罪过”,当时自己内心还觉得有些得意:“嗯,我用js的内置方法解决了一个通常需要用排序算法才能解决的问题,代码简短,不用去写头疼的遍历和比较,可读性还好...”.内心戏很重,对吧.咳咳,哎,自己还是嫩而且还懒.js内生的sort函数也是用到了排序,详见segmentfault上的这个js内生sort()函数是如何