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

最近两天，我试图弄清楚如何调试使用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的浏览器本身。

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

有什么建议？

对于ANDROID：

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

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

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

阅读本文以获取有关采取的步骤的更多信息。

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

对于iOS：

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

1.在您的iOS设备上，转到设置> Safari>高级> Web检查器以启用Web检查器

2.在iOS设备上打开Safari。

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

4.在计算机上打开Safari。

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

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

注意

此答案很旧（2014年1月），此后提供了许多新的调试解决方案。

我终于开始工作了！使用weinre和cordova（无Phonegap版本）并为将来可能遇到相同问题的开发人员省去麻烦，我制作了一个YouTube教程；）

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

只要是调试版本（在--release版本中已关闭），最新的Cordova版本都会自动启用这种调试。

对我来说最好的方法是连接Chrome调试器。

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

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

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

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

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

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

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

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

这是一篇文章，全面解释了如何做：http : //geeklearning.io/apache-cordova-and-remote-debugging-on-android/

您是否尝试过“ GapDebug”？免费。

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

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

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

现在，Microsoft 免费发布了Visual Studio Community版本，您可以免费尝试一下。您将需要下载Visual Studio和适用于Apache Cordova的Visual Studio工具。

据我所知，在适用于Android平台（从2.2到4.3）的Cordova应用中进行真正调试的唯一有效工具是jshybugger。Weinre是检查员，而不是调试器。JsHybugger对您的代码进行检测，从而使您可以在android WebView内进行调试。

只是想补充一点，您可以使用Genymotion调试android应用。它比普通的android模拟器要快。

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

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

如果您使用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-适用于Android的Cordova 33和远程调试

chrome远程调试的文档：https : //developers.google.com/chrome-developer-tools/docs/remote-debugging （如果我正确理解，您需要使用chrome作为默认浏览器的android设备）也许是您梦dream以求的解？

在安装了SDK的Android 4.4+上：

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：// inspect /＃devices
• 您的设备/仿真器将与连接到计算机的任何其他公认的设备一起显示，并且在您的设备下方，将显示在设备/仿真器上运行的Cordova'WebView'（主要是您的Cordova应用）的详细信息（ Cordova的工作方式是，它基本上是在您的设备/模拟器上创建一个“浏览器”窗口，其中有一个“ WebView”，即您正在运行的HTML / JavaScript应用）
• 单击“ WebView”部分下的“检查”链接，您会在其中看到列出的设备/模拟器。这会带来Chrome开发人员工具，现在您可以使用它们调试应用程序。
• 选择Chrome开发者工具的“来源”标签，以查看您的设备/模拟器上的Cordova应用当前正在运行的JavaScript。您可以在JavaScript中添加断点，以允许您调试代码。
• 另外，您可以使用“控制台”选项卡查看任何错误（将以红色显示），或者在控制台底部，您将看到“>”提示。在这里，您可以键入要检查其当前值的任何变量或对象（例如DOM对象），然后将显示该值。

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

使用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/

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

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

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

2. 通过USB电缆将计算机与手机连接。

3. 在计算机上用午餐浏览Chrome，并导航至chrome：// inspect，然后单击要调试的远程设备旁边的“检查”按钮（在“设备”标签下）。或在计算机上的Chrome内部右键单击->检查->汇总并控制DevTools（3个垂直点-开发人员工具的右上角）->更多工具->远程设备->左侧的设备下，单击通过USB连接到的设备->单击所需应用程序的检查按钮。

4. 然后，单击“控制台”，您可以用与使用Chrome开发人员工具的普通Web应用程序相同的方式调试JavaScript。

我爱韦恩！如何使用它：

首先，穿上你的衣服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/

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