是否有真正的解决方案来调试cordova应用程序

时间：2014-01-24 12:33:43

标签： android debugging cordova emulation mobile-webkit

我花了两天时间试图弄清楚如何调试我使用Cordova 3.2创建并部署到Android 2.3设备的HTML5应用程序。我见过的所有文章/帖子都提供了黑客而不是真正的解决方案:(大多数时候，它们都不适合我的情况;调试我的应用程序中的CSS样式和Angularjs代码..

到目前为止我测试过了;

debug.phonegap.com

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

Weinre

我发现的大多数文章都指向过时的Github存储库，它会计算一个Jar文件..但是找不到它：（

边缘检查

它工作并显示我在移动设备上的PC上浏览的网页..但问题是它使用了一些其他集成浏览器（或模拟器），而不是运行phonegap应用程序的浏览器。所以结果不准确。

Chrome模拟器

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

梦想解决方案

完美的解决方案是Google Chrome（桌面版）的扩展，使您可以将桌面浏览器切换到Android 2.3平台中的同一个浏览器。没有仿真没有黑客，只有浏览器本身使用web-kit v 530。

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

有什么建议吗？

19 个答案:

答案 0 :(得分：120)

FOR ANDROID：

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

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

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

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

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

FOR iOS：

使用Safari for iOS，请按照以下步骤操作：

1.在您的iOS设备中，转到设置＆gt; Safari＆gt;高级＆gt; Web Inspector启用Web Inspector

2.在iOS设备上打开Safari。

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

4.在计算机上打开Safari。

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

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

enter image description here

答案 1 :(得分：75)

<强>注意

这个答案已经过时（2014年1月），从那时起可以使用许多新的调试解决方案。

我终于搞定了！使用weinre和cordova（没有Phonegap构建）并为未来的开发人员节省麻烦，他们可能面临同样的问题，我做了YouTube tutorial;）

答案 2 :(得分：55)

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

最近的Cordova版本会自动启用这种调试，只要它是一个调试版本（它在--release版本中关闭）。

答案 3 :(得分：30)

最适合我的是附加Chrome调试器。

要做到这一点，请在模拟器或设备中运行您的应用程序（使用$ cordova模拟）

然后，打开Goog​​le Chrome并转到chrome://inspect/

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

将使用开发人员工具打开一个新窗口。在那里你可以点击“console”来检查错误

答案 4 :(得分：20)

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

为了能够做到这一点，您必须首先在手机上启用USB调试。

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

如果您的设备在连接到计算机时启动了应用，则Webview应显示在设备列表中。单击Webview的“Inspect”链接，将显示Webview的调试工具。

以下是一篇完整解释如何操作的文章：http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

答案 5 :(得分：7)

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

它似乎集成了Safari Webkit Inspector和Chrome Dev Tools的版本，可在OS X和Windows上提供集成的调试体验。

答案 6 :(得分：7)

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

  

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

现在Microsoft发布了Visual Studio Community edition for free，您可以免费试用。您需要同时下载Visual Studio和Visual Studio Tools for Apache Cordova。

答案 7 :(得分：5)

据我所知，用于Android平台2.2至4.3的Cordova应用程序中实际调试的唯一有效工具是jshybugger。 Weinre是一名检查员，而不是调试员。 JsHybugger为你的代码提供工具，允许你在android WebView中进行调试。

答案 8 :(得分：5)

只想添加您可以使用Genymotion调试Android应用程序。它比股票Android模拟器更快。

答案 9 :(得分：4)

您可以使用英特尔XDK IDE在仿真器或实际设备上进行开发和调试

我还发现了用于cordova的Visual Studio 2015 RC工具非常好，带有它的纹波仿真器

答案 10 :(得分：3)

如果您使用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远程调试的文档：https://developers.google.com/chrome-developer-tools/docs/remote-debugging （如果我理解正确你需要一个带有chrome作为默认浏览器的android设备） 也许最接近你的梦想解决方案？

答案 11 :(得分：3)

安装了Android 4.4+ w / SDK：

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

答案 12 :(得分：2)

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

  1. 在您的Android设备上启用开发者模式（转到设置 - ＆gt;关于手机 - ＆gt;点按内置版码7x）。

  2. 通过USB线将电脑与手机连接。

  3. 在计算机上使用Chrome浏览器并导航至chrome：// inspect并单击要调试的远程设备旁边的“Inspect”按钮（在“Devices”选项卡下）。 或右键单击计算机上的Chrome内部 - ＆gt;检查 - ＆gt; Costumize和控制DevTools（3个垂直点 - 开发人员工具的右上角） - ＆gt;更多工具 - ＆gt;远程设备 - ＆gt;在左侧的设备下，单击您通过USB连接的设备 - ＆gt;单击所需应用程序的“检查”按钮。

  4. 然后点击“控制台”，您可以像使用Chrome开发者工具的普通网络应用程序一样调试JavaScript。

答案 13 :(得分：2)

使用Android设备监视器

Android设备监视器带有你之前安装的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/

答案 14 :(得分：2)

以下是使用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/

答案 15 :(得分：2)

如果您使用Cordova 3.3或更高版本并且您的设备运行Android 4.4或更高版本，则可以使用“在Android上使用Chrome进行远程调试”。完整说明如下：

https://developer.chrome.com/devtools/docs/remote-debugging

总结：

  • 使用USB连接线将设备插入台式计算机
  • 在您的设备上启用USB调试（在我的设备上，这是在设置＆gt;更多＆gt;开发人员选项＆gt; USB调试）

或 ，如果您使用的是Cordova 3.3+并且没有4.4的物理设备，则可以使用运行Android 4.4+的模拟器来运行应用程序通过模拟器，在您的台式计算机上。

  • 在设备或模拟器上运行Cordova应用程序
  • 在桌面计算机上的Chrome中，在地址栏中输入chrome：// inspect /＃devices
  • 您的设备/仿真器将与连接到您计算机的任何其他已识别设备一起显示，并且在您的设备下将显示Cordova“WebView”（基本上是您的Cordova应用程序）的详细信息，该设备正在设备上运行/ emulator（Cordova的工作方式是它基本上在你的设备/模拟器上创建一个'浏览器'窗口，其中有一个'WebView'，它是你运行的HTML / JavaScript应用程序）。
  • 点击“WebView”部分下方的“检查”链接，其中列出了您的设备/模拟器。这会打开Chrome开发人员工具，现在可以让您调试应用程序。
  • 选择Chrome开发者工具的“来源”标签，以查看您的设备/模拟器上的Cordova应用当前正在运行的JavaScript。您可以在JavaScript中添加允许您调试代码的断点。
  • 此外，您可以使用“控制台”标签查看任何错误（将显示为红色），或者您可以在控制台底部看到“＆gt;”提示。在这里，您可以输入要检查当前值的任何变量或对象（例如DOM对象），并显示该值。

答案 16 :(得分：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

答案 17 :(得分：1)

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

答案 18 :(得分：1)

我爱过我们！如何使用它：

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

相关问题
最新问题