js console vConsole

一、参考IE下console.log(“xxx”)报错的解决办法

在项目开发中经常会遇到console.log() 在IE浏览器下js报错的问题，这个报错或许会影响程序的正常功能，所以必须解决它，有两种解决办法：
1、在js代码中不需要写console.log()（不推荐使用）
2、用js自己封装一个console，代码如下：

var localSystem={
    
    /**
     * 封装console 使之兼容IE浏览器
     * 使用时 localSystem.console("xxx")
     * @param message
     */
    console:function(message){
        if( window.console != undefined ){
                console.log(message);
        }
    }
}

为什么会报错呢？因为在IE下没打开IE浏览器控制台的情况下是没有console对象的，所以使用console.log()会报错。

二、参考给你的网站添加 console.js

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

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

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

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

if (console && console.log) {
    console.log(***);
}

或者

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

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

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));

参考
angular中的$log与console.log()到底有什么区别？

$log会检查浏览器是否支持console.log，这样避免浏览器不支持console.log而报异常。
可以开关控制log $logProvider.debugEnabled(false)

三、ts中封装一下

namespace debug {
    export class Logger {
        public static open: boolean = false;
        public static log(message?: any, ...optionalParams: any[]): void {
            if (Logger.open) {
                console.log.apply(console, arguments);
            }
        }
    }
}

四、手机前端开发调试利器 – vConsole

我们在开发手机版网页的时候，常常会出现下面的情景：

(1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log；
(2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。

如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？答案是肯定的。vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。

下载 vConsole 的最新版本
或者使用 npm 安装：
npm install vconsole
引入 dist/vconsole.min.js 到项目中：

<script src="path/to/vconsole.min.js"></script>
<script>
console.log('Hello world');
// 然后点击右下角 vConsole 按钮即可查看到 log
</script>

五、性能测试console.time

参考
https://www.runoob.com/jsref/met-console-timeend.html
node.js 用 console.time 测试性能时的坑

//执行 10 万次所需要的实际：
console.time();
for (i = 0; i < 100000; i++) {
  // 代码部分
}
console.timeEnd();

如果一个页面有多个地方需要使用到计算器，可以添加标签参数来设置。

console.time("Runoob");
for (i = 0; i < 100000; i++) {
  // 代码部分
}
console.timeEnd("Runoob);

const BENCHMARK_TIMES = 1000 * 1;
const number = Math.random() * 1000;

console.time(`parseInt_benchmark(${BENCHMARK_TIMES})`);
for (let i = 0; i < BENCHMARK_TIMES; i++) {
  integer = parseInt(number);
}
console.timeEnd(`parseInt_benchmark(${BENCHMARK_TIMES})`);

js console vConsole