如何修改Visual Studio Code调试控制台中console.log的源文件显示？

要让Debug Console显示调用你封装的log函数的文件（比如hello-world.js），而非封装库log.js，可以通过解析调用栈信息实现，以下是两种实用方案：

方案1：日志附加调用者位置（支持VS Code跳转） #

修改log.js，捕获调用栈并提取调用者的文件路径与行号，将其附加到日志内容中。VS Code会自动识别日志中的路径，点击即可跳转至对应位置，同时右侧源文件列会显示调用者文件：

function log(logText) {
  const err = new Error();
  // 排除当前log函数的栈帧，只保留调用者信息
  Error.captureStackTrace(err, log);
  // 从栈信息中提取调用者行（栈结构的第三行对应调用者）
  const callerLine = err.stack.split('\n')[2]?.trim();
  
  if (callerLine) {
    // 匹配文件路径、行号、列号
    const match = callerLine.match(/\((.*):(\d+):(\d+)\)$/);
    if (match) {
      const [, file, line, col] = match;
      console.log(`[${file}:${line}:${col}] ${logText}`);
      return;
    }
  }
  // 解析失败时回退到普通日志输出
  console.log(logText);
}

module.exports = { log };

方案2：仅显示日志内容，源文件列显示调用者 #

如果不想在日志中额外显示路径，只想让右侧源文件列显示调用者文件，可以将日志包装为Error对象打印，同时隐藏栈信息：

function log(logText) {
  const err = new Error(logText);
  Error.captureStackTrace(err, log);
  // 重写toString方法，只返回日志文本
  err.toString = () => this.message;
  // 打印Error对象，VS Code会识别调用者的位置
  console.log(err);
}

module.exports = { log };

使用这种方式时，Debug Console只会显示test，但右侧源文件列会显示调用log函数的hello-world.js。

内容的提问来源于stack exchange，提问作者maxdaniel98