如何在Android上调试javascript？

我正在开展涉及Raphaeljs的项目.事实证明,它不适用于Android.它确实在iPhone上.

我如何在Android浏览器上调试一些东西？它是WebKit,所以如果我知道版本,那么在完整版的WebKit 上调试它会产生相同的结果吗？

1> Pierre-Antoi..：

---

更新:远程调试

以前,控制台日志记录是在Android上调试JavaScript的最佳选择.目前,通过Chrome for Android远程调试,我们可以充分利用Android上Chrome for Desktop Developer Tools的所有优点.有关详情,请访问https://developers.google.com/chrome-developer-tools/docs/remote-debugging.

---

更新:JavaScript控制台

您还可以在URL栏中导航到about:debug以激活调试菜单和使用最新Android设备的JavaScript错误控制台.您应该在浏览器的顶部看到SHOW JAVASCRIPT CONSOLE.

目前在Android 4.0.3(冰淇淋三明治)中,logcat输出到浏览器通道.所以你可以过滤使用adb logcat browser:* *:S.

---

原始答案

您可以使用内置的consoleJavaScript对象来打印可以查看的日志消息adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

生成此输出:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

确定WebKit的版本

如果您javascript:alert(navigator.userAgent)在位置栏中输入,您将看到列出的WebKit版本,例如

在Chrome中: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

在Android模拟器上 Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

不属于Safari版本的WebKit版本在版本号后面有+,其版本号通常高于最新发布的WebKit版本.因此,例如,528 +是WebKit的非官方版本,比作为Safari 3.1.2的一部分提供的525.x版本更新.

---

什么时候我什么时候可以在Android上进行本地调试？有些时候我无法远程进行调试？

2> Mads Mobæk..：

---

尝试:

打开要调试的页面

在该页面上,在股票Android浏览器的地址栏中输入:

about:debug 

(注意没有任何反应,但已启用了一些新选项.)

适用于我尝试过的设备.阅读更多有关Android浏览器的信息:debug,这些设置有何功能？

编辑: 还有助于检索更多信息,如行号,是将此代码添加到您的脚本:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

---

我刚试过,但是关于:调试技巧在我的带有ICS 4.0.3的Nexus S上无效.

---

这只是股票浏览器,对吧？我在KitKat的Chrome for Android测试版中试用它没有任何运气.(似乎KitKat不再有股票浏览器)

---

这需要一个Android股票浏览器,它不适用于Chrome :)

---

您应该尝试从打开当前页面的同一选项卡中导航到"about:debug".它不会导航,而是在顶部显示"SHOW JAVASCRIPT CONSOLE".如果您尝试从新选项卡访问`about:debug`,它将无法正常工作.

---

Kitkat股票浏览器,如果您的制造商使用它,是Chromium.`about:debug`真的转发到`chrome:// debug`,它说"找不到",但在设置中显示了`Debug`选项.在之后打开新选项卡之前,某些选项不会生效.

---

就是说，Javascript控制台选项似乎不起作用。

---

刚在Nexus 5上尝试过。不起作用。

3> 小智..：

---

该http://jsconsole.com(http://jsconsole.com/remote-debugging.html)提供您可以使用您的网页访问内容的好方法.

4> KajMagnus..：

---

我使用Weinre,Apache Cordova的一部分.

使用Weinre,我可以在桌面浏览器中使用Google Chrome的调试控制台,并可以将Android连接到该调试控制台,并调试HTML和CSS.我可以在控制台中执行Javascript命令,它们会影响Android浏览器中的Web页面.来自Android的日志消息显示在桌面调试控制台中.

但是我认为不可能查看或单步执行实际的Javascript代码.所以我将Weinre与日志消息结合起来.

(我对JConsole了解不多,但在我看来,JConsole无法进行HTML和CSS检查,只有Javascript命令和日志记录(？).)

---

@downvoter为什么有人为此投票？请留下评论并解释原因,以便我可以解决这个问题的任何问题.

5> cyberflohr..：

---

看看jsHybugger.它将允许您远程调试您的js代码:

Android混合应用(webview,phonegap,worklight)

在默认的Android浏览器中运行的网页(不是Chrome,它支持没有此工具的ADB扩展)

这是如何工作的(更多细节和项目网站上的替代品,这是我发现的最好的方式).

在您的设备上安装jsHybugger APK

在您的设备上启用USB调试.

通过USB将Android设备插入台式计算机

在Android设备上运行应用程序('jsHybugger')

在应用中输入目标网址和页面.按启动服务,最后打开浏览器

您将看到已安装的浏览器列表,请选择一个.

浏览器启动.

回到桌面计算机上打开Chrome到chrome:// inspect /

将出现一个检查器窗口,其中chrome调试工具链接到Android设备上的页面.

调试走!

同样,Android上的Chrome使用不带jsHybugger的ADB扩展程序.我认为这已经在这个问题的公认答案中描述过了.

---

这个工具实际上非常好,解决了我的问题.太糟糕了,我不得不在谷歌上搜索谷歌,而不是看到这个答案,因为*有人*决定埋葬它.(我先来到这里)我会添加一些细节来改进这个答案,看看整个SO的工作原理是什么？

6> 小智..：

---

仅供参考,RaphaelJS无法在Android上运行的原因是android webkit(与iPhone webkit不同)此时不支持SVG.谷歌最近才得出结论,SVG支持Android是一个好主意,因此它暂时还不可用.

7> Charlie..：

---

Android 5.1.1上Galaxy S6上Android原生浏览器的全Chrome远程调试:

在手机上启用USB调试(设置,关于,快速点击内部版本号,开发人员设置,USB调试)

打开"互联网"

导航到'about:debug'(您将看到错误)

更多菜单>设置>调试>远程调试

使用USB线将手机连接到计算机

在手机上,在Internet Web浏览器中,打开要调试的站点

在计算机上打开Chrome

导航到'chrome:// inspect'

单击要检查的浏览器选项卡上的检查

Galaxy S5设备显示在Chrome中,但只有重新启动后才能显示标签.重新启动并尝试连接后,移动浏览器崩溃.

8> 小智..：

---

3.0之前的Android浏览器不支持Raphael,这就是你的问题所在.他们不支持SVG图形.它确实支持画布.如果您不需要为其设置动画,则可以使用canvg渲染图形:

http://code.google.com/p/canvg/

这就是我们如何解决这个问题,在默认的Android浏览器中渲染SVG图标.

9> honzajde..：

---

放入地址行chrome://about。您将看到所有可能的开发页面的链接。

---

是的，但是没有任何控制台