如何在Android上调试javascript？

Question

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

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

Answer 1

更新:远程调试

以前,控制台日志记录是在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版本更新.

Answer 2

尝试:

1. 打开要调试的页面

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

   about:debug 
   

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

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

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

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

• Android混合应用(webview,phonegap,worklight)
• 在默认的Android浏览器中运行的网页(不是Chrome,它支持没有此工具的ADB扩展)

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

1. 在您的设备上安装jsHybugger APK
2. 在您的设备上启用USB调试.
3. 通过USB将Android设备插入台式计算机
4. 在Android设备上运行应用程序('jsHybugger')
5. 在应用中输入目标网址和页面.按启动服务,最后打开浏览器
   • 您将看到已安装的浏览器列表,请选择一个.
   • 浏览器启动.
6. 回到桌面计算机上打开Chrome到chrome:// inspect /
7. 将出现一个检查器窗口,其中chrome调试工具链接到Android设备上的页面.
8. 调试走!

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

Answer 6

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

Answer 7

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

1. 在手机上启用USB调试(设置,关于,快速点击内部版本号,开发人员设置,USB调试)
2. 打开"互联网"
3. 导航到'about:debug'(您将看到错误)
4. 更多菜单>设置>调试>远程调试
5. 使用USB线将手机连接到计算机
6. 在手机上,在Internet Web浏览器中,打开要调试的站点
7. 在计算机上打开Chrome
8. 导航到'chrome:// inspect'
9. 单击要检查的浏览器选项卡上的检查

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

Answer 8

Chrome 有一个很棒的功能，只需将实际的 Android Chrome 内容（包括检查等）显示到 PC 屏幕上...

• 在设备上启用 USB 调试，也许您还需要连接一次 viaadb devices来触发移动设备上的“允许与...通信”对话框，
• 将 Android 设备连接到 PC，
• 在两者上启动 Chrome，并且
• 然后导航至chrome://inspect/#devicesPC 上。
• 此处列出了手机 Chrome 中的选项卡并可以进行检查。

网上还有详细的手册：https ://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

（发现adb logcat浏览器什么也没显示）

Answer 9

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

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

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

Answer 10

该about:debug（或chrome:\\debug两者说的页面不能被发现，但能够在设置调试菜单）上三星Tab键在Chrome或Opera试图在Android 4.4.2奇巧时

如果您在设备上拥有 ROOT 权限，则可以直接在设备上查看控制台消息。使用 CatLog 之类的应用程序查看日志输出 - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en这将让您查看所有 logcat 活动。

在 Android KitKat/4.4.2 中，浏览器控制台输出到 Chromium 通道。您可以通过“Chromium”进行过滤以获取所有浏览器活动（包括浏览器的内部活动），或者仅通过“控制台”进行过滤以仅查看浏览器控制台日志。

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

Answer 11

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

Answer 12

运行 Android 模拟器时，打开 Google Chrome 浏览器，然后在“地址字段”中输入：

chrome://inspect/#devices

您将看到远程目标的列表。找到您的目标，然后单击“检查”链接。