简体繁体 English

如何在chrome dev工具中调试ionic3 typescript代码

[英]how to debug ionic3 typescript code in chrome dev tool

原文 2017-05-12 15:20:41 4 1 javascript/ angular/ google-chrome/ debugging/ ionic3

I found it is very difficult to debug ionic code in chrome debugger. 我发现在chrome调试器中调试离子代码非常困难。 Actually, it is only angular2 project, but with ionic component. 实际上，它只是angular2项目，但具有离子成分。 When I open chrome dev tool and select "go to file", I can not find the .ts file that I want to debug at all. 当我打开chrome dev工具并选择“转到文件”时，我找不到我想要调试的.ts文件。 This is strange to me. 这对我来说很奇怪。 I can easily debug any angular2 project, why not in ionic? 我可以轻松调试任何angular2项目，为什么不在离子？ I want to use ionic3/angular4 to develop a mobile web. 我想使用ionic3 / angular4来开发移动网络。 Is ionic also using webpact, if so, I think I just need to enable sourcemap and then debug it in chrome dev tool. 离子也使用webpact，如果是这样，我想我只需要启用sourcemap然后在chrome dev工具中调试它。 Have you ever successfully debugged ionic .ts file in chrom? 你有没有成功调试过chrom的离子.ts文件？

1 个解决方案

If you are using Visual Studio Code you can install the Cordova Tools extension, which will let you debug on the device, it is a very powerful tool for VSCode which is also the best Editor/IDE that I have found to develop Ionic 3 and Angular 4 apps. 如果您使用的是Visual Studio Code，您可以安装Cordova Tools扩展，它可以让您在设备上进行调试，它是VSCode的一个非常强大的工具，它也是我发现的最好的编辑器/ IDE，用于开发Ionic 3和Angular 4个应用。

The procedure is straight forward: 程序很简单：

Delete existing launch.json file from .vscode directory and go to Debugger and click on the little gear icon. 从.vscode目录中删除现有的launch.json文件，然后转到Debugger并单击小齿轮图标。
Select Cordova as the debugger. 选择Cordova作为调试器。
The extension will create 12 configs for you actually, we need the first one which is 'Run Android on device' 扩展程序实际上会为您创建12个配置，我们需要第一个“在设备上运行Android”
Now, this is what I do (Mac OS X Sierra), depending on how and what components you have installed in your system this may change. 现在，这就是我所做的（Mac OS X Sierra），具体取决于您在系统中安装的方式和组件，这可能会发生变化。 I open Android Studio and then connect my usb cable which is attached to my android test device. 我打开Android Studio然后连接我的USB测试设备连接的USB线。
Once I see my device listed in the Android Monitor Panel and the debug processes running in the Logcat tab, I switch to my VSCode Window and issue in the terminal: ionic cordova android run, then wait for the app to launch on the phone. 一旦我看到我的设备在Android监视器面板中列出并且调试进程在Logcat选项卡中运行，我切换到我的VSCode窗口并在终端发出：离线cordova android运行，然后等待应用程序在手机上启动。
Once the app is showing in the device, click the debug button in VSCode and the debugger should attach. 应用程序显示在设备中后，单击VSCode中的调试按钮，调试器应该附加。
Now your the debugger should hit your breakpoints and let you debug your typescript code with the app running on your test device. 现在，您的调试器应该点击您的断点，并让您使用在测试设备上运行的应用程序调试您的打字稿代码。

I guess you could also debug directly from the Chrome Developer Tools, but it may require you to configure some more additional options regarding location of your source map files within tsconfig.json. 我想你也可以直接从Chrome开发者工具调试，但可能需要你在tsconfig.json中配置一些关于源地图文件位置的更多附加选项。 I rather recommend you vscode as it has tons of useful features, it's free and also has extensions for Ionic 3 snippets, autocompletion and CLI commands from the UI. 我推荐你使用vscode，因为它有很多有用的功能，它是免费的，还有来自UI的Ionic 3片段，自动完成和CLI命令的扩展。