JavaScript自定义console.log封装如何保留原始调用栈追踪

问题根源 #

控制台的可点击跳转行号，默认抓取直接调用console方法的最内层用户代码栈帧。自定义log函数内部显式调用console.log.call时，直接触发console打印的栈帧就是封装函数本身，因此跳转永远指向封装函数内的console调用行，不会向外查找真实调用位置。
原代码存在冗余：已经通过TS剩余参数...arg接收参数，无需再调用Array.prototype.slice.call(arguments)做数组转换。

最优解（无hack，全现代环境兼容） #

仅需给日志加固定前缀、无额外自定义逻辑（时间戳、日志级别判断、上报等）时，直接用Function.prototype.bind提前把前缀绑定到console.log上即可：

const LOG_PREFIX = '[file.ts]';
// 绑定console上下文与固定前缀，bind返回引擎原生实现的绑定函数
// 控制台解析调用栈时会自动跳过原生函数帧，直接定位到log方法的真实调用位置
const log: (...args: any[]) => void = console.log.bind(console, LOG_PREFIX);

调用log('测试信息', 123, { a: 1 })时，控制台会自动携带前缀，右侧的可点击跳转链接直接指向调用log的代码行，不会跳转到封装逻辑内部。

复杂逻辑场景适配 #

如果需要在打印前增加自定义处理（加时间戳、区分日志级别、生产环境屏蔽打印、日志上报等），bind无法满足需求，可通过栈捕获+隐藏帧的方式实现：

function log(...args: any[]): void {
  const LOG_PREFIX = `[file.ts] ${new Date().toLocaleTimeString()}`;
  // 此处可添加任意自定义逻辑：环境判断、参数序列化、日志上报等
  const finalArgs = [LOG_PREFIX, ...args];

  // V8环境（Chrome、Edge、Electron、Node.js）支持：标记当前log函数为栈隐藏帧
  if (typeof Error.captureStackTrace === 'function') {
    Error.captureStackTrace(log, log);
  }

  Reflect.apply(console.log, console, finalArgs);
}

Firefox、Safari等不支持captureStackTrace的环境，可以解析new Error().stack的字符串内容，提取真实调用的文件、行号信息拼接为可跳转链接，附加到日志内容中即可实现同等效果。

内容的提问来源于stack exchange，提问作者d-_-b