在浏览器中使用 CLI 调试 PhoneGap 应用程序的最佳方式

Question

我使用 PhoneGap 已经有一段时间了，因为我真的不得不急于投入，没有真正的 Web 开发经验，在调试和构建方面我可能会做一些不正确的事情。

首先，我使用 PhoneGap CLI 创建我的项目。 我使用 PhoneGap Build 服务构建我的移动应用程序，我在其中上传了我的 www 文件夹的压缩版本。

为了调试我的应用程序，我在 CLI 中使用 phonegap serve 命令，然后我基本上只是访问 URL 并使用 Chrome 的开发者工具来检查我的 JS 和 HTML。我有时会使用一个名为 Ripple 的 Chrome 扩展程序，它通常可以完成这项工作，但它似乎有点问题（其他选项？）

最近，我将 PushBots 插件添加到我的一个应用程序中，但在调试时我在控制台中遇到了引用错误。如何防止这些类型的错误？

我通常遇到的另一个问题是我收到 cordova.js 或 cordova_plugins.js 的引用错误。我了解，在构建时会将科尔多瓦 javascript 文件动态添加到项目中，但在控制台中仍然很烦人。有什么办法可以解决吗？

我还在我的 PhoneGap 应用程序上添加了 Onsen UI 框架，它有点忙，比如要使用哪些实例化函数来处理 Android 后退按钮。 （我目前使用我的脚本文件夹中的 index.js，我刚刚手动创建。PhoneGap 没有为我创建它）

我通常的文件夹结构是这样的：

www
  >  css - contains CSS for the onsen framework
  >  img - contains some images that are referenced in my code
  >  js - contains jquery, moment and other libraries that I use in my app
  >  lib - 
     > angular - contains angular.js
     > onsen - contains the onsen framework
     > bootstrap
  >  res - contains icons and splash screens
  >  scripts - recently added it myself, with an index.js file
  >  config.xml
  >  index.html
  >  main.html
  >  appController.js
  >  loginController.js
  > .....

插件的错误开始发生在这里。 这是我在 index.html 中引用的脚本文件夹中的 index.js，在引用了已复制到根 (www) 文件夹的 cordova.js 之后，所以我不会一直收到引用错误（我不再为cordova.js得到它，现在我为cordova_plugins.js得到它，所以我猜这个方法不好）

(function () {
"use strict";

myApp.run(['$rootScope', function($rootScope) {
    document.addEventListener('deviceready', function() {

        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        document.addEventListener("backbutton", onBackKeyDown, false);
        window.plugins.PushbotsPlugin.initialize("--------", {"android":{"sender_id":"-------"}});

        // First time registration
        // This will be called on token registration/refresh with Android and with every runtime with iOS
        window.plugins.PushbotsPlugin.on("registered", function(token){
            console.log("Registration Id:" + token);
        });

        window.plugins.PushbotsPlugin.getRegistrationId(function(token){
            alert("Registration Id:" + token);
            console.log("Registration Id:" + token);
        });

        // Should be called once app receive the notification
        window.plugins.PushbotsPlugin.on("notification:received", function(data){
            $rootScope.$emit('onNotificationWhileOpen', data);
            console.log("received:" + JSON.stringify(data));
        });

        // Should be called once the notification is clicked
        window.plugins.PushbotsPlugin.on("notification:clicked", function(data){
            //alert("clicked:" + JSON.stringify(data));
            $rootScope.$emit('onNotificationClick', data);
            console.log("clicked:" + JSON.stringify(data)); 
        });

        window.plugins.PushbotsPlugin.resetBadge();

    }, false);
}]);

...All the necessary functions for the callbacks go here...
} ) ();

插件是由 PhoneGap Build 框架添加的，所以我只需要在 config.xml 文件中指定它们。我想这就是为什么我在 PC 上调试时遇到问题的原因，但是有没有办法解决这个问题？

我是否通过手动添加cordova.js 引用将我的项目弄得一团糟？当我有 Onsen 框架时，真的需要它吗？

乐： 只是想确保我提供尽可能多的信息。这就是我将 Javascript 文件加载到 html 文件中的方式：

<script src="js/onsenui.js"></script>
<script src="js/angular/angular.js"></script>
<script src="js/angular-onsenui.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<!--CONTROLLERS-->
<script src="app.js"></script>
<script src="appController.js"></script>

<script src="helpers.js"></script>

<script src="cordova.js"></script>
<script src="scripts/index.js"></script>

Answer 1

我建议的一件事是在您的代码可能调用 Cordova API 之前将对 cordova.js 的引用进一步移动。像这样：

<!--CONTROLLERS-->
<script src="cordova.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/angular/angular.js"></script> 
<script src="js/angular-onsenui.js"></script>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<!--CONTROLLERS-->
<script src="app.js"></script>
<script src="appController.js"></script>

<script src="helpers.js"></script>