是否有调试cordova应用程序的真正解决方案[关闭]

Posted 2023-04-19

【中文标题】是否有调试cordova应用程序的真正解决方案[关闭]

【英文标题】：Is there a real solution to debug cordova apps [closed]

【发布时间】：2014-02-15 10:59:18

【问题描述】：

过去两天我试图弄清楚如何调试我使用 Cordova 3.2 创建并部署到 android 2.3 设备的 html5 应用程序。我看到的所有文章/帖子都提供了技巧而不是真正的解决方案:(而且大多数时候，它们都不适合我的情况；在我的应用程序中调试 css 样式和 Angularjs 代码..

到目前为止我测试过；

debug.phonegap.com

我将脚本注入到index.html 文件中，然后访问了 debug.phonegap.com 中生成的 URL，但没有任何反应；只是一个空白页。

温雷

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

边缘检查

它可以工作并显示我在手机内的 PC 上浏览的网页。但问题是它使用了其他集成浏览器（或模拟器）而不是运行 phonegap 应用程序的浏览器；所以结果不准确。

Chrome 模拟器

与边缘检查相同；它不允许查看 Android 2.3 附带的真实 web-kit v530。

理想的解决方案

完美的解决方案是 Google Chrome（桌面）的扩展，使您能够将桌面浏览器切换到与 Android 2.3 平台相同的浏览器；没有仿真没有黑客攻击，只有带有 web-kit v 530 的浏览器本身。

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

有什么建议吗？

【问题讨论】：

Debugging in PhoneGap · phonegap/phonegap Wiki

【参考方案1】：

适用于安卓：

您只需要在您的安卓设备中启用“USB 远程调试器”并使用 USB 数据线插入即可。然后在设备中打开您的应用程序。 Chrome 会检测到远程浏览器，您可以看到控制台的方式与您在本地使用 Chrome 时看到的方式相同。

在 Chrome 浏览器中使用此链接：chrome://inspect/#devices（您必须将其粘贴到导航栏中）。

如果您的应用在设备中崩溃，您只需在浏览器中查看控制台的日志并查看会发生什么。您还可以像使用本地浏览器一样添加功能、更改变量和覆盖函数。

请阅读this article，了解有关要采取的步骤的更多信息。

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

对于 iOS：

使用 ios 版 Safari，请按以下步骤操作：

1.在您的 iOS 设备中，前往 Settings > Safari > Advanced > Web Inspector 以启用 Web Inspector

2.在您的 iOS 设备上打开 Safari。

3.通过USB将它连接到您的计算机。

4.在您的计算机上打开 Safari。

5.在 Safari 的菜单中，转到“开发”，然后查找您的设备名称。

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

【讨论】：

我可以在我的电脑上看到控制台和我的应用程序，而我的智能手机是通过 USB 连接的。非常酷的解决方案。

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

@Leukipp 我也面临同样的问题，但之后在我的 Windows 系统启动时添加 ADT。我的问题解决了..

Answer 给出了错误问题的解决方案——问题不在于调试浏览器，而在于调试 WebView。这些与许多沮丧的用户略有不同，因为他们的应用程序显示的 WebView 没有显示在 chrome://inspect 中。

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

【参考方案2】：

通知

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

---

我终于让它工作了！使用 weinre 和 cordova（没有 Phonegap 构建）并为将来可能面临同样问题的开发人员省去麻烦，我做了一个 YouTube tutorial ;)

【讨论】：

我错过了正确的 IP 配置，现在它可以完美运行，非常感谢！

Weinre 不是调试器，它只允许 DOM 检查，不能调试 js，甚至不能查看控制台消息

...youtube 视频的链接如何成为可接受的答案？

@Meekohi 他制作了视频 :)

与所有 *** 答案一样 - 指向解决方案的链接（无论是否由作者制作）都是不受欢迎的。将解决方案保留在此处，而不是放在外部可能有一天会消失的地方。

【参考方案3】：

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

最近的 Cordova 构建会自动启用这种调试，只要它是调试构建（它在 --release 构建中被关闭）。

【讨论】：

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

根据您的评论：它在 --release builds 中关闭（那不是真的）

回复。这个，我发现this link 很有用。相应地，使用 Chrome 导航到 chrome://inspect 并确保选中“发现 USB 设备”。这将在连接的设备中显示任何可调试的 WebView。

这个解决方案的问题是console.log 似乎不起作用。你需要通过alerts 这真的是一个负担。

(it's turned off in --release builds). 这个通知拯救了我的一天！

【参考方案4】：

对我来说最好的方法是附加 Chrome 调试器。

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

然后，打开谷歌浏览器并转到chrome://inspect/

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

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

【讨论】：

请仔细检查您的答案是否适用于 OP 的条件。 Chrome 调试器仅适用于 Android 4.4+。

【参考方案5】：

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

为此，您必须先在手机上启用 USB 调试。

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

如果您在设备连接到计算机时在设备上启动应用，Webview 应该会出现在设备列表中。单击 Webview 的“Inspect”链接，应该会出现 Webview 的调试工具。

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

【讨论】：

这是此评论部分最好和最完整的答案之一，尽管由于 4.4+ 对 OP 没有帮助。

【参考方案6】：

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

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

【讨论】：

这是一个必不可少的工具，特别是对于想要连接到分步调试 iPhone 的 Windows 用户 - 我强烈推荐它。

【参考方案7】：

另一个选项是 Visual Studio，它有 prerelease support for debugging Cordova apps:

统一的调试体验。经常跨平台开发 需要不同的工具来调试每个设备、仿真器或 模拟器。不同的工具意味着不同的工作流程和丢失 每次切换设备时的生产力。使用 Visual Studio，您 可以对所有部署使用相同的世界级调试工具 目标，包括 Windows、Android 模拟器、附加的 Android 设备、iOS 设备和模拟器，以及 Apache Ripple 模拟器。

现在微软已经发布了Visual Studio Community edition for free，你可以免费试一试。您需要同时下载 Visual Studio 和 Visual Studio Tools for Apache Cordova。

【讨论】：

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

【参考方案8】：

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

【参考方案9】：

只想补充一点，您可以使用Genymotion 调试android 应用程序。它比股票 android 模拟器快得多。

【讨论】：

Genymotion 允许使用 chrome 远程调试，因为它不是模拟器，而是真实设备。相机和其他硬件功能也可以使用，但其中一些是付费的。

【参考方案10】：

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

我还发现用于 cordova 的 Visual Studio 2015 RC 工具非常好，它的波纹模拟器

【参考方案11】：

在安装了 SDK 的 Android 4.4+ 上：

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

【参考方案12】：

如果您使用 phonegap 构建，则可以选择启用调试。

---

对于本地构建，您可以使用 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

检查我的编辑，看来chrome毕竟离你的梦想解决方案不远

请注意，我使用的设备运行的是 android 2.3，而 chrome 远程调试需要 Android 4.4 或更高版本。但是感谢“QuickFix”；我现在一切正常.. 看我的教程 ;)

【参考方案13】：

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

首先，确保您的小部件标签包含 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。

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

【讨论】：

天哪！！！我终于可以调试我的apk了！！！非常感谢，我不知道为什么这在其他任何地方都没有更突出。在我的项目的自述文件中逐字包含这些注释。

【参考方案14】：

如果您使用 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 应用程序）的详细信息/emulator（Cordova 的工作方式是它基本上在您的设备/模拟器上创建一个“浏览器”窗口，其中有一个“WebView”，它是您正在运行的 HTML/javascript 应用程序） 单击“WebView”部分下的“inspect”链接，您会看到列出的设备/模拟器。这会调出 Chrome 开发者工具，现在可以让您调试您的应用程序。 选择 Chrome 开发人员工具的“源”选项卡以查看设备/模拟器上的 Cordova 应用程序当前正在运行的 JavaScript。您可以在 JavaScript 中添加断点，以便调试代码。 此外，您可以使用“控制台”选项卡查看任何错误（将显示为红色），或者在控制台底部您会看到“>”提示。您可以在此处输入您想要检查其当前值的任何变量或对象（例如 DOM 对象），然后将显示该值。

【参考方案15】：

使用 Android 设备监视器

Android Device Monitor 带有您之前安装的 android sdk 软件包。在设备监视器中，您可以看到整个设备日志、异常、消息等所有内容。这对于调试应用程序崩溃或任何其他此类问题很有用。要运行它，请转到您的 android sdk “/var/android-sdk-linux/tools” 中的 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。

【参考方案16】：

您还可以使用 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

【讨论】：

谢谢，但我发现最好的方法是使用 weinre 来调试设备本身的集成 webkit 浏览器的设计！

我同意这一点，而涟漪可以让您大致了解释放它时的外观，这很好，但有时比较仿真器和真实设备会存在差异，主要是因为仿真器与您在其上运行的网络浏览器的引擎，在某些情况下与您的设备可以工作的引擎不同。所以我通常同时使用涟漪来设计 UI，并在某些事情没有按预期工作时测试行为

【参考方案17】：

您可以通过 USB 数据线从您的计算机远程调试 安装在手机上的 Cordova Android 应用程序（您也可以远程单击网络应用程序，就像您从您的计算机）与“Chrome 远程调试”。 您还可以通过这种方式调试在 Stock Android 浏览器或 Android 上的 Chrome 中查看的 Web 应用程序。

在您的 Android 设备上启用开发者模式（转到设置 -> 关于手机 -> 在内部版本号上点击 7x）。

通过 USB 数据线将您的计算机与手机连接起来。

在您的计算机上午餐 Chrome 并导航到 chrome://inspect 并单击要调试的远程设备旁边的“检查”按钮（在“设备”选项卡下）。 或右键单击计算机上的 Chrome -> 检查 -> 装扮和控制 DevTools（3 个垂直点 - 开发人员工具的右上角）-> 更多工具 -> 远程设备 -> 在设备下在左侧，单击您通过 USB 连接的设备 -> 单击所需应用程序的检查按钮。

然后点击“控制台”，您就可以像使用 Chrome 开发者工具在普通 Web 应用程序上一样调试 JavaScript。

【讨论】：

这适用于我的手机（android 6），但不适用于我的平板电脑（note 8 android 4.4）

这是 android web-view 的问题。安装人行横道插件允许我在旧设备上进行这种调试（最多果冻豆）

【参考方案18】：

我爱过韦恩！使用方法：

首先，戴上你的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>

然后：

安装：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/

【讨论】：

Weinre 不是调试器，它只允许 DOM 检查，不能调试 js，甚至不能查看控制台消息，

【参考方案19】：

android https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt