如何开启Metro bundler的verbose模式及查看日志？React Native项目卡顿排查

我之前也碰到过Metro bundler卡顿的情况，详细日志绝对是排查这类问题的核心工具，下面给你一步步讲清楚怎么开启verbose模式，以及怎么获取/保存日志：

一、开启Verbose模式 #

有两种常用的方式可以开启Metro的详细日志输出：

1. 命令行启动时直接加参数 #

如果你平时用命令行手动启动Metro，只需要在启动命令后面加上--verbose参数就行：

npx react-native start --verbose

启动后，你会看到终端里输出大量详细信息，包括依赖解析、模块转译、缓存命中情况等，这些信息能帮你定位到底是哪一步拖慢了打包速度。

2. 修改package.json脚本（永久生效） #

如果你的项目是通过package.json里的npm/yarn脚本启动的，比如有个"start"脚本，直接修改脚本内容，把--verbose加进去：

{
  "scripts": {
    "start": "react-native start --verbose"
  }
}

之后运行npm start或者yarn start，Metro就会自动以verbose模式启动，不用每次都手动加参数。

二、Metro Bundler的日志存放位置 #

Metro默认不会自动将日志写入本地文件，不过我们可以通过两种方式获取和保存日志：

1. 手动重定向输出到文件 #

在命令行启动Metro时，用重定向命令把所有日志输出保存到指定文件里，比如：

npx react-native start --verbose > metro-bundler.log 2>&1

这个命令会把所有标准输出和错误输出都写入当前目录下的metro-bundler.log文件里，你可以随时打开这个文件查看历史日志，方便后续分析卡顿原因。

2. IDE终端面板中的日志 #

如果你是通过Android Studio或者Xcode直接运行项目，Metro的日志会实时显示在IDE的终端面板里（比如Android Studio的Run面板、Xcode的Console面板），不过这些日志不会自动保存，需要你手动复制或者用上面的重定向方法导出成文件。

另外，通过verbose日志，你可以重点关注这些内容来排查卡顿：比如是否有大量未缓存的模块需要重复转译、是否存在循环依赖、某些大模块的转译耗时是否过长，这些都是Metro卡顿常见的原因。

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