React Native中如何在console.log中显示行号及来源文件？

• 启用调试模式
  必须让RN应用处于调试状态：摇设备（或按Ctrl+M/Command+M呼出调试菜单），勾选「Debug JS Remotely」。只有开启调试模式，RN才会将源码行号映射到日志输出，此时日志会通过Chrome DevTools或VSCode调试器展示完整的来源文件和行号。

• 配置VSCode调试环境
  在项目根目录的.vscode文件夹下创建/修改launch.json，添加RN调试配置：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "React Native: Debug",
        "type": "reactnative",
        "request": "launch",
        "platform": "android" // 按需替换为"ios"
      }
    ]
  }
  

  启动VSCode调试会话后，日志会直接在「调试控制台」中显示，附带准确的文件路径和行号。

• 自定义日志工具（无需调试模式）
  用react-native-logs替换原生console.log，配置输出格式包含行号：

  import { logger } from 'react-native-logs';
  
  const log = logger.createLogger({
    transportOptions: {
      format: (level, message) => {
        const stackInfo = new Error().stack.split('\n')[2];
        const sourcePath = stackInfo.match(/\((.*?)\)/)[1];
        return `${level.toUpperCase()} [${sourcePath}] ${message}`;
      }
    }
  });
  
  // 使用示例
  log.info('用户登录成功');
  

  这个方案不依赖调试模式，生产环境也能输出带来源的日志。

• 检查RN版本与依赖
  确保RN版本在0.60以上（新版本对源码映射支持更完善），版本过低建议升级到稳定版；执行npm install或yarn install重新安装依赖，排查是否因依赖缺失导致行号映射失效。

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