【问题标题】:debug javascript in android emulator with phonegap使用phonegap在android模拟器中调试javascript
【发布时间】:2011-06-08 16:24:33
【问题描述】:

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

【问题讨论】:

    标签: javascript android android-emulator cordova


    【解决方案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. 其他内容,例如:存储、资源、时间线、配置文件等。

    【讨论】:

    • 当它说“没有连接目标”时,知道我们做错了什么吗?
    • 这个服务还存在吗?
    • 好像没有。
    【解决方案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

    安卓模拟器步骤:

    1. 在桌面计算机上的 Google Chrome 中导航到 chrome://inspect/。
    2. 在“设备”选项卡上找到 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 调试您的应用程序

                      参考

                      【讨论】:

                        猜你喜欢
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 2011-09-30
                        • 1970-01-01
                        • 2016-10-25
                        • 1970-01-01
                        • 1970-01-01
                        相关资源
                        最近更新 更多