如何在chrome开发工具中调试ion3 typescript代码

如果您正在使用Visual Studio代码,您可以安装Cordova Tools扩展,这将允许您在设备上进行调试,它是VSCode非常强大的工具,也是我发现开发Ionic 3和Angular的最佳编辑器/ IDE 4个应用程序

程序很直接:

从.vscode目录中删除现有的launch.json文件,然后转到Debugger并点击小齿轮图标。

选择Cordova作为调试器。

扩展将为您实际创建12个配置,我们需要第一个“在设备上运行Android”

现在,这就是我所做的(Mac OS X Sierra),具体取决于系统中安装的组件和组件,这可能会改变。我打开Android Studio,然后连接我的连接到我的Android测试设备的usb电缆。

一旦我看到我的设备列在Android监视器面板中,并且在Logcat选项卡中运行的调试进程,我切换到我的VSCode窗口并在终端中发出:ion cordova android运行,然后等待应用程序在手机上启动。

应用程序在设备中显示后,单击VSCode中的调试按钮,调试器应该附加。

现在您的调试器应该触发您的断点,并让您调试您的类型脚本代码与应用程序运行在测试设备上。

我想你也可以直接从Chrome开发人员工具进行调试,但是可能需要为tsconfig.json中的源地图文件的位置配置一些其他选项。我相当推荐你vscode,因为它有很多有用的功能,它是免费的,还有从Ionic 3片段,自动完成和CLI命令从UI的扩展。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,106评论 25 709
  • 这是我写的一系列文章中的第一篇关于如何利用Web开发技术为iOS和Android系统构建混合应用程序(Hybrid...
    bubuli阅读 2,685评论 3 29
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,155评论 19 139
  • 曾是桃云看处, 晓岸芳菲如舞。 几度翠凋零, 此去湘情何处? 追溯,追溯! 往事如烟似雾。
    陌蝶诗语阅读 377评论 4 2
  • 这个时代变化太快,快得连我们自己的不认识自己了 。 这几天,累得鸟都飞不起来,突然休息了一下,感觉全身没有力气,就...
    逆行一生阅读 237评论 0 0