在 Visual Studio Code 中调试 Ionic 2 - 如何在源文件中命中断点？答案

【问题标题】：Debugging Ionic 2 in Visual Studio Code - How to Hit Breakpoints in Source Files?在 Visual Studio Code 中调试 Ionic 2 - 如何在源文件中命中断点？
【发布时间】：2018-09-25 17:14:19
【问题描述】：

问题： 断点仅在连接的构建文件 www\build\js\app.bundle.js 中被命中

复制

我启动模拟器，在模拟器上运行应用程序（完美运行）
在应用文件夹文件中设置一些断点，例如app/pages/list/list.js
在 VS Code>Debug 窗格中，我选择 Attach to running Android on Emulator。调试器运行并连接。

实际结果

原始源文件中没有命中断点。如果我将它们设置在构建 js 文件 www\build\js\app.bundle.js 中，它们只会受到影响

源地图注意事项

在MyIonic2Project\.vscode\launch.json 中，Attach to Running on Emulator 配置的设置为：

"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false

我的设置

这是一个 Ionic 2 项目，使用以下方法创建：

ionic start --v2 -a "My Ionic 2" MyIonic2Project tutorial

这适用于 cli 命令：在 Chrome 上使用ionic serve，在模拟器上使用ionic emulate android，以及在设备上（HTC One M8），所以到目前为止一切都很好:-)

我已经安装了最新的 Visual Studio Code，并包含了 Cordova 工具：ext install cordova-tools

【问题讨论】：

github.com/Microsoft/vscode-cordova/issues/92 - “我们目前不完全支持 ionic 2。Ionic 2 项目的结构与 ionic 1 不同”
也是由于github.com/Microsoft/vscode/issues/6930
2016 年 7 月更新 - 目前正在处理中。问题：github.com/Microsoft/vscode-cordova/issues/…，拉取请求：github.com/Microsoft/vscode-cordova/pull/173

标签： ionic-framework visual-studio-code ionic2

【解决方案1】：

我有额外的信息，但太长无法发表评论，所以作为答案。如果需要更新，请提供反馈。

来自 Ionic 2 论坛，以下是直接在 VSCode TypeScript 文件中调试的教程的链接。

为了简洁起见，使用 Ionic CLI 扩展。还需要 Debugger for Chrome extension for VSCode。

通过 Visual Studio Code 在 Chrome 中调试 Ionic 2 应用 http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html

更新：有关使其适用于移动设备的详细信息，请参阅@Kinorsi 评论

GitHub 上有一个相关问题 - 一直是 Closed，这可能值得注意。解决方案是 Ionic 2 RC 构建系统不再使用 gulp。还有关于使用内联源映射"ionic_source_map_type": "#inline-source-map" 的进一步评论： TypeScript source files cannot be debugged on a real mobile device in Android #22

【讨论】：

该帖子适用于 chrome。但是如何让它在设备上工作呢？我的 genimotion 模拟器无法让断点工作...
@Kinorsi 我不知道。我在 ionic github 上看到了一个关于移动设备调试 TS 文件的问题，虽然现在没有链接，但值得搜索
我从 cmets 中的帖子作者那里得到了答案：为了让它工作，我必须将 --dev 开关添加到 package.json 中的 ionic:build 脚本，正如这个 GitHub @ 中所建议的那样987654323@:"ionic:build": "ionic-app-scripts build --dev"
@Kinorsi 好东西！
离子 3 怎么样？

【解决方案2】：

嗯，这个问题有点老了，所以 VSCode 从那以后发生了很大的变化。它现在几乎可以正常工作，并且源映射也可以工作。使用 Ionic3 测试。

1 - 为 Visual Studio Code 安装 Cordova 工具扩展。

2 - 通过在调试面板中选择“Cordova”环境生成一个 launch.json 文件。

之后，如果您运行“向浏览器提供服务（离子服务）”，则可以在 Chrome 上进行调试。

3 - 如果您想让它在 iOS 模拟器或设备上运行，您需要安装 iOS Webkit Debug Proxy。

为了完成这项工作，我苦苦挣扎了很长时间，所以我在我的博客上写了一篇完整的文章，让其他人更容易理解：https://geeklearning.io/live-debug-your-cordova-ionic-application-with-visual-studio-code/

有了这个，你可以使用 Ionic livereload 在 chrome、模拟器和真实设备上进行调试！有时我仍然遇到一些问题，但我希望这会有所帮助。

【讨论】：