快速找到 console.log 在项目中的位置

之前写 Pache 的时候,为了做 cluster 的调试,留下了很多 console.log 之类的信息打印,当调试完成后,却不知道它们都放在哪里了,得在项目文件中逐个去找,很麻烦。于是我想到搭配 console.trace 与重写 console.log 方法来定位这些输出语句的位置。

const consoleMethods = ['log'];
consoleMethods.forEach(methodName => {
  console[`_${methodName}`] = console[methodName];
  console[methodName] = function () {
    this.trace(methodName);
    this[`_${methodName}`].apply(this, arguments);
  };
})

当然,除了 console.log 以外,其他的打印方法(诸如 warninfo)也是可以用类似的方式实现。不过要注意的是,console.trace 内部会调用 console.error ,所以会造成循环调用然后卡死的问题。

如何解决卡死的问题

既然 console.trace 会有这样的问题,那么可以试试 throw 的方式,JS 捕获错误的时候也会产生一个调用栈,依靠这个也行。

const consoleMethods = ['error', 'warn', 'info', 'log'];
consoleMethods.forEach(methodName => {
  console[`_${methodName}`] = console[methodName];
  console[methodName] = function () {
    try {
      throw new Error(...arguments);
    } catch (e) {
      e.stack = e.stack.replace(/Error:/, `consoleFinder[${methodName}]`);

      let stackArr = e.stack.split('\n');
      stackArr.splice(1,1);
      e.stack = stackArr.join('\n');

      console._log(e);
    }
  };
})

(终于不用纠结了,虽然满屏的调用栈很恶心)

(过了不久后,我又写了一个比较完备的,欢迎 star