React中如何修改DevTools console.log的文件及行号输出？

问题背景 #

我在React应用中编写了一个分析props的hook，满足特定条件时会向控制台打印信息，但当前console.log和console.trace的源文件显示为hook所在的usePrint.ts，而非调用该hook的组件文件（如First.tsx）。

示例代码如下：

Hook代码 #

function usePrint(value: number) {
  // 其他hook逻辑
  console.log('log:', value)
  console.trace('trace:', value)
}

组件调用代码 #

const First: React.FC<{value: number}> = ({value}) => {
  usePrint(value)
  return <span>{value}</span>
}

当前console.log显示usePrint.ts的行号，console.trace虽能看到组件调用位置但输出冗余，需要实现以下任一优化：

1. 修改console.log右侧显示的文件及行号为调用hook的组件文件（如First.tsx:2）；
2. 精简trace输出至仅显示组件调用的一行；
3. 创建自定义的内联源链接。

优化方案 #

方案1：修改console.log的源文件指向 #

通过Error对象捕获调用栈，跳过hook自身的栈帧，提取组件调用的位置信息并输出：

function usePrint(value: number) {
  const err = new Error();
  // 捕获栈帧并排除当前hook的调用记录
  Error.captureStackTrace(err, usePrint);
  // 提取组件调用的栈行并格式化输出
  const componentCallLine = err.stack?.split('\n')[1].trim();
  console.log('log:', value, '\n来源:', componentCallLine);
}

控制台会直接显示组件调用的文件路径和行号，视觉上等价于从组件文件触发的日志。

方案2：精简console.trace输出 #

自定义trace逻辑，仅保留组件调用的关键行：

function usePrint(value: number) {
  const err = new Error(`trace: ${value}`);
  Error.captureStackTrace(err, usePrint);
  // 只提取并输出组件调用的那一行栈信息
  const traceLine = err.stack?.split('\n')[1].trim();
  if (traceLine) {
    console.log(`trace: ${value}\n${traceLine}`);
  }
}

输出结果仅包含核心调用信息，无冗余栈帧内容。

方案3：创建自定义内联源链接 #

利用浏览器控制台对文件路径的识别特性，构造可点击的源链接：

function usePrint(value: number) {
  const err = new Error();
  Error.captureStackTrace(err, usePrint);
  const stackLine = err.stack?.split('\n')[1];
  
  if (stackLine) {
    // 匹配文件路径、行号、列号
    const match = stackLine.match(/\((.*):(\d+):(\d+)\)$/);
    if (match) {
      const [, url, line, col] = match;
      const path = new URL(url).pathname;
      // 输出带样式的可识别链接（Chrome等浏览器会自动解析为可点击跳转的路径）
      console.log('log:', value, `\n${path}:${line}:${col}`);
    }
  }
}

控制台中显示的路径可直接点击跳转到对应的组件源码位置。

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