如何在Expo React Native项目中优化日志语句？

方案1：自定义日志工具函数 #

自己实现轻量的日志包装器，既格式化JSON输出，又捕获调用位置信息：

创建src/utils/logger.js：

const formatLogContent = (args) => {
  // 格式化JSON对象，缩进2格
  return args.map(item => {
    if (typeof item === 'object' && item !== null) {
      return JSON.stringify(item, null, 2);
    }
    return item;
  }).join(' ');
};

const getCallLocation = () => {
  // 从调用栈中提取业务代码的位置
  const stackLines = new Error().stack.split('\n');
  // 跳过当前函数和logger函数的栈帧，取第3行
  const callLine = stackLines[2]?.trim();
  if (!callLine) return '';
  // 匹配文件名和行号
  const match = callLine.match(/at\s+(.*):(\d+):(\d+)/);
  return match ? `[${match[1]}:${match[2]}]` : '';
};

const logger = {
  log: (...args) => console.log(`${getCallLocation()} ${formatLogContent(args)}`),
  error: (...args) => console.error(`${getCallLocation()} ${formatLogContent(args)}`),
  warn: (...args) => console.warn(`${getCallLocation()} ${formatLogContent(args)}`),
};

export default logger;

在项目入口（如App.js）全局替换原生console：

import logger from './src/utils/logger';
global.console = logger;

之后调用console.log时，会自动输出带文件名、行号的格式化日志。

方案2：利用Expo远程调试工具 #

开启远程调试后，Chrome DevTools会自动处理日志的行号定位和JSON展开：

• 在Expo Go/自定义Dev Client中摇设备打开开发者菜单
• 选择「Debug Remote JS」，Chrome会自动打开调试面板
• 在DevTools的「Console」标签中，日志会显示完整的文件路径、行号，JSON对象可点击展开查看

这种方式无需额外代码，适合开发阶段快速调试。

方案3：Babel插件自动注入位置信息 #

使用babel-plugin-transform-log-filename在编译阶段给日志添加位置标识：

1. 安装依赖：

npm install babel-plugin-transform-log-filename --save-dev

2. 修改项目根目录的babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['transform-log-filename', {
        format: '[%filename:%line] %message'
      }]
    ]
  };
};

插件会自动修改所有console调用，在日志前拼接文件名和行号，配合Chrome DevTools的JSON格式化能力，就能同时解决两个问题。

内容的提问来源于stack exchange，提问作者M. Maiz Nadeem