调试器中console.log行号异常：寻求自定义日志函数优化方案

嘿，这个问题我太熟悉了！我当初封装自定义日志函数的时候也踩过一模一样的坑——控制台总是跳去函数定义的行，根本找不到实际调用的位置，别提多闹心了。咱们来一步步解决它：

问题根源 #

当你在自定义函数内部直接调用console.log时，浏览器会把日志的调用栈指向console.log实际执行的那一行（也就是你的logSuc函数定义的第30行），而不是调用logSuc的代码行。要修复这个问题，我们需要让控制台识别到调用自定义函数的位置，而不是函数内部的执行位置。

解决方案 #

方法1：用console.trace快速实现（最简单） #

console.trace会自动输出完整的调用栈，其中最顶部的栈帧就是调用你的自定义日志函数的位置，点击就能直接跳转。我们可以给它加上自定义样式：

const logSuc = (msg) => {
  console.trace(`%c ${msg}`, 'background: green; color: white; display: block;');
};

使用这个方法后，日志会附带调用栈信息，你只需要点击栈中logSuc条目下面的那一行，就能跳转到调用logSuc("return from Prom")的代码行。

方法2：提取调用位置并输出可点击链接（更简洁） #

如果你不想显示完整的调用栈，可以通过Error对象提取调用位置，然后把它作为日志的一部分输出：

const logSuc = (msg) => {
  const error = new Error();
  // 拆分栈信息，获取调用logSuc的那一行（适配Chrome/Firefox主流浏览器）
  const callerStackLine = error.stack.split('\n')[2].trim();
  // 提取文件路径和行号信息
  const [callerInfo] = callerStackLine.match(/(.*:\d+:\d+)/) || [];
  
  console.log(
    `%c ${msg} %c ${callerInfo || '未知位置'}`,
    'background: green; color: white; display: block; padding: 2px;',
    'background: transparent; color: #666; font-size: 12px; margin-left: 10px;'
  );
};

这样日志末尾会显示调用位置，点击这个位置就能直接跳转到对应的代码行，视觉上也更干净。

方法3：模拟原生console.log的行号指向（体验最佳） #

如果你希望完全复刻原生console.log的行号跳转体验，可以利用Error.captureStackTrace来调整调用栈的起始点：

function createStyledLogger(style) {
  const logger = function(msg) {
    // 创建错误对象并捕获栈，跳过logger函数本身
    const err = new Error();
    Error.captureStackTrace(err, logger);
    // 输出日志+错误对象，浏览器会自动解析错误的栈为可点击链接
    console.log(`%c ${msg}`, style, err);
  };
  return logger;
}

const logSuc = createStyledLogger('background: green; color: white; display: block;');

这个方法会在日志末尾附带一个轻量的错误对象，点击错误的栈信息就能直接跳转到调用logSuc的代码行，几乎和原生console.log的体验一致。

为什么你的原始写法不行？ #

不管是第一种箭头函数封装，还是第二种把console.log赋值给变量调用，本质上都是在自定义函数的上下文里执行console.log——浏览器的调用栈追踪会停在console.log执行的位置，也就是你的函数定义行。上面的方法都是通过捕获和调整调用栈信息，让控制台把焦点放在实际调用的代码行上。

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