有没有真正的解决方案来调试Cordova应用程序?

137
我花了最近两天的时间,试图找出如何调试我使用 Cordova 3.2 创建并部署到 Android 2.3 设备上的 HTML5 应用。所有我看到的文章和帖子都只提供了hack方法而非真正的解决方案:( 大多数时候,它们中的任何一个都不适用于我的情况; 调试我的应用程序内部的 CSS 样式和 Angularjs 代码。
到目前为止,我测试过;
debug.phonegap.com
我将脚本注入了 index.html 文件,然后访问了 debug.phonegap.com 生成的网址,但什么也没有发生; 只有一个空白页面。
Weinre 我找到的大多数文章都指向过时的 Github 存储库,其中包含一个 Jar 文件..但是找不到 :(
Edge inspect
它可以显示我在 PC 上浏览的网页,但问题是它使用的是一些其他集成的浏览器(或模拟器),而不是运行 phonegap 应用的那个;因此结果不准确。
Chrome 模拟器
与 Edge inspect 相同;它不能查看随 Android 2.3 一起提供的真实 web-kit v530。
理想的解决方案
完美的解决方案将是 Google Chrome (桌面版) 的扩展程序,使您可以将桌面浏览器切换到 Android 2.3 平台中发现的相同浏览器;没有模拟,没有黑客,只有具有 web-kit v530 的浏览器本身。
不幸的是,这样的解决方案不存在 :( 或者我错了吗?
有什么建议吗?

在PhoneGap中进行调试 · phonegap/phonegap Wiki - agustibr
19个回答

4

您可以使用Intel XDK IDE在模拟器或真实设备上进行开发和调试

我还发现Visual Studio 2015 RC工具对于cordova非常好,它带有ripple模拟器


4

在已安装SDK的Android 4.4及以上版本中:

adb logcat chromium:D SystemWebViewClient:D \*:S

3
您可以通过 "Chrome 远程调试" 功能,通过 USB 线缆从您的计算机远程调试已安装在您手机上的 Cordova Android 应用(您还可以像从您的计算机查看 Web 应用程序一样远程单击 Web 应用程序)。这种方法也可以调试在 Stock Android 浏览器或 Chrome 上查看的 Web 应用程序。
以下是操作步骤:
1. 在 Android 设备上启用开发者模式(转到设置 -> 关于电话 -> 在版本号上点击 7 次)。 2. 通过 USB 线缆连接您的计算机和手机。 3. 启动计算机上的 Chrome 浏览器并导航至 chrome://inspect 并点击欲调试的远程设备旁边的“检查”按钮(在“设备”选项卡下)。或者,右键单击计算机上的 Chrome 内容区域 -> 检查 -> 自定义和控制开发工具(3 个垂直点 - 开发人员工具的右上角) -> 更多工具 -> 远程设备 -> 在左侧的设备下,单击您通过 USB 连接的设备 -> 单击您想要的应用程序的“检查”按钮。 4. 然后单击“Console”,您可以像在普通 Web 应用程序中使用 Chrome 开发工具一样调试 JavaScript。

这个在我的手机上(安卓6)可以工作,但是在我的平板电脑上(note 8 安卓4.4)无法工作。 - Danielo515
这是与Android Web-View相关的问题。安装Crosswalk插件允许我在旧设备上进行此类调试(高达果冻豆版本)。 - Danielo515

3
如果您使用PhoneGap Build,则有启用调试的选项。
对于本地构建,您可以使用npm安装weinre:https://npmjs.org/package/weinre weinre文档链接:http://people.apache.org/~pmuellr/weinre/docs/latest/
还有一种称为Chrome远程调试的东西,但是我不太了解,您可以查看Raymond Camden的文章:http://www.raymondcamden.com/index.cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android Chrome远程调试文档链接:https://developers.google.com/chrome-developer-tools/docs/remote-debugging(如果我理解正确,您需要一台安装了Chrome浏览器的Android设备)也许是最接近您梦想的解决方案?

谢谢提供的信息;我更喜欢使用免费的 Cordova 方法 ;) 现在我已经搞定了(请查看我的答案),谢谢!+1 - numediaweb
1
检查一下我的编辑,看起来Chrome并不远离你的梦想解决方案。 - QuickFix
请注意,我使用的设备运行的是 Android 2.3,而 Chrome 远程调试需要 Android 4.4 或更高版本。但感谢 "QuickFix",现在我已经让一切正常了..看看我的教程吧 ;) - numediaweb

2
如果您正在使用Cordova 3.3或更高版本,并且您的设备运行Android 4.4或更高版本,则可以使用“在Chrome上远程调试Android”。完整的指令在这里:https://developer.chrome.com/devtools/docs/remote-debugging 简而言之:
- 使用USB电缆将设备连接到桌面计算机 - 在设备上启用USB调试(在我的设备上,这在“设置”>“更多”>“开发人员选项”>“USB调试”下) - 或者,如果您正在使用Cordova 3.3+并且没有带有4.4的物理设备,则可以使用使用Android 4.4+的模拟器,在桌面计算机上通过模拟器运行应用程序。
运行您的Cordova应用程序,然后在桌面计算机的Chrome浏览器中输入chrome:// inspect /#devices。您的设备/模拟器将显示在计算机连接的任何其他识别设备旁边,并在您的设备下方,有关正在设备/模拟器上运行的Cordova“WebView”的详细信息(基本上是您的Cordova应用程序),(Cordova的工作方式基本上是在您的设备/模拟器上创建一个“浏览器”窗口,在其中有一个“WebView”,即您的运行HTML / JavaScript应用程序)
单击“WebView”部分下面的“检查”链接,您将看到列出您的设备/模拟器的Chrome开发人员工具。这使您能够调试应用程序。
选择Chrome开发人员工具的“源”选项卡,以查看您在设备/模拟器上运行的Cordova应用程序的JavaScript。您可以在JavaScript中添加断点,以便调试代码。
另外,您可以使用“控制台”选项卡查看任何错误(将以红色显示),或者在控制台底部,您将看到一个“>”提示符。在此处,您可以键入任何变量或对象(例如DOM对象),以查看当前值,并将该值显示出来。

2
使用Android设备监视器
Android设备监视器随android sdk一起打包,您之前应该已经安装了它。在设备监视器中,您可以查看整个设备的日志、异常、消息等。这对于调试应用程序崩溃或其他类似问题非常有用。要运行此操作,请转到android sdk中的tools/文件夹“/var/android-sdk-linux/tools”。然后运行以下命令:
chmod +x monitor
./monitor

如果您使用的是Windows系统,可以直接打开monitor.exe文件。在“LogCat”下方有一个选项卡,您将会看到所有与设备相关的信息。这里包括Chrome检查设备中不可见的Android设备异常信息。请务必使用logcat选项卡中的“+”符号创建过滤器,以便只查看您的应用程序的消息。
来源: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

对于Linux用户而言,根据您的SDK安装方式,它可能也可以在~/Android/Sdk/tools/monitor中找到,或者尝试输入“monitor”。 - Strixy

2
你也可以使用Chrome调试你的HTML5应用程序。
我创建了一个.bat文件以打开Chrome的调试模式。
cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

1
谢谢,但我发现最好的方法是使用weinre来调试设计,并使用设备本身集成的webkit浏览器! - numediaweb
1
我同意这一点,尽管Ripple可以给你一个发布后的平均外观,这很好,但有时候模拟器和真实设备之间会有差异,主要是因为模拟器使用的是你正在运行的Web浏览器引擎,而在某些情况下与你的设备不同。因此,我通常同时使用Ripple来设计UI和Weinre来测试当某些东西不按预期工作时的行为。 - Juan Carlos Alpizar Chinchilla

1
我是一名有用的助手,可以为您翻译文本。

我很喜欢weinre!如何使用它:

首先,在您的index.html中添加(确保在此之前设置了app.settings.debugUrl):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

然后:

基于http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/


Weinre不是调试器,它只允许DOM检查,您无法调试js甚至观察控制台消息。 - Bogdan Mart

1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接