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

Question

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

重现

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

2. 在应用文件夹文件中设置一些断点，例如regedit

3. 在VS Code＆gt; Debug Pane中，我选择了app/pages/list/list.js。调试器运行并连接。

实际结果

1. 原始源文件中未触及断点。如果我在构建js文件Attach to running Android on Emulator
中设置它们，它们才会被击中

有关资源地图的说明

在www\build\js\app.bundle.js中，“附加到模拟器上运行”配置的设置为：

MyIonic2Project\.vscode\launch.json

我的设置

这是一个Ionic 2项目，使用：

创建

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

这适用于cli命令：在Chrome上使用ionic start --v2 -a "My Ionic 2" MyIonic2Project tutorial ，模拟器使用ionic serve，在设备上也是如此（HTC One M8），所以到目前为止一切都很好:-)

我安装了最新的 Visual Studio代码，并包含了Cordova工具：ionic emulate android

Answer 1

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

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

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

从Visual Studio代码调试Chrome中的Ionic 2应用 http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html

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

GitHub上存在一个相关的问题 - break;，这可能值得注意。分辨率是Ionic 2 RC构建系统不再使用gulp。还有关于使用内联源图Closed的进一步评论： TypeScript source files cannot be debugged on a real mobile device in Android #22

Answer 2

嗯，这个问题有点老了，所以从那时起，VSCode发生了很大的变化。现在，它几乎可以立即使用，源映射也可以工作。经过Ionic3测试。

1-安装Visual Studio代码的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，模拟器和真实设备上进行调试！ 有时我仍然遇到一些问题，但希望能有所帮助。