Ionic 如何查看原始源文件名时调试离子电容器android应用程序

f2uvfpb9  于 2023-09-28  发布在  Ionic
关注(0)|答案(1)|浏览(145)

我已经使用客户现有的离子电容器应用程序几个月了,并且能够通过使用其他技术来调试软件来解决这个问题,但我有一个问题,我只需要查看常见函数调用的堆栈跟踪,我不知道如何使用离子电容器查看。
问题是在logcat中,文件名显示为捆绑的webpack chunk.js文件,而不是源代码。例如:

with my real app:
http://localhost/static/js/main.3e1e2d46.chunk.js - Line 1 - Msg: SELECT * FROM...
or with my test app:
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”创建了一个基本的新应用程序,并添加了一个“console.trace('hello world');”行到源代码。
它看起来像这样:

ionic start
use cmd line tool (not wizard) to create a React app
ionic cap add android
ionic cap build android (opens android studio up)
ionic cap sync android --source-map
ionic cap build android --no-open
Rebuild within android studio and run on either my device or emulator (neither work)

logcat中的打印输出是捆绑的webpack静态块文件。我花了几天时间试图弄清楚如何让它显示实际的源文件名。我在网上读过无数的文章,听起来像一个类似的问题,但没有解决这个问题。
logcat中的结果是: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,控制台输出是相同的。
我遇到的唯一解决方案与不复制源Map或其他东西有关。假设这是通过添加--source-map与同步命令来修复的,但这似乎对我不起作用。
如果我在web版本中使用“npm run dev”运行这个应用程序,控制台输出中的文件名是正确的(我所期望的)。但是,我无法使用Web版本调试此应用程序。它使用了Android中的一些原生元素,我正在尝试调试。
我还尝试将craco添加到package.json中的构建脚本中。我注意到每当我运行ionic cap build android时,它仍然会打印出来:
react-scripts build正在创建优化的生产构建...

yeotifhr

yeotifhr1#

目前还没有真实的的办法解决这个问题。因为代码无论如何都会被捆绑成块,并且数据会丢失。我建议编写一个更具描述性的日志,在日志本身中包含来自源文件的数据,这就是我所做的。

相关问题