使用 Webpack 源图调试 Cordova 应用程序

Posted 2023-03-07

【中文标题】使用 Webpack 源图调试 Cordova 应用程序

【英文标题】：Debugging Cordova App with Webpack sourcemaps

【发布时间】：2016-11-10 23:23:27

【问题描述】：

Angular2 + TypeScript + Webpack Cordova 应用程序 - 我希望在使用 Chrome 调试应用程序时能够在我的 android 手机上调试原始 TypeScript 文件。

为了使源地图也能在运行 Webpack 捆绑的 cordova 应用程序的远程移动设备中工作，还需要进行哪些配置？

将按需添加当前配置。

【问题讨论】：

Cordova 不会将您的打字稿文件复制到设备，因为它们不属于 www 文件夹。您可以尝试将带有打字稿文件的文件夹添加到您的 chrome 工作区。

【参考方案1】：

通过使用解决了这个问题： devtool: 'inline-source-map'

【参考方案2】：

我能够让它与 devtool 一起工作：'source-map' 在 chrome 中加载 devtools 后，我转到源选项卡，然后转到子选项卡“文件系统”（除了“页面”子选项卡）

之后我点击添加文件夹到工作区并选择项目下的 www 文件夹和源文件

然后我右键单击一个文件并复制链接地址（应该类似于： file:///fullPathTo/www/16.df2fe1ccd913c5c02ad1.js.map

然后我转到“页面”子选项卡并选择一个未映射的最小化文件并通过右键单击文件显示区域并选择“添加源映射...”手动选择映射文件粘贴上面给出的地址并单击添加.

现在，源映射在源树中出现“webpack”文件夹的 web pack 像往常一样工作。