本文仅先给使用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,仅此而已,如此简单。
相关推荐
控制台.html 为方便起见,添加了 console.html 方法 安装: npm install console.html --savebower install console.html --save在节点中使用: // call once somewhere in the beginningrequire('console.html');...
konsole.table Node.js 的 console.table API polyfill konsole.table在 Node 中添加了console.table支持,因此您的相同代码可以在 Node 和浏览器中运行。 该模块的目的是在浏览器中准确复制console.table API。 该...
连接器脚本扩展了console对象,从而添加了新的方法来通过以下方法将消息发送到远程记录器: console.re.type(); console.re.assert(); console.re.time(); console.re.timeEnd(); console.re.now(); console.re....
babel-plugin-log-deprecated向带有JSDoc @deprecated标记的函数添加console.warn语句。 console.warn添加在函数主体的开头。 转译示例动机babel-plugin-log-deprecated向带有JSDoc @deprecated标记的函数添加...
比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能。在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该...
懒人记录器 客户端的简单日志记录包装器,用于在页面正文中显示console.log,console.warn和console.error消息(减少了打开控制台的次数)。 仅包装日志,警告和错误。... 公关,如果你想添加任何东西。
控制台上的笑话失败 使用console.error()或console.warn()进行...在Jest的setupFilesAfterEnv选项中使用的文件中,添加以下代码: import failOnConsole from 'jest-fail-on-console' failOnConsole ( ) // or wi
对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;而console.log()仅在控制台中打印相关信息,...
主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。 相比alert他的优点是: 1.他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容。 2.console...
在编写代码时,我们常常用 console.log() 的方式将信息在控制台中打印出来以帮助我们进行前端调试,那么console.log打印对象时属性缺失怎么办?下面我们就一起来了解一下解决方法
添加一个console.warn声明至函数利用@deprecated tag注释
)设置yarn add styled-console-log import Log from 'styled-console-log'Log ( 'something warnning message' , 'warn' )Log ( 'something error message\n\nmultiple lines...' , 'error' )Log ( 'something info...
天蓝色函数对数截距 console.log实际上并没有像您在node.js Azure Functions中所期望的那样进行日志记录。 您应该使用context.log并且context不是全局对象,它是Azure函数的参数,因此您必须在整个模块/函数中传递此...
numbers.js 是一个客户端 javascript 库,它向标准 Math 库添加了一些高级数学功能。 图书馆内容 README.md:这个文件。 numbers-xyzjs:数字库的xyz版本,适合开发。 numbers-xyz-min.js:数字库的xyz版本,适用...
题目:写一段代码,扩展 console.log,在每个输出前添加一个自增号,比如:解答:ES6 解法:// ES6 剩余参数// 箭头函数节省代码console
如果需要在Web调试过程中知道代码执行的时间,那么可以通过在JavaScript代码中添加console.time()语句和console.timeEnd()语句来对程序的执行进行计时。以下面这个耗时较长的foo()函数为例: 代码如下: function ...
JS控制台一个简单JavaScript控制台,其中包含标准console.log()函数,并写入HTML页面上的可停靠GUI控制台以进行测试。 要使用控制台,请在您的项目中包含此JavaScript代码,然后调用enableConsole()函数。 也可以...
当您1)忘记从index.js文件中导出内容,然后2)尝试从另一个地方的index.js文件中导入内容时,很难调试错误 在使用默认导入时会遇到这种情况,尽管它必须是常规导入。 ( import foo from './bar'而不是import foo ...
一个基于环境的迷你库,用于替换Node.js应用程序中的console.log。 自动添加日志跟踪和上下文信息。 如果没有DEBUG环境变量,则所有日志均处于静默状态。 安装 npm install --save trace-debug-log 用法 var debug =...
节点定时日志对console.log和console.error进行了小幅修改,在消息之前添加了时间横幅用法 var log = import ( 'node-timed-log' ) ;log . message ( 'My Message' ) ;// will print this to stdout:// >>> [Sun Jul...