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

Is there a real solution to debug cordova apps

提问by numediaweb

I spent the last two days trying to figure out how to debug an HTML5 app I created using Cordova 3.2 and deployed to an Android 2.3 device. All the articles/posts I've seen provide hacks rather than real solutions :( and most of the time, none of them works for my case; debug the css styles and the Angularjs code inside my app..

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

So far I tested;

到目前为止，我测试过；

debug.phonegap.com

debug.phonegap.com

I injected the script to the index.htmlfile then visited the generated URL in debug.phonegap.com but nothing happens; only a blank page.

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

Weinre

温雷

Most of the articles I found point to obsolete Github repository that countain a Jar file.. but it's not found :(

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

Edge inspect

边缘检查

It works and shows the webpage I'm browsing on the PC inside the mobile.. But the problem is that it uses some other integrated browser (or emulator) than the one that runs phonegap apps; so the results are not accurate.

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

Chrome emulator

Chrome 模拟器

Same as Edge inspect; it doesn't allow to view real web-kit v530 that is shipped with Android 2.3.

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

The dream solution

梦想的解决方案

The perfect solution would be an extension to Google Chrome (desktop) that enables you to switch the desktop browser to the same one found in Android 2.3 platforms; no emulation no hacks, just the browser itself with web-kit v 530.

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

Unfortunately such solution doesn't exist :( or I'm wrong?

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

Any suggestions?

有什么建议？

采纳答案by numediaweb

NOTICE

注意

This answer is old (January 2014) many new debugging solutions are available since then.

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

---

---

I finally got it working! using weinre and cordova (no Phonegap build) and to save hassle for future devs, who may face the same problem, I made a YouTube tutorial;)

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

回答by Neotrixs

FOR ANDROID:

对于安卓：

You only need to enable “USB remote debugger” within your android device and plug with a USB cable. Then open your application in the device. Chrome will detect the remote browser and you can see the console in the same way than you see it when you use Chrome locally.

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

Use this link: chrome://inspect/#devicesin Chrome browser (you'll have to paste it into the nav bar).

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

If your app crashes in the device you only need to see the console's log within your browser and see what happens. You also can add functionality, change variables, and override functions in the same way than we do it with our local browser.

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

Read this articlefor more information on the steps to take.

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

This will work ONLY with devices running Android 4.4+.

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

FOR iOS:

对于 iOS：

Use Safari for iOS, follow these steps:

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

1.In your iOS device go to Settings > Safari > Advanced > Web Inspector to enable Web Inspector

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

2.Open Safari on your iOS device.

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

3.Connect it to your computer via USB.

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

4.Open Safari on your computer.

4.在电脑上打开Safari。

5.In Safari's menu, go to Develop and, look for your device's name.

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

6.Select the tab you want to debug.

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

回答by rdchambers

If you can use an Android 4.4+ device, then you can use Chrome Remote Debugging even on the app's internal WebView. It's a much better debugger than Weinre, but the key is using the recent Android version.

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

Recent Cordova builds automatically enable this kind of debugging as long as it's a debug build (it's turned off in --release builds).

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

回答by José

The best for me is to attach the Chrome debugger.

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

To do it, run your app in a emulator or device (using $cordova emulate)

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

then, open Google Chrome and go to chrome://inspect/

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

You'll see a list with running apps. Your app should be there. Click on "inspect".

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

A new window will open with developer tools. There you can click on "console" to check for errors

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

回答by Mitch

If your app is running Cordova 3.3+ and your device is running Android 4.4+ then you can use Chrome Remote Webview Debuggingto debug your Cordova app.

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

To be able to do that, you must first enable USB debugging on you phone.

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

Then open the "inspect devices" tab. In Chrome, go to Settings> More tools> Inspect devices.

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

If you launch your app on your device while it's connected to your computer, The Webview should appear in the devices list. Click on the "Inspect" link of your Webview and a Debug Tool for your Webview should appear.

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

Here is an article fully explaining how to do it: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

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

回答by Zaxxo

Have you tried 'GapDebug'? Its free.

你试过'GapDebug'吗？免费。

It appears to integrate versions of the Safari Webkit Inspector and Chrome Dev Tools to offer an integrated debugging experience on OS X and Windows.

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

回答by Josh

Another option is Visual Studio, which has prerelease support for debugging Cordova apps:

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

Unified debugging experience. Cross-platform development often requires a different tool for debugging each device, emulator, or simulator. Different tools mean different workflows and lost productivity every time you switch devices. With Visual Studio, you can use the same world-class debugging tools for all deployment targets, including Windows, the Android emulator, attached Android devices, iOS devices and emulators, and the Apache Ripple emulator.

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

Now that Microsoft has released Visual Studio Community edition for free, you can give this a try at no cost. You will need to download both Visual Studio, and Visual Studio Tools for Apache Cordova.

现在微软已经免费发布了Visual Studio 社区版，你可以免费试一试。您将需要下载 Visual Studio 和Visual Studio Tools for Apache Cordova。

回答by sgimeno

As far as I know, the only productive tool for real debugging in Cordova apps for Android platforms from 2.2 to 4.3 is jshybugger. Weinreis an inspector, not a debugger. JsHybugger instruments your code allowing you to debug inside the android WebView.

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

回答by Victor P

Just want to add that you can debug android apps using Genymotion. It's WAY faster then the stock android emulator.

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

回答by Mohamed Selim

You can use Intel XDK IDE to develop and debug on emulator or on real device

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

I also found Visual Studio 2015 RC tools for cordova very good, with it's ripple emulator

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