如何调试Ionic WebApp？

Question

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

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

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

Answer 1

使用Chrome，您可以在地址栏中输入 chrome：// inspect 只要您运行Android应用程序，就可以在使用“离子运行android ”或“离子模拟android ”命令运行时检查应用程序

然而，Android的版本必须高于4.3我认为......

Answer 2

根据documentation，有一些不同的方法可以做到这一点。您也可以尝试下面列出的其中一项，因为您已经尝试过ionic serve了吗？

 ionic run
 ionic emulate

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

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

Answer 3

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

Answer 4

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

Answer 5

有几种方法可以调试离子应用程序。

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

以下是添加插件的方法： cordova插件添加https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

Answer 6

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

因此，Ionic将为加载的项目抛出一个Chrome窗口，因此，您可以使用开发人员工具，因为它常用。你应该看一下你在项目中使用的javascript文件，以便你可以调试它们。

Answer 7

只需运行：ionic serve -l并从浏览器开发人员选项中进行检查。