Ionic开发者小贴士

使用调试器

debugger关键字可用于调试您的应用程序。当大多数浏览器遇到“debugger”语句时，JavaScript的执行停止，您的浏览器将加载其调试器。这可以用于在应用程序中设置“断点”。例如，如果您编写的函数不返回您期望的结果，则可以在函数的第一行添加一个调试器语句：

    function myBrokenFunction() {
      debugger;
      // do other stuff
    }
    

当您的应用程序运行时，它将暂停此函数。从那里，您可以使用浏览器的开发人员工具，一步一步执行Javascript。这允许您准确地查看哪一行或哪一个函数调用导致您的函数中断。

改变平台

默认情况下，当您在浏览器中查看应用程序时，Ionic将应用iOS主题。但是，由于Ionic组件根据自己的平台进行调整，因此可以在Android上查看应用程序的外观。要做到这一点，只需添加?ionicplatform=android到您的应用程序正在服务的网址：http://localhost:8100/?ionicplatform=android。这将改变Ionic在你所在平台看到的样子。

但是，这不会改变在你所在平台浏览器中看到的样子。要改变在你所在平台和设备浏览器中看到的样子，您必须更改用户代理。要做到这一点，打开Chrome的开发者工具，并使用Ctrl+ Shift+ M（Cmd+ Shift+ M在Mac）切换设备模式。

从设备下拉列表中选择设备将更改用户代理以及视窗的尺寸。在此之间添加?ionicplatform=androidURL参数，您可以查看应用程序在大量设备上的外观。

使用iOS模拟器

iOS模拟器允许您在将应用程序运行在实际设备上之前进行测试和调试。在使用之前，我们需要安装Xcode，Apple的IDE。然后，Ionic CLI可以用于在模拟器中运行当前目录的应用程序：

    $ ionic cordova emulate ios -lc    

通过该-lc标志将开启实时刷新和日志控制台输出到您的终端。

您还可以使用Xcode启动模拟器并调试您的应用程序。打开Xcode并打开../path-to-app/platforms/ios/myApp.xcodeproj。在您的应用程序加载后，您将可以运行它，并查看Xcode输出窗口内的所有控制台输出。

使用Genymotion Android模拟器

虽然Android SDK附带了一个库存模拟器，但它可能非常慢，反应迟钝。Genymotion是一个非常快速的替代仿真器，并允许您模拟本地功能，如GPS和相机。

远程调试 - iOS和Safari

Safari可以用来调试连接的iOS设备上的Ionic应用程序。首先，我们需要在连接的设备上启用Web Inspector。Web Inspector可以在下面找到Settings > Safari > Advanced。接下来，前往Mac上的Safari浏览器，在菜单栏Safari > Preferences > Advanced下开启显示开发菜单。连接的设备现在应该显示在开发菜单中。从那里，您可以检查它，并使用Safari的开发者工具调试您的应用程序！

远程调试 - Android和Chrome

Chrome开发者工具是用于调试应用程序的非常强大的工具集。当您使用ionic serve在浏览器中运行应用程序时，可以使用开发者工具来检查元素，查看控制台日志，配置应用程序等等。

除了使用开发者工具在浏览器中调试您的应用程序，开发者工具可用于调试远程Android真机，甚至运行在Genymotion模拟器中的应用程序。首先，我们需要安装adb。一旦安装，如果您的设备已连接，或Android模拟器正在运行，运行以下命令时您应该能够看到您的设备列出：

    $ adb devices    

接下来，在Chrome中chrome://inspect/#devices​检查您的Android设备。注意：您可能需要更改设备上的设置以允许USB调试。从那里，您可以使用Chrome来调试您的应用程序，就像浏览器一样！

远程调试 - VS代码插件

VS代码有一个专用插件来调试用Cordova构建的应用程序。该插件在设备和调试器之间创建桥梁，并允许您直接在编辑器中设置断点。