调试Ionic Capacitor Android应用时如何查看原始源文件名

问题说明 #

接手客户的Ionic Capacitor应用已有数月，此前靠其他调试方法规避问题，现在需要查看通用函数调用的堆栈跟踪，却发现无法在Ionic Capacitor中实现预期效果——logcat里显示的文件名始终是webpack打包后的chunk.js文件，而非实际的源代码文件。

示例输出如下：

实际应用中：
http://localhost/static/js/main.3e1e2d46.chunk.js - Line 1 - Msg: SELECT * FROM...
测试应用中：
https://localhost/assets/index-5e189f50.js - Line 98 - Msg: hello world

环境与操作流程 #

• 设备：Mac M1 Pro Max
• 使用版本：Ionic 7.0.0、Capacitor 5.2.3
• 测试操作步骤：
  • 执行ionic start，通过命令行工具创建基础React应用（未使用向导）
  • 执行ionic cap add android
  • 执行ionic cap build android打开Android Studio
  • 执行ionic cap sync android --source-map
  • 执行ionic cap build android --no-open
  • 在Android Studio中重新构建应用，在真机或模拟器上运行（两种环境均无效）

当前现象 #

• logcat输出仍为打包后的静态chunk文件，示例：

  2023-08-20 15:35:36.734 30285-30285 Capacitor/Console       io.ionic.starter                     I  File: https://localhost/assets/index-5e189f50.js - Line 98 - Msg: hello world
  

• 打印堆栈跟踪或发送至Crashlytics时，同样只显示打包后文件路径，源代码文件src/components/ExploreContainer.tsx无法在logcat中显示
• 模拟器测试结果一致，访问chrome://inspect/devices#devices查看控制台，输出内容相同
• 尝试过通过sync命令添加--source-map参数，问题未解决
• 使用npm run dev运行网页版应用时，控制台能正确显示源代码文件名，但网页版无法调试应用中的Android原生元素
• 尝试在package.json的构建脚本中添加craco，但执行ionic cap build android时，仍会执行react-scripts build并创建优化后的生产构建

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