在 Visual Studio 代码中调试 Ionic 2 - 如何在源文件中设置断点？

Question

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

中命中

重现

1. 我启动了模拟器，运行 模拟器上的应用程序（完美运行）

2. 在应用程序文件夹文件中设置一些断点，例如app/pages/list/list.js

3. 在 VS Code>Debug Pane 中，我选择 Attach to running Android on Emulator。调试器 运行 并连接。

实际结果

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

源地图注释

在 MyIonic2Project\.vscode\launch.json 中，在模拟器配置中附加到 运行 的设置是：

"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

Answer 1

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

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

为简洁起见，使用 Ionic CLI 扩展。 VSCode.

的 Chrome 扩展还需要调试器

在 Chrome 中调试来自 Visual Studio 代码 的 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

Answer 2

嗯，这个问题有点老了，所以VSCode从那以后改变了很多。它现在几乎可以正常工作，而且 sourcemaps 也可以工作。使用 Ionic3 测试。

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

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

之后，如果 运行 "Serve to the browser (ionic serve)"，Chrome 上的调试就可以了。

3 - 如果你想让它与 iOS 模拟器或设备一起工作，你需要安装 iOS Webkit Debug Proxy.

我为完成这项工作而奋斗了很长时间，以至于我在我的博客上写了整篇文章以使其对其他人来说更简单：https://geeklearning.io/live-debug-your-cordova-ionic-application-with-visual-studio-code/

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