如何调试离子WebApp？

Question

我想在WebStorm中调试我的离子应用程序。 我可以在浏览器中运行应用程序。但我该如何调试？

我试过了：ionic serve --debug这似乎没有触发任何调试？

如何在浏览器中运行时调试应用程序？

Answer 1

有了Chrome，你可以键入铬：//检查在地址栏中 只要您运行的Android应用，您可以检查，当你与“离子运行的Android”或“离子仿真机器人”命令

的Android版本，但是，万亩运行它的应用程序st高于4.3我认为...

Answer 2

根据documentation有几种不同的方式来做到这一点。因为您已经尝试过ionic serve，您还可以尝试下列其中一种吗？

ionic run 
ionic emulate 

run或emulate命令会将应用程序部署到指定的平台设备/仿真器。您还可以通过添加--livereload选项在指定的平台设备上运行实时重新加载。实时重新加载功能与离子服务功能类似，但不是使用标准浏览器开发和调试应用程序，编译后的混合应用程序本身正在监视其文件的任何更改，并在需要时重新加载应用程序。这减少了不断重建应用程序以进行小改动的要求。

希望这得到你去！让我知道它是如何工作的。

Answer 3

浏览器是我做大部分离子调试的地方。你用什么浏览器来进行调试？我使用Chrome并打开DevTools。有一个源选项卡，您可以在其中浏览您的应用程序代码以找到断点的位置。例如，您可以在单击事件中的控制器的代码中设置断点并逐步执行代码。然后，您可以使用控制台执行命令来测试值并检查对象等。您是否无法完成此项工作？或者，DevTools不熟悉？如果不熟悉，则有可用的资源here。如果不工作，断点是否没有被击中？

Answer 4

我发现this tool非常有用，您可以附上您的设备，并获得您的Cordova应用程序（适用于iOS和Android平台）的实时检查员。

Answer 5

有几种方法来调试你的离子应用程序。

• 在浏览器中，您可以捕获控制台中的错误。
• 如果您在模拟器或移动设备上模拟您的应用程序，则可以安装在xcode控制台中显示js错误的cardova插件。所以你可以模拟你的设备并在xcode上捕获错误。

这里是你如何添加插件： 科尔多瓦插件添加https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

Answer 6

另一种方法是使用ionicLab。它适用于我执行以下步骤：安装program并在测试之前准备所有项目依赖项。然后，点击Testing的Serve选项，该选项位于Platform菜单下。项目执行完毕后，点击预览栏的箭头图标。

结果，离子将抛出一个Chrome的窗口，加载的项目，所以，因为它是常用的，你可以使用开发者工具。您应该观看您在项目中使用的JavaScript文件，以便您可以对其进行调试。