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

Posted 2023-05-07

【中文标题】使用phonegap在android模拟器中调试javascript

【英文标题】：debug javascript in android emulator with phonegap

【发布时间】：2011-06-08 16:24:33

【问题描述】：

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

【参考方案1】：

2016 年 11 月更新：这似乎不再起作用了。

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

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

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

查看和更改 DOM 编辑 CSS 用于实时调试和远程运行 Javascript 的控制台。 其他内容，例如：存储、资源、时间线、配置文件等。

【讨论】：

当它说“没有连接目标”时，知道我们做错了什么吗？

这个服务还存在吗？

好像没有。

【参考方案2】：

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

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

adb logcat

见logcat Command-line Tool

【讨论】：

我认为您应该从命令提示符/终端运行“adb -s emulator-5554 logcat”。 adb 所在的位置取决于您的操作系统和 android sdk 安装，但它应该在您的 sdk 的“工具”目录中。

在这里您可以找到一些代码来改进 Logcat 中的日志记录：blog.aflx.de/2011/06/richtig-loggen-mit-phonegap-und-logcat

更新：您现在可以使用 Chrome 开发工具远程调试 Phonegap 应用程序！看我的回答。

adb 现在位于 SDK 的“平台工具”中。

【参考方案3】：

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

安卓模拟器步骤：

在桌面计算机上的 Google Chrome 中导航到 chrome://inspect/。 在“设备”选项卡上找到 Android 模拟器，然后点击“检查”链接

另见Get Started with Remote Debugging Android Devices

【讨论】：

仅适用于 Android 4.4 及更高版本。目前这仅占市场的 5%。

【参考方案4】：

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

【讨论】：

仅供参考：我知道这是一篇旧帖子，因此对于登陆这里的任何人来说，该产品似乎都在工作，但该链接上没有教程。

【参考方案5】：

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

【参考方案6】：

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

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

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

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

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

希望有帮助！

【参考方案7】：

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

特点：

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

【参考方案8】：

我分两步轻松解决。

更改日志记录级别

在 config.xml 添加这一行

    <log level="DEBUG"/>

运行科尔多瓦日志

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

cordova emulate

打开log.bat时弹出的cmd会显示日志

【讨论】：

config.xml 文件在哪里？？

【参考方案9】：

如果您愿意在某个地方设置 NodeJS，您可以使用 John Boxall 的 iBug 进行一些扩展调试，虽然它是为 iPhone 设计的，但我已经在 Android 上进行了测试，并且运行良好。它基本上是用于移动设备的 firebug lite。我指的是我的 fork，因为 Node 发生了很大变化，而 John 的代码无法在现代 nodeJS 上运行，所以我对其进行了修补以使其在 nodeJS 0.2.3 上运行，YMMV 在最新版本的 nodeJS 上运行。

【参考方案10】：

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

【参考方案11】：

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

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

【参考方案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);
    

【参考方案13】：

如果您正在使用 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/

【参考方案14】：

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="*" />

我竭尽全力试图让任何远程调试工具正常工作，结果却发现默认情况下外部请求被阻止。这救了我。

【参考方案15】：

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

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

在您的 PC/Mac 上运行 GapDebug

在您的 android 设备上启用开发者选项和 USB 调试（设置 -> 开发者选项 (ON) -> USB 调试 (ON)）

如果没有找到开发者选项（设置->关于手机->点击内部版本号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