如何在Android上调试javascript？

Question

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

我如何调试Android浏览器上的内容？它是WebKit，所以如果我知道该版本，将在完整的版本的WebKit上调试它会产生相同的结果吗？

Answer 1

更新：远程调试

以前，控制台日志记录是在Android上调试JavaScript的最佳选择。目前，通过Chrome for Android远程调试，我们可以充分利用Android上适用于桌面开发者工具的Chrome的所有优点。查看https://developers.google.com/chrome-developer-tools/docs/remote-debugging了解详情。

---

更新：JavaScript控制台

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

目前在Android 4.0.3（Ice Cream Sandwich）中，logcat输出到浏览器频道。因此，您可以使用adb logcat browser:* *:S进行过滤。

---

原始答案

您可以使用内置的console JavaScript对象打印可以使用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

N.B。

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

Answer 2

尝试：

1. 打开要调试的页面

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

   about:debug 
   

   （注意没有任何反应，但已启用了一些新选项。）

适用于我尝试过的设备。阅读Android browser's about:debug, what do those settings do?

的更多信息

修改 什么也有助于检索更多信息，如行号是将此代码添加到您的脚本：

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. 打开＆＃34;互联网＆＃34;
3. 导航至＆＃39; about：debug＆＃39; （你会看到一个错误）
4. 更多菜单＆gt;设置＆gt;调试＆gt;远程调试
5. 使用USB连接线将手机连接到计算机
6. 在手机上，在Internet网络浏览器中，打开要调试的网站
7. 在计算机上打开Chrome
8. 导航至＆＃39; chrome：// inspect＆＃39;
9. 单击要检查的浏览器选项卡上的检查

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

Answer 8

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

渲染图形

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

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

Answer 9

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

Answer 10

在三星标签上的Android KitKat 4.4.2上的Chrome或Opera上试用about:debug（或chrome:\\debug两者都说无法找到页面，但在设置中启用调试菜单

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

在Android KitKat / 4.4.2中，浏览器控制台输出到Chromium频道。你可以过滤＆＃34; Chromium＆＃34;获取所有浏览器活动（包括浏览器的内部活动），或者只是按＆＃34; Console＆＃34;只能看到浏览器控制台日志。

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

Answer 11

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

chrome://inspect/#devices

您将看到远程目标列表。找到您的目标，然后点击＆＃39;检查＆＃39;链接。

Answer 12

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

• Stock Browser
• “consolo.log”进入JS源代码
• 启用调试USB
• Android SDK
• 来自Android SDK：monitor.bat
• 将过滤器监视为附加图像

Answer 13

您可以尝试使用YConsole js嵌入式控制台。它重量轻，使用简单。

• 抓住日志和错误。
• 对象编辑器。

使用方法：

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

Answer 14

Android studio提供了查看console.log等所需的一切。在logcat中只需过滤到“/ Web Console”，您将看到您的js日志......

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

Answer 15

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

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

在Firefox上，有一个console addon可以读取并显示所有应用日志，还有firebug lite。

Answer 16

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

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

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

Answer 17

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

• 在设备上启用USB调试，
• 将Android设备连接到PC，
• 同时启动Chrome和
• 然后在PC上导航至chrome://inspect/#devices。
• 在这里，列出了可以从手机Chrome浏览器中查看的标签。

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

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

Answer 18

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

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

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

Answer 19

没有人提到 liriliri/eruda，它添加了自己的用于移动网站/应用程序的调试工具

将此添加到您的页面：

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

将向您的页面添加一个浮动图标以打开控制台。

Answer 20

你可以试试https://github.com/fullpipe/screen-log。试图让它干净和简单。

Answer 21

有一个名为 OutFront JS 的 npm 插件，您可以使用它来调试移动浏览器。

它基本上将控制台中的所有消息、警告和错误记录到屏幕上的弹出窗口中。