如何调试 Ionic WebApp？答案

【问题标题】：How to Debug Ionic WebApp?如何调试 Ionic WebApp？
【发布时间】：2015-02-23 16:48:13
【问题描述】：

我想在 WebStorm 中调试我的 ionic 应用程序。我能够在浏览器中运行该应用程序。但是如何调试呢？

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

当应用在浏览器中运行时如何调试它？

【问题讨论】：

【解决方案1】：

使用 Chrome，您可以在地址栏中输入 chrome://inspect 运行 Android 应用后，您可以在运行时使用“ionic run android”或“ionic emulate android”命令检查应用 p>

不过Android的版本我觉得肯定要高于4.3...

【讨论】：

"支持Android 4.4及以上的Android应用也可以使用Chrome进行远程调试。" - ionicframework.com/docs/guide/testing.html

【解决方案2】：

根据documentation，有几种不同的方法可以做到这一点。既然您已经尝试过ionic serve，您还可以尝试下面列出的其中一种吗？

 ionic run
 ionic emulate

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

希望这能助你一臂之力！让我知道你的效果如何。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

有几种方法可以调试您的 ionic 应用。

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

添加插件的方法如下：科尔多瓦插件添加https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

【讨论】：