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

Question

我花了最近两天的时间，试图找出如何调试我使用 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 的浏览器本身。

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

有什么建议吗？

- numediaweb

---

在PhoneGap中进行调试 · phonegap/phonegap Wiki - agustibr

Answer 1

对于安卓设备:

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

在Chrome浏览器中使用此链接：chrome://inspect/#devices (您需要将其粘贴到导航栏中)。

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

阅读这篇文章以获取更多信息。

这只适用于运行Android 4.4或更高版本的设备。

对于iOS：

使用Safari进行调试，请按照以下步骤操作：

1.在iOS设备中转到“设置”>“Safari”>“高级”>“Web检查器”以启用Web检查器。

2.在iOS设备上打开Safari。

3.通过USB将其连接到计算机上。

4.在计算机上打开Safari。

5.在Safari菜单中，找到您的设备名称。

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

- Neotrixs

---

我可以在电脑上通过Chrome看到控制台和应用程序，同时我的智能手机通过USB连接。非常棒的解决方案。 - emilie zawadzki

直到我运行了 adb start-server，它才找到我的手机。 - Leukipp

@Leukipp 我也遇到了同样的问题，但是在我的Windows系统启动项中添加了ADT后，问题得到了解决。 - Neotrixs

答案解决的是错误的问题——问题不在于调试浏览器，而在于调试 WebView。这两者略有不同，这一点可以从众多沮丧的用户中得到证实，因为他们的应用程序所显示的 WebView 在 chrome://inspect 中无法显示。 - Armen Michaeli

Android 4.4+ :( 这就是原因... - candlejack

@Leukipp 我建议你如果使用Windows系统，可以创建一个批处理(*.bat)文件，其中包含代码adb start-server。并且每次系统启动时都运行该文件。 - Neotrixs

Answer 2

注意

这个答案很旧了（2014年1月），当时还没有很多新的调试解决方案。

---

我终于搞定了！使用weinre和cordova（而不是Phonegap build），为了方便未来可能遇到同样问题的开发人员，我制作了一个YouTube教程 ;)

- numediaweb

---

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

你测试过 GapDebug 吗？ - Vincent Wasteels

一个指向YouTube视频的链接怎么能成为一个可接受的答案呢？ - Meekohi

@Meekohi 他制作了这个视频 :) - candlejack

与所有stackoverflow的回答一样，提供解决方案的链接（无论是否由作者创建）都不被看好。请将解决方案保留在这里，而不是外部，因为它们可能会消失。 - DarkNeuron

Answer 3

如果您可以使用Android 4.4+设备，则即使在应用程序的内部WebView上，也可以使用Chrome远程调试。它是比Weinre更好的调试器，但关键是使用最近的Android版本。

最近的Cordova构建自动启用此类调试，只要它是一个调试构建（在--release构建中关闭）。

- rdchambers

---

看起来很不错 - 还注意到有一个 PhoneGap 构建插件可用于启用此功能。 - DavidC

根据您的评论：在--release构建中它被关闭了（这不是真的）。 - Luckyy

关于这个问题，我发现这个链接很有用。相关的是，请使用Chrome浏览器并导航到chrome://inspect，确保勾选了“发现USB设备”。这将显示连接设备中任何可调试的Web视图。 - Sharadh

这个解决方案的问题在于 console.log 似乎无法工作。你需要通过 alerts，这真是一个负担。 - João Pimentel Ferreira

（在--release版本中已关闭）。这个提示救了我的一天！ - maswerdna

Answer 4

对于我而言，最好的方法是连接Chrome调试器。

为此，请在模拟器或设备上运行您的应用程序（使用 $cordova emulate）

然后，打开Google Chrome并转到chrome://inspect/

您将看到一个正在运行的应用程序列表。您的应用程序应该在那里。单击“检查”。

一个新窗口将打开，其中包含开发人员工具。在那里，您可以单击“控制台”以检查错误

- José

---

请务必确认您的答案适用于提问者的情况。Chrome调试器仅适用于Android 4.4及以上版本。 - Chris Neve

Answer 5

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

要能够这样做，您必须首先在手机上启用USB调试。

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

如果您将应用程序在连接到计算机的设备上启动，则Webview应出现在设备列表中。单击Webview的“检查”链接，应出现Webview的调试工具。

这里是一篇完整解释如何实现的文章：http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

- Mitch

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Chris Neve

Answer 6

另一个选择是Visual Studio，它提供用于调试Cordova应用的先行版支持:

统一的调试体验。跨平台开发通常需要为每个设备、模拟器或仿真器使用不同的调试工具。不同的工具意味着不同的工作流程，并且每次切换设备都会造成生产力的损失。使用Visual Studio，您可以为所有部署目标（包括Windows、Android模拟器、连接的Android设备、iOS设备和模拟器以及Apache Ripple模拟器）使用同样优秀的调试工具。

现在微软已经免费发布了Visual Studio Community版本，您可以无费尝试。您需要下载Visual Studio和Visual Studio Tools for Apache Cordova。

- Josh

---

自从英特尔曾经惊人的XDK停止支持其调试器以来，我不得不寻找新的选择。Visual Studio是我找到的唯一一个全能解决方案（IDE、调试器、插件管理器等）。设置需要一段时间，但非常简单。我使用Enterprise 2015。它可以构建，但我不确定是否已发布（我还没有达到那个点）。 - Victor Stoddard

Answer 7

你试过GapDebug吗？它是免费的。

看起来它集成了Safari Webkit Inspector和Chrome Dev Tools的版本，以在OS X和Windows上提供集成的调试体验。

- Zaxxo

---

这是一个非常重要的工具，特别适用于想要连接到iPhone进行步进式调试的Windows用户 - 我强烈推荐它。 - mike nelson

Answer 8

据我所知，对于Android平台版本在2.2到4.3之间的Cordova应用程序来说，实际调试的唯一有效工具是jshybugger。而Weinre只是一个检查器，不是一个调试器。JsHybugger会对你的代码进行仪器化处理，从而使你能够在Android WebView中进行调试。

- sgimeno

Answer 9

我想补充一点，你可以使用Genymotion来调试Android应用程序。它比原生的Android模拟器要快得多。

- Victor P

---

Genymotion允许使用Chrome远程调试，因为它被视为真实设备而非模拟器。相机和其他硬件功能也可以正常工作，但其中一些是付费的。 - shirk3y

Answer 10

以下是使用Phonegap Build的解决方案。将以下内容添加到您的config.xml中，以便使用Chrome远程Webview调试进行检查。

首先，请确保您的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>

在Nexus 5上，Phonegap 3.7.0可以正常工作。

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

使用Phonegap Build构建应用程序，安装APK，在USB上连接手机，启用手机的USB调试，然后访问chrome://inspect。

Source: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

- brunettdan

---

天哪！！！我终于可以调试我的apk了！！！非常感谢，我不知道为什么这个方法没有更加突出地出现在其他地方。我会将这些注释原封不动地包含在我的项目自述文件中。 - Josh