如何在Android上调试JavaScript？

我正在从事一个涉及Raphaeljs的项目。原来，它在Android上不起作用。它可以在iPhone上使用。

我该如何在Android浏览器上调试某些东西？它是WebKit，因此，如果我知道版本，是否可以在WebKit的完整版本上对其进行调试会产生相同的结果？

更新：远程调试

以前，控制台日志记录是在Android上调试JavaScript的最佳选择。如今，借助Chrome for Android的远程调试功能，我们可以充分利用Android上的Chrome for Desktop开发人员工具的所有优势。查看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版本要新。

尝试：

1. 打开您要调试的页面

2. 在该页面上，在常规Android浏览器的地址栏中输入：

   about:debug 

   （请注意，什么也没有发生，但是启用了一些新选项。）

适用于我尝试过的设备。在Android浏览器的about：debug上了解更多信息，这些设置有什么作用？

编辑： 还可以帮助检索更多信息（例如行号）的方法是将此代码添加到脚本中：

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

该http://jsconsole.com（http://jsconsole.com/remote-debugging.html）为您提供可用于访问你的网页内容的一个很好的方式。

我使用的是Weinre，它是Apache Cordova的一部分。

使用Weinre，我可以在桌面浏览器中获得Google Chrome的调试控制台，并且可以将Android连接到该调试控制台，并调试HTML和CSS。我可以在控制台中执行Javascript命令，它们会影响Android浏览器中的网页。来自Android的日志消息出现在桌面调试控制台中。

但是，我认为无法查看或逐步查看实际的Javascript代码。因此，我将Weinre与日志消息结合在一起。

（我对JConsole不太了解，但在我看来，JConsole无法进行HTML和CSS检查，仅Javascript命令和日志记录（？）。）

看看jsHybugger。它将允许您针对以下方面远程调试js代码：

• Android混合应用程序（Webview，Phonegap，Worklight）
• 在默认的android浏览器中运行的网页（不是Chrome，它支持不带此工具的ADB扩展名）

工作原理（项目站点上的更多详细信息和替代方法，这是我发现的最佳方法）。

1. 在设备上安装jsHybugger APK
2. 在设备上启用USB调试。
3. 通过USB将Android设备插入台式机
4. 在Android设备（'jsHybugger'）上运行应用
5. 在应用程序中输入目标URL和页面。按启动服务，最后打开浏览器
   • 您将看到一个已安装浏览器的列表，选择一个。
   • 浏览器启动。
6. 返回台式机，然后打开Chrome到chrome：// inspect /
7. 将出现一个检查器窗口，其中包含与Android设备上的页面链接的chrome调试工具。
8. 调试一下！

同样，对于Android上的Chrome，请使用不带jsHybugger的ADB扩展。我认为已经在对此问题的可接受答案中对此进行了描述。

仅供参考，RaphaelJS无法在android上运行的原因是android webkit（与iPhone webkit不同）目前不支持SVG。Google直到最近才得出结论，SVG支持Android是个好主意，因此它将在一段时间内不可用。

在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中显示，但选项卡仅在重新启动后显示。重新启动并尝试附加后，移动浏览器崩溃。

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

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

这就是我们在默认的Android浏览器中呈现SVG图标的方法。

该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=zh_CN这将使您查看所有logcat活动。

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

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

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

您可以尝试YConsole一个js嵌入式控制台。它重量轻且易于使用。

• 捕获日志和错误。
• 对象编辑器。

如何使用 ：

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

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

chrome://inspect/#devices

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

Chrome具有出色的功能，只需将实际的Android Chrome内容（包括检查等）带到PC屏幕上...

• 在设备上启用USB调试，也许您还需要通过一次连接adb devices来触发移动设备上的“允许与...通信”对话框，
• 将Android设备连接到PC，
• 都启动Chrome，并且
• 然后chrome://inspect/#devices在PC上导航到。
• 在此，列出了可浏览的来自手机Chrome的标签。

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

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

我的解决方案是（对于股票浏览器）：

• 库存浏览器
• 将“ consolo.log”导入JS源代码
• 启用调试USB
• Android SDK
• 从Android SDK：monitor.bat
• 监视滤镜作为附件图像

Android studio提供了您需要查看console.log及其他内容的所有内容。在logcat中，只需过滤到“ / Web Console”，您将看到js日志...

如果您有任何问题，可以添加此插件：https : //github.com/apache/cordova-plugin-console

如果您正在寻找非远程选项：

如果通过adb一次授予了android.permission.READL_LOGS，则在较早且无根的Jellybean版本中，可以使用logcat查看器。

在firefox上，有一个控制台插件可以读取并显示所有应用程序日志，还有firebug lite。

您可以通过运行“ npm install javascript-compiler-deva”命令，然后运行“ node.com.js”运行编译器，从npm库尝试“ javascript-compiler-deva”。

它在端口8888上创建一个服务器。然后您可以单击“ http：// localhost：8888 ”并输入您的JavaScript代码，并可以在电话浏览器本身中查看任何JavaScript代码的结果，包括“ console.log”。

它还托管在“ https://javascript-compiler-deva.herokuapp.com/ ”中

本地调试/ about：config ...选项似乎在2020+ chrome / ff / ..浏览器中不再起作用。

另一个具有非远程JS控制台的浏览器是 DevBrowser

或 WebInspector （文件选择器不起作用）