使用phonegap在android模拟器中调试javascript

Question

我是phonegap和android开发的新手。我可以知道如何在模拟器上调试javascript错误？我听说亚行可能知道如何在Windows 7系统上使用和安装它？我有一个用jsonp调用的ajax但在模拟器上没有响应。但是，我可以在Windows上使用浏览器调用ajax。我可以知道出了什么问题吗？

Answer 1

2016年11月更新：看起来不再适用了。

最简单的，其中一种最强大的方法是使用http://debug.phonegap.com（如果你愿意，它会在后台使用Weinre）。你只是

1. 选择一个随机字符串，说r4nd0m，
2. 将<script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script>注入您的index.html
3. 访问http://debug.phonegap.com/client/#r4nd0m，您将立即调试您的移动网络应用。

您可以做的事情（类似于Firebug或Web Inspector）：

1. 查看和更改DOM
2. 编辑CSS
3. 用于实时调试和远程运行Javascript的控制台。
4. 其他内容，例如：存储，资源，时间线，个人资料等。

Answer 2

您可以通过在JavaScript中调用console.log（）来至少将调试内容记录到adb控制台。也许这就足够了？

要使用adb查看日志输出，请导航到SDK platform-tools /目录并执行：

adb logcat

请参阅logcat Command-line Tool

Answer 3

您现在可以使用Chrome开发工具远程调试Android Phonegap应用！我在这里写了说明：Remote debugging Phonegap apps with Chrome Dev Tools

Android模拟器的步骤：

1. 导航到桌面计算机上的chrome：// inspect / in Google Chrome。
2. 在“设备”标签上找到Android模拟器，然后点击“检查”链接



另见Get Started with Remote Debugging Android Devices

Answer 4

我建议jsconsole。它允许您将任何JavaScript注入页面并提供基本控制台。 remote debugging上有一个很好的教程。

Answer 5

是的，您在console.log中遇到日志错误，并在Eclipse中显示LogCat选项卡。在那里，将出现Web控制台消息（包括JS错误）。它有点冗长，因此您必须过滤以仅显示Web控制台标记，但它运行良好。这里描述：SHOWING CONSOLE CONSOLE.LOG OUTPUT AND JAVASCRIPT ERRORS WITH PHONEGAP ON ANDROID/ECLIPSE

Answer 6

我发现在Windows 7上通过Eclipse测试应用程序时，这适用于调试Android / Phonegap的javascript错误。

只需转到窗口＆gt;显示视图＆gt;其他......

然后在 Android 文件夹下选择 LogCat 。

刚刚启动的窗口/标签是Android模拟器发送日志和错误消息的位置。您可以分离此窗口并将其放在Eclipse IDE之外（我发现这很有用）。您还可以通过选择窗口右上角的任意5个彩色字母来控制您看到的错误类型。

要隐藏无用的信息以便您只看到错误，请确保您只选择了（E）。就个人而言，我也喜欢选择（W）警告以及选择（E）错误。

希望有所帮助！

Answer 7

最终有一个工具可用于对Android进行正确的JavaScript调试 - http://www.jshybugger.org/

特点：

  

  
• 添加/删除/启用/禁用行断点
  
• 观看表情
  
• 进入/结束/退出
  
• 暂停异常
  
• 调用堆栈导航
  
• 局部变量检查
  
• 远程控制台
  
• javascript语法和运行时错误报告
  
• 查看/编辑/删除本地存储项目
  
• 查看/编辑/删除会话存储项目
  
• 查看/编辑/删除WebSQL数据库记录（观看视频）
  
• 查看页面资源（图片，脚本，HTML）
  
• 远程控制台支持增强（stacktrace）
  
• 调试器：增强对象检查
  
• 调试器：条件断点
  
• 调试器：继续到这里
  

Answer 8

我分两步轻松解决了。

更改日志记录级别

在config.xml中添加此行

    <log level="DEBUG"/>

运行cordova Log

这是一个bat文件，您可以运行并跟踪所有日志消息转到您的phonegap项目并导航到\platforms\android\cordova然后打开log.bat您现在可以使用命令行模拟您的应用程序

cordova emulate

并且日志将显示在cmd中，当您打开log.bat

时，该日志将会弹出

Answer 9

如果您愿意在某处设置NodeJS，可以使用John Boxall的iBug进行一些扩展调试，虽然它是专为我在Android上测试的iPhone设计的，但它运行正常。它基本上是移动设备的firebug lite。我指向我的fork因为Node改变了很多而John的代码不能在现代nodeJS上运行所以我修补它以在nodeJS 0.2.3上运行它并在更新版本的nodeJS上运行YMMV。

Answer 10

如果您使用console.log，则可以执行简单的打印语句。除了使用adb查看它们之外，您还可以在设备上使用日志查看器并在那里查看日志。更多信息：http://www.technomancy.org/android/javascript-debugging/

Answer 11

捕获异常并在控制台中显示的最佳解决方案是以下代码：

window.onerror = function(msg, uri, line) {
    console.log(msg + uri + line);
}

Answer 12

在Eclipse中，您可以向android模拟器后退按钮添加一个钩子并动态检查一个值。添加onBackPressed事件管理器并从那里调用javascript控制台。 从eclipse调试透视图中，您将String变量的值更改为您要检查的值，并通过调用super.loadUrl将其传递给您的应用。

请参阅下面的代码。 不要忘记从DDMS视图启用应用程序的调试

public class MyActivity extends DroidGap {
    private String js = "";
    @Override
    public void onBackPressed() {  
        //add a breakpoint to the follow line 
        //and change the value for "js" variable before continuing execution
        super.loadUrl("javascript:console.log(" + js + ")");
        return;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("keepRunning", false);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///android_asset/www/index.html", 20000);
    }
}

Answer 13

如果您正在使用Phonegap Build并希望使用Chrome控制台进行调试，那么这是一个有效的解决方案。可以使用USB调试（https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews）

调试WebView

首先，请确保您的小部件代码包含xmlns：android =＆＃34; 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/

Answer 14

使用GapDebug

可以轻松调试PhoneGap / Apache Cordova应用程序

• 下载＆amp;从https://www.genuitec.com/products/gapdebug/

安装GapDebug

• 在您的PC / Mac上运行GapDebug

• 启用开发者选项＆amp; Android设备上的USB调试 （设置 - ＆gt;开发人员选项（ON） - ＆gt; USB调试（开启））

• 如果找不到开发者选项（设置 - ＆gt;关于手机 - ＆gt;点击内部版本号7次）

• 您可以从GapDebug
调试您的应用程序

参见

• https://www.youtube.com/watch?v=QHTI-utHfEE
• https://www.youtube.com/watch?v=AZJUSomFOwk
• https://www.youtube.com/watch?v=XEeWFIsgtsU
• https://www.youtube.com/watch?v=kiY03MBGkLo

Answer 15

Phonegap调试仍然存在。我所知道的是在设置中找到的phonegap build并勾选调试应用程序选项。然后，它会在您保存时重建您的应用程序。调试按钮将与重建选项一起出现在应用程序页面中。 （这项服务也使用内置的weinre）

我发现最快的另一个选项是jsconsole.com。 与其他需要安装许多内容（如驱动程序和SDK）的调试方法相比，它非常易于设置并且几乎不需要任何配置。

注意！

在构建应用程序的PhoneGap 10中，应用程序外的任何请求（好像没有互联网）都失败了，你必须在config.xml中添加它

<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

我正在试着让任何远程调试工具工作，只是为了找出默认情况下被阻止的外部请求。这救了我。

Answer 16

更新：现在PhoneGap被称为Apache Cordova，如果你想用它来开发Android应用程序，你必须安装Android Studio。要从Android Studio访问logcat控制台，请打开您的Android项目（它是您的Cordova项目中的platform / android文件夹）并选择菜单Tools-＆gt; Android-＆gt; Android Device Monitor。

Android设备监视器（AVD）可以单独运行，因此您可以创建直接访问以避免所有这些路径。 AVD将自动从使用Cordova启动的仿真器获取日志消息，并允许您轻松设置过滤器以减少从仿真器接收的大量输出。我特别喜欢按应用程序名称进行过滤。