javascript - 如何扩展可以接受 args 的 console.log

Question

我一直在努力扩展 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")();

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

Extending console.log

Macro using babel- kent.c dodds

Webpack Define plugin

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

更新:堆栈跟踪
使用AppVersion.ts

应用程序.vue

Chrome 控制台

Answer 1

您可以立即调用它:

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