在 Android 模拟器上运行 Ionic4/Capacitor 时如何调试 .ts 文件

Posted 2023-03-13

【中文标题】在 Android 模拟器上运行 Ionic4/Capacitor 时如何调试 .ts 文件

【英文标题】：How to debug .ts files when running Ionic4/Capacitor on Android emulator

【发布时间】：2019-05-24 04:37:26

【问题描述】：

我正在使用模拟器从 android 工作室运行我的示例 Ionic4/Capacitor 应用程序。

我希望能够调试打字稿源，但是当我像往常一样在 chrome://inspect 中打开时，我无法在任何地方看到 ts 文件，只有 js。

我确实找到了this post，但使用第二个建议，即

为了在 Android 上调试时查看真正的原始 ts 文件，我修补了 angular cli 源代码（我有 @angular/cli 版本 7.0.0）以使用 inline-source-maps webpack 选项。为此，我在 node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js 文件中更改了一行 sourcemaps = ‘eval’; 到 sourcemaps = ‘inline-source-map’;

仍然对我不起作用。如果我们不必在 node_modules 中编辑文件也会更好？

无论如何，由于非常依赖SQLite，我需要在模拟器中运行，但仍然需要调试主应用程序（ts文件）。

【问题讨论】：

发现问题已记录为此here

【参考方案1】：

请使用here 描述的解决方案，然后您将能够使用源映射构建项目。

使用“Chrome远程调试”可以看到和调试类型脚本文件为.js文件，内容会一样。

这个解决方案适用于我从 android studio AVM 模拟器开始的 ionic4/capacitor。