首页 文章

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

提问于
浏览 次
7

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

Reproduce

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

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

  • 在VS代码>调试窗格中，我选择 Attach to running Android on Emulator . 调试器运行并连接 .

Actual Result

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

Note on Sourcemaps

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

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

My Setup

这是一个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-framework visual-studio-code ionic2

2 回答

  • 4

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

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

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

    Debugging Ionic 2 Apps in Chrome from Visual Studio Code http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html

    Update ：有关将此功能用于移动设备的详细信息，请参阅@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

    回复于
  • 7

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

    1 - Install the Cordova Tools extension for Visual Studio Code .

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

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

    3 - 如果要使其适用于iOS模拟器或设备，则需要安装iOS Webkit Debug Proxy .

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

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

    回复于

相关问题