如何扩展可以接受 args 的 console.log答案

【问题标题】：How to extend console.log which can accept args如何扩展可以接受 args 的 console.log
【发布时间】：2021-05-16 20:08:18
【问题描述】：

我一直在努力扩展console.log 以制作一个彩色的保留堆栈跟踪关于它被调用的位置。我尝试了一些解决方案，但最终达到了这一点：

export const colorizedLog = (
  text: string,
  status: keyof typeof ColorStatus = "dark",
  ...args: any
) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color: ${ColorStatus[status]}`,
    ...args
  );

有了这个小binding，我们将能够保留堆栈跟踪，但这里的问题是我们必须在最后使用一个烦人的额外()，因为返回值是函数本身是bind的结果：

 colorizedLog(
    "Title:",
    "info",
    "This is a working example")();

我阅读过的其他主要资源如下：

const colorizedLog = (text, color= "#40a7e3", ...args) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color:${color}`,
    ...args
  );
colorizedLog("Title:", "#40a7e3", "This is a working example")();

更新：堆栈跟踪

useAppVersion.ts

App.vue

Chrome 控制台

【问题讨论】：

非常有趣。你的构建设置是什么？
@Werlious，只是简单的 vue（基于 webpack 的配置（babel+ts））
如果可以，您能否在代码中添加跟踪信息？ function trace() { try { throw new Error('trace'); } catch(e) { alert(e.stack); } } 然后从每个函数调用 trace() 并发布输出？
@Werlious，谢谢，我以前用过，但问题将是一个不必要的堆栈跟踪列表将被打印，我们真的不需要它们，输出将是被他们污染了。
没问题，但我真的只提到了它，所以我们可以通过一些跟踪来查看范围丢失的位置，因为我不确定 Chrome 或 Typescript 是否负责

标签： javascript typescript bind console.log javascript-debugger

【解决方案1】：

如果您不介意对该堆栈跟踪添加另一个调用，您可以将其包装在另一个隐藏额外 () 的函数中：

const rawColorizedLog = (
  text: string,
  status: keyof typeof ColorStatus = "dark",
  ...args: any
) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color: ${ColorStatus[status]}`,
    ...args
  );
export const colorizedLog = (...args: any) => rawColorizedLog(...args)();

然后你可以只调用colorizedLog(...whatever)，但你会在堆栈中额外调用rawColorizedLog，但我相信你可以为rawColorizedLog 想一个聪明的名字来掩盖额外的调用。冷却器;）

【讨论】：

我们将丢失在 chrome 中单击的堆栈跟踪。

【解决方案2】：

你可以让它立即被调用：

const colorizedLog = (text, color= "#40a7e3", ...args) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color:${color}`,
    ...args
  )();

colorizedLog("Title:", "#40a7e3", "This is a working example");

【讨论】：

这种方法的问题是，我们会丢失堆栈跟踪。
由于 op 已经使用了 lambda，我认为 op 使用绑定很奇怪。这比我的直接解决方案（见comment）更糟糕（在功能和可读性方面）