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

Question

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

复制

1. 我启动模拟器，在模拟器上运行应用程序（这非常有效）

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

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

实际结果

3. 原始源文件中未触发断点。 如果我在build js文件www\\build\\js\\app.bundle.js设置它们，它们才会被击中

关于Sourcemaps的注意事项

在MyIonic2Project\\.vscode\\launch.json ，“附加到模拟器上运行”配置的设置为：

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

---

我的设置

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

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

这与cli命令完美配合：在使用ionic serve发送的Chrome上，使用ionic emulate android模拟器，以及在设备上（HTC One M8），所以这一切都很好:-)

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

Answer 1

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

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

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

从Visual Studio代码调试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" ionic_source_map_type "ionic_source_map_type": "#inline-source-map" ： 无法在Android＃22中的真实移动设备上调试TypeScript源文件

Answer 2

好吧，这个问题有点旧，所以VSCode从此改变了很多。 它现在几乎就在盒子里，而源图也可以工作。 用Ionic3测试。

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

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

之后，如果您运行“服务器到浏览器（离子服务）”，Chrome上的调试就会起作用。

3 - 如果要使其与iOS模拟器或设备一起使用，则需要安装iOS Webkit调试代理 。

我努力工作这么长时间，我在博客上做了一整篇文章，让其他人更简单： https ： //geeklearning.io/live-debug-your-cordova-ionic-application-with-visual-studio -码/

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