是否有一个真正的解决方案来调试科尔多瓦应用程序

在过去的两天里，我一直在想如何调试一个我用 Cordova 3.2创建并部署到 Android 2.3设备上的 HTML5应用程序。我看到的所有文章/帖子都提供了一些技巧，而不是真正的解决方案: (大多数时候，它们都不适用于我的案例; 调试我的应用程序中的 css 样式和 Angularjs 代码。.

到目前为止，我测试;

Debug.phonegap.com

我将脚本注入到 index.html文件中，然后访问生成的 debug.phonegap.com URL，但是什么都没有发生，只有一个空白页面。

Weinre

我发现的大多数文章都指向包含 Jar 文件的过时 Github 存储库。.但是没有找到:

边缘检查

它的工作和显示的网页，我正在浏览的 PC 内的移动。.但问题是，它使用的是其他集成浏览器(或模拟器) ，而不是运行手机应用程序的浏览器; 因此结果并不准确。

Chrome 模拟器

与 Edge 检查相同，它不允许查看 Android 2.3附带的真正的 web-kit v530。

梦境解决方案

完美的解决方案是 Google Chrome (桌面)的扩展，它可以让你把桌面浏览器切换到 Android 2.3平台上的浏览器; 没有模拟，没有黑客，只有浏览器本身的 web-kit v 530。

不幸的是，这样的解决方案并不存在: (或者我错了?)？

有什么建议吗？

133921 次浏览
小开

如果使用 phonegap 构建，则有一个启用调试的选项。

对于本地构建，可以使用 npm: https://npmjs.org/package/weinre安装 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 远程调试的文档: http://developers.google.com/chrome-developerstools/Docs/remote-debug”rel = “ nofollow”> https://developers.google.com/chrome-developer-tools/Docs/remote-debugging (如果我理解正确，你需要一个安卓设备与铬作为默认浏览器) 也许是最接近你梦想的解决方案？

小开
最佳答案

通知

这个答案是旧的(2014年1月) ，许多新的调试解决方案从那时起可用。

我终于把它修好了！使用 weinre 和 cordova (没有 Phonegap 版本) ，为了给未来的开发人员节省麻烦，他们可能会面临同样的问题，我做了一个 YouTube 教程;)

小开

你也可以用 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
小开

如果你可以使用 Android 4.4 + 设备，那么你甚至可以在应用程序的内部 WebView 上使用 Chrome 远程调试。这是一个比 Weinre 好得多的调试器，但关键是使用最新的 Android 版本。

最近的 Cordova 构建只要是调试构建(它在—— release 构建中是关闭的) ，就会自动启用这种调试。

小开

据我所知，在2.2到4.3版本的 Android 平台上，唯一能够在 Cordova 应用程序中进行真正调试的高效工具是 混蛋。Weinre是一个检查器，而不是调试器。JsHybugger 检测您的代码，允许您在 android WebView 中进行调试。

小开

只是想补充一下，你可以使用 基因运动调试 Android 应用程序。它比普通的 Android 模拟器快多了。

小开

你试过 “ GapDebug”吗? 它是免费的。

它似乎集成了 Safari Webkit 检查器和 Chrome 开发工具的版本，提供了在 OS X 和 Windows 上的集成调试体验。

小开

另一个选项是 Visual Studio，它有 对调试 Cordova 应用程序的预发布支持:

统一调试经验 。经常跨平台开发 需要不同的工具来调试每个设备、模拟器或 不同的工具意味着不同的工作流和丢失 每次切换设备时，都要提高工作效率 可以对所有部署使用相同的世界级调试工具 目标，包括安卓模拟器 Windows，附加安卓 设备、 iOS 设备和模拟器，以及 Apache Ripple 模拟器。

既然微软已经发布了 免费的 VisualStudio 社区版，您可以免费尝试一下。您需要同时下载 VisualStudio 和 用于 Apache Cordova 的 Visual Studio 工具。

小开

对我来说，最好的办法就是附上 Chrome 调试器。

为此，在模拟器或设备中运行应用程序(使用 $cordova 模拟器)

然后，打开谷歌浏览器，进入 chrome://inspect/

你会看到一个运行应用程序的列表。你的应用程序应该在那里。点击“检查”。

一个新的窗口将用开发工具打开。在那里你可以点击“控制台”来检查错误

小开

我喜欢 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>

然后:

  • Install: sudo npm install -g weinre安装: sudo npm install -g weinre
  • 运行: weinre --boundHost -all-
  • 打开浏览器: http://localhost:8080/client/#anonymous
  • 在打开应用程序时观察目标的出现

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

小开

如果你的应用程序运行 Cordova 3.3 + ，而你的设备运行 Android 4.4 + ，那么你可以使用 Chrome 远程 Webview 调试来调试你的 Cordova 应用程序。

要做到这一点，必须首先在手机上启用 USB 调试。

然后打开“检查设备”选项卡。在 Chrome 中，转到 设定 > 更多工具 > 检查设备。

如果你在你的设备上启动你的应用程序，当它连接到你的电脑时，Webview 应该出现在设备列表中。点击你的 Webview 的“检查”链接，应该会出现一个 Webview 的调试工具。

这里有一篇文章详细解释了如何做到这一点: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

小开

机器人:

您只需要启用“ USB 远程调试器”在您的机器人设备和插头与 USB 电缆。然后在设备中打开应用程序。Chrome 会检测到远程浏览器，你可以看到控制台的方式与你在本地使用 Chrome 时看到控制台的方式相同。

在 Chrome 浏览器中使用这个链接: chrome://inspect/#devices(你必须把它粘贴到导航栏中)。

如果你的应用程序在设备中崩溃，你只需要在浏览器中查看控制台的日志，看看会发生什么。您还可以添加功能、更改变量和覆盖函数，其方式与使用本地浏览器相同。

阅读 这篇文章以获得更多关于要采取的步骤的信息。

这只适用于运行 Android 4.4 + 的设备。

IOS:

在 iOS 上使用 Safari，遵循以下步骤:

在你的 iOS 设备中，进入设置 > Safari > 高级 > Web 检查器以启用 Web 检查器

2. 在 iOS 设备上打开 Safari。

3. 通过 USB 连接到你的电脑上。

4. 在电脑上打开 Safari。

在 Safari 的菜单中，点击“开发”，查找设备的名称。

6. 选择要调试的选项卡。

enter image description here

小开

可以使用 IntelXDKIDE 在模拟器或实际设备上开发和调试

我还发现 VisualStudio2015RC 科尔多瓦工具非常好，它的涟漪模拟器

小开

在安装了 Android 4.4 + w/SDK 的情况下:

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

如果你是 使用 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://review/# 设备
  • 你的设备/模拟器将和其他已知的连接到你电脑的设备一起显示，在你的设备下面将有 Cordova‘ WebView’(基本上是你的 Cordova 应用程序)的详细信息，它运行在设备/模拟器上(Cordova 的工作方式是它基本上在你的设备/模拟器上创建一个‘浏览器’窗口，其中有一个‘ WebView’是你正在运行的 HTML/JavaScript 应用程序)
  • 单击“ WebView”部分下的“检查”链接，在那里您可以看到列出的设备/模拟器。这就带来了现在允许你调试应用程序的 Chrome 开发工具。
  • 选择 Chrome 开发工具的“源代码”选项卡，查看设备/模拟器上的 Cordova 应用当前正在运行的 JavaScript。您可以在 JavaScript 中添加允许您调试代码的断点。
  • 此外，您可以使用“控制台”选项卡来查看任何错误(将以红色显示) ，或者在控制台的底部您将看到一个“ >”提示符。在这里，你可以输入任何变量或对象(例如 DOM 对象) ，你想检查的当前值，并显示该值。
小开

下面是使用 PhonegapBuild 的解决方案。将以下内容添加到 config.xml 中，以便能够使用 Chrome Remote Webview Debug 进行检查。

首先，确保 widget 标记包含 xmlns: android = “ http://schemas.android.com/apk/res/android”

<widget
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="me.app.id"
version="1.0.0">

然后添加以下内容

<gap:config-file platform="android" parent="/manifest">
<application android:debuggable="true" />
</gap:config-file>

我在 Nexus5 Phonegap3.7.0上也能用。

<preference name="phonegap-version" value="3.7.0" />

在 Phonegap Build 编写应用程序，安装 APK，将手机连接到 USB 接口，在手机上启用 USB 调试，然后访问 chrome:。

来源: Https://www.genuitec.com/products/gapdebug/learning-center/configuration/

小开

Android < = 4.0.4的设备需要添加插件 https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt

小开

使用 Android 设备监视器

Android 设备监视器提供了一些安装了 Android sdk 的软件包，这些软件包你之前就已经安装了。在设备监视器中，您可以看到整个设备日志、异常、消息等等。这对于调试应用程序崩溃或任何其他类似问题都很有用。要运行这个命令，请转到 android sdk“/var/android-sdk-linux/tools”中的 tools/文件夹。然后运行以下命令

chmod +x monitor
./monitor

如果在 windows 上，直接打开 montor.exe 文件。 在“ LogCat”下面有一个选项卡，您将在其中看到所有与设备相关的消息。你会看到所有的消息在这里，包括机器人设备异常，这是不可见的铬检查设备。请确保使用 logcat 选项卡中的“ +”符号创建过滤器，以便只为应用程序查看消息。

资料来源: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

小开

你可以通过 USB 线从你的计算机远程调试 安装在你手机上的 Cordova Android 应用程序(你也可以远程点击网络应用程序，就好像你正在从你的计算机上查看网络应用程序)与“ Chrome 远程调试”。你也可以调试在安卓浏览器或 Chrome 浏览器中查看的网络应用程序这边。

  1. 在 Android 设备上启用开发者模式(进入设置-> 关于手机-> 点击构建号7x)。

  2. 通过 USB 连接线将您的电脑与您的手机连接起来。

  3. 在你的电脑上使用 Chrome 浏览器并导航到 Chrome://检查并点击你想要调试的远程设备旁边的“检查”按钮(在“设备”标签下)。右键点击你电脑上的 Chrome 浏览器-> 检查-> 修改和控制 DevTools (开发工具右上角的3个垂直点)-> 更多工具-> 远程设备-> 在左边的设备下面，点击你通过 USB 连接到的设备-> 点击你想要的应用程序的检查按钮。

  4. 然后点击“控制台”，你就可以用同样的方式调试 JavaScript，就像你在一个普通的网络应用上使用 Chrome 开发工具一样。


提交答案