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

68

我是phonegap和android开发的新手。我可以知道如何在模拟器上调试JavaScript错误吗？我听说过ADB，我知道如何在Windows 7系统上使用和安装它吗？我有一个用jsonp调用的ajax，但是模拟器没有响应。但是，我可以使用Windows上的浏览器来调用该ajax。我可以知道怎么了吗？

javascript  android  android-emulator  cordova 
— 大卫
source

Answers:

41

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

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

adb logcat

请参阅logcat命令行工具

— 斯蒂芬·H·辛格
source
13
我认为您应该从命令提示符/终端运行“ adb -s emulator-5554 logcat”。adb驻留的位置取决于您的OS和android sdk的安装，但它应位于sdk的“工具”目录中。
— Stefan H Singer
在这里，您可以找到一些代码来改进Logcat内的日志记录：blog.aflx.de/2011/06/richtig-loggen-mit-phonegap-und-logcat
— s.Daniel 2012年
更新：您现在可以使用Chrome开发工具远程调试Phonegap应用！看我的答案。
— jackocnr 2014年
adb现在位于SDK的“平台工具”中。
— grepsedawk
43

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，您将立即调试您的移动Web应用程序。

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

  1. 查看和更改DOM
  2. 编辑CSS
  3. 用于实时调试和远程运行Javascript的控制台。
  4. 其他内容，例如：存储，资源，时间轴，配置文件等。
— 对偶
source
1
知道“未连接目标”时，我们在做什么错吗？
— 彼得
3
该服务仍然存在吗？
— 马特·芒森
1
看起来好像没有。
— duality_
23

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

Android模拟器的步骤：

  1. 在台式机的Google Chrome中导航至chrome：// inspect /。
  2. 在“设备”选项卡上找到Android模拟器，然后单击“检查”链接

Google Chrome远程目标

另请参阅远程调试Android设备入门

— Jackocnr
source
3
仅适用于Android 4.4及更高版本。目前，这只占市场的5％。
— givanse 2014年
4

我建议jsconsole。它使您可以将任何JavaScript注入页面并提供基本的控制台。有一个很好的远程调试教程。

— dave1010
source
仅供参考：我意识到这是一篇过时的文章，所以对于在这里登陆的任何人来说，该产品似乎都可以正常工作，但是该链接上没有教程。
— ppetree '20
2

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

只需转到窗口>显示视图>其他...

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

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

要隐藏无用的信息，以便您只看到错误，请确保仅选择（E）。我个人也希望选择（W）警告以及（E）错误。

希望有帮助！

— 阿巴西
source
2

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

特征：

  • 添加/删除/启用/禁用断点
  • 观看表情
  • 进入/进入/离开
  • 例外暂停
  • 调用堆栈导航
  • 局部变量检查
  • 远程控制台
  • javascript语法和运行时错误报告
  • 查看/编辑/删除本地存储项目
  • 查看/编辑/删除会话存储项
  • 查看/编辑/删除WebSQL数据库记录（观看视频）
  • 查看页面资源（图像，脚本，html）
  • 远程控制台支持增强（stacktrace）
  • 调试器：增强的对象检查
  • 调试器：条件断点
  • 调试器：继续到这里
— 威廉·波纳尔
source
2

我分两步轻松解决了这个问题。

更改日志记录级别

在config.xml中添加此行

    <log level="DEBUG"/>

运行cordova日志

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

cordova emulate

日志将显示在打开的cmd中 log.bat

— 黑幕穆罕默德·谢里夫（Shady Mohamed Sherif）
source
config.xml文件在哪里？
— 罗伯托·罗德里格斯
0

如果您愿意在某个地方设置NodeJS，则可以使用John Boxall的iBug进行一些扩展调试，尽管它是为iPhone设计的，但我已经在Android上对其进行了测试，并且效果很好。从根本上说，它是适用于移动设备的Firebug Lite。我指的是叉子，因为Node进行了很多更改，John的代码无法在现代的nodeJS上运行，因此我对其进行了修补以使其在最新版本的nodeJS的nodeJS 0.2.3，YMMV上运行。

— 克里斯·埃里克森
source
0

在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);
    }
}
— 布鲁诺·帕斯夸里
source
0

如果您使用的是Phonegap Build，并且想使用Chrome控制台进行调试，请使用以下可行的解决方案。可以使用USB调试（https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews）调试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/

— 布鲁内坦
source
0

Phonegap调试仍然存在。我知道的是在设置中找到的phonegap构建中，然后勾选debug application选项。保存后，它将重新构建您的应用程序。调试按钮将与重建选项一起出现在应用程序页面中。（此服务还使用内置的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="*" />

我竭尽全力试图使任何远程调试工具正常工作，只是发现外部请求默认是被阻止的。这救了我。

— Gokigooooks
source
0

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

  • 从https://www.genuitec.com/products/gapdebug/下载并安装GapDebug

  • 在您的PC / Mac上运行GapDebug

  • 在Android设备上启用开发者选项和USB调试（设置->开发者选项（ON）-> USB调试（ON））

  • 如果未找到开发人员选项（设置->关于电话->单击内部版本号7次）

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

参考

— 普里扬卡
source
-1

更新：如今PhoneGap被称为Apache Cordova，如果您想使用它来开发Android应用程序，则必须安装Android Studio。要从Android Studio访问logcat控制台，请打开您的Android项目（它是Cordova项目中的platform / android文件夹），然后选择菜单工具-> Android-> Android设备监视器。

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

— 地亚哥
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.