关于在开发中console.log()的管理

Question

在用JS开发一些功能时经常需要打很多的log出来，方便调试，还有些信息根据一定的等级划分需要log出来或者不log出来，我应该怎么弄，才能实现把我在代码中的很多log，按等级划分打印出来呢？如果有比较好的方法，请用简单的代码解释一些，谢谢！

Answer 1

function log(info){
  console.log(info);
}

// 如果你要关闭log
function log(info) {
  return;
  console.log(info):
}

Answer 2

log输出确实是个比较复杂的问题，大部分系统里面都会遇到。我目前接触的系统也有，大致的处理方法如下：

1. 创建一个分级log类

export default class Logger {
    static log(msg, level = 'default') {
        if(Logger[level]) Logger[level](msg)
        else console.log(msg)
    }
    static debug(msg) {}
    static warn(msg) {
        console.warn(msg)
    }
    static error(msg) {
        console.error(msg)
    }
    static info(msg) {
        console.info(msg)
    }
}

1. 将这些log信息保存在内存中

var logs = []

export default class Logger {
    static log(msg, level = 'default') {
        if(Logger[level]) Logger[level](msg)
        else {
            console.log(msg)
            Logger._record(msg, 'default')
        }
    }
    static debug(msg) {}
    static warn(msg) {
        console.warn(msg)
        Logger._record(msg, 'warn')
    }
    static error(msg) {
        console.error(msg)
        Logger._record(msg, 'error')
    }
    static info(msg) {
        console.info(msg)
        Logger._record(msg, 'info')
    }
    
    static _record(msg, level) {
        logs.push({
            time: Date.now(),
            msg: msg,
            level: level,
        })
    }
    static list() {
        return logs
    }
    static clear() {
        logs = []
    }
}

之所以要将这些log信息保存起来，主要是为了将这些数据传输给服务器，让服务器得到这些log信息，对它们进行分析，帮助产品改进。

1. 处理debug的部分

debug信息就是说当你在开发的时候，可以输出来看，但是上了production就看不到了。一般而言，我们都是通过在外部添加一个开关变量，在进行编译或打包的时候，通过传入一个参数来改变变量的值，这样就可以让打包出来的结果不同。

...
static debug(msg) {
    let evn = '[process.evn.NODE_EVN]'
    if(evn !== 'development') return
    console.log(msg)
    Logger._record(msg, 'debug')
}
...

现在的问题是如何让[process.evn.NODE_EVN]成为你编译环境的evn值，在编译环境中编写编译程序，将代码中的字符串[process.evn.NODE_EVN]替换为真正的process.evn.NODE_EVN值。这样，当你编译完之后，就可以得到不同的代码。

1. 使用

import Logger from './logger'

Logger.log('this is a message', 'info')
Logger.debug('this is a debug info')

var logs = Logger.list()
console.log(logs)

同样的道理，不同层级的log方法里面都可以根据实际的开发需求进行调整，通过不同的判断来确定是否要输出到控制台，或者是否要记录到logs列表中去。这是我的思路。

Answer 3

可以参考Chrome 控制台console的用法（学了之后对于调试js可是大大有用的哦

Answer 4

打log怎么就方便调试了？难道不是断点才是更好的调试方案么？

---------------------更新------------------------------

你这个问题问的好，断点可以显示出来的，log全部都行，但是有些时候断点并不好用，不如说循环了10000次，你得不停的点一万下...我直接log出来看一看不是方便多了

断点可以显示出来的，log全部都行
console.log仅仅只是打印最终结果出来，但是断点能让你看到程序裸奔的情况，能够看到当前执行的堆栈、作用域变量等等，这些log是无法显示的。
假设你的项目引入了第三方库或者模块，然后出错了，难道你要手动在模块里面添加log？万一有一天升级模块了咋办？继续加？别人开发的时候发现你添加的log有点反感咋办？(我个人是特别讨厌任意修改公共模块的)

循环了10000次
循环10000次其实也不需要点10000下，假设下，循环在9999次出BUG了，那么log就要输出9999行，控制台多无辜啊囧，而且你确定你log输出来就确定BUG位置了么？
反而像循环里面其实还用不上打断点，看下图

开启右上角，程序运行会自动停留在出bug那行，然后给你输出bug和堆栈信息，再退一步，你真的想自己创建log，看到watch了么？可以自己在上面加，输出断点所在作用域任何表达式的执行结果，和console.log执行环境是一样的

Answer 5

可以看下javascript 在firebug调试时用console.log的方法，希望对你有帮助