在Visual Studio代码中调试Ionic 2 - 如何在源文件中命中断点？
Dre*_*nai 6 ionic-framework visual-studio-code ionic2
问题: 断点只在连接的构建文件www\build\js\app.bundle.js中被命中
复制
我启动模拟器,在模拟器上运行应用程序(这非常有效)
在app文件夹文件中设置一些断点,例如
app/pages/list/list.js在VS Code> Debug Pane中,我选择
Attach to running Android on Emulator.调试器运行并连接.
实际结果
- 原始源文件中未触发断点.如果我在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命令完美配合:在Chrome上使用ionic serve,模拟器使用ionic emulate android,以及在设备上(HTC One M8),所以一切都很好到这一点:-)
我安装了最新的Visual Studio Code,并包含了Cordova工具:ext install cordova-tools
我有额外的信息,但是太长时间无法发表评论,所以作为答案.如果需要更新,请提供反馈
在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":
无法在Android#22中的真实移动设备上调试TypeScript源文件
小智 6
好吧，这个问题有点老了，所以从那时起，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，模拟器和真实设备上进行调试！有时我仍然遇到一些问题，但是我希望这会有所帮助。