Windows系统下Chrome DevTools调试React-Native无法按文件夹分组源文件

你遇到的问题是RN调试时Chrome DevTools Sources面板源文件未按文件夹分组，同时展示全量node_modules文件，可按以下步骤修复：

1. 开启DevTools文件夹分组配置 #

打开调试页面的DevTools面板，按F1打开设置页，找到Sources分类，勾选Group by folder选项。如果已经勾选还是异常，继续后续操作。

2. 修正Metro打包配置 #

在项目根目录找到metro.config.js，替换为以下配置，修正源文件路径映射规则：

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx'],
  },
  projectRoot: __dirname,
  watchFolders: [__dirname],
};

3. 清理缓存重启项目 #

依次执行以下操作：

• 关闭当前运行的Metro服务和APP调试进程
• 执行清理缓存启动命令：npx react-native start --reset-cache
• 新开终端执行启动命令：react-native run-android

4. 过滤node_modules文件（可选） #

如果不需要查看node_modules下的源文件，可在Sources面板左侧右键点击node_modules文件夹，选择Add folder to ignore list，即可隐藏所有node_modules文件，仅展示业务代码的嵌套文件夹结构。

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