如何在 Android 上调试 javascript？

Question

我正在从事一个涉及 Raphaeljs 的项目。 事实证明，它在 Android 上不起作用。它在 iPhone 上起作用。

我 go 如何在 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 (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 Emulator 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 浏览器的 about: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 浏览器中的网页。 来自 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. 在应用程序中输入目标 URL 和页面。 按开始服务，最后打开浏览器
   • 您将看到已安装浏览器的列表，请选择一个。
   • 浏览器启动。
6. 回到您的台式计算机上，打开 Chrome 以chrome://inspect/
7. 将出现一个检查器窗口，其中包含链接到 Android 设备页面的 chrome 调试工具。
8. 调试出去！

同样，Android 上的 Chrome 使用 ADB 扩展而不使用 jsHybugger。 我认为这已经在这个问题的公认答案中描述过。

Answer 6

仅供参考，RaphaelJS 在 android 上不起作用的原因是 android webkit（与 iPhone webkit 不同）此时不支持 SVG。 谷歌最近才得出结论，SVG 支持安卓系统是一个好主意，所以它在一段时间内还无法使用。

Answer 7

在 Android 5.1.1 上的 Galaxy S6 上对 Android 本机浏览器的完整 Chrome 远程调试：

1. 在手机上启用USB调试（设置、关于、快速点击版本号、开发者设置、USB调试）
2. 打开“互联网”
3. 导航到“about:debug”（你会看到一个错误）
4. 更多菜单>设置>调试>远程调试
5. 使用 USB 数据线将手机连接到计算机
6. 在手机上，在 Internet 网络浏览器中，打开要调试的站点
7. 在电脑上打开 Chrome
8. 导航到“chrome://inspect”
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 通道。 您可以通过“Chromium”进行过滤以获取所有浏览器活动（包括浏览器的内部活动），或者仅通过“控制台”进行过滤以仅查看浏览器控制台日志。

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

Answer 11

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

chrome://inspect/#devices

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

Answer 12

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

• 在设备上启用USB调试，也许您还需要通过adb devices连接一次以触发移动设备上的“允许与...通信”对话框，
• 将 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 13

你可以试试YConsole一个 js 嵌入式控制台。 它轻巧且易于使用。

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

如何使用 ：

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

Answer 14

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

• 股票浏览器
• “consolo.log”进入JS源代码
• 调试 USB 已启用
• 安卓SDK
• 来自 Android SDK：monitor.bat
• 监视器过滤器作为附加图像

Answer 15

Android Studio 提供了查看 console.log 和其他所需的一切。 在 logcat 中只需过滤到“/Web Console”，您就会看到您的 js 日志...

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

Answer 16

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

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

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

Answer 17

您可以通过运行“npm install javascript-compiler-deva”命令然后使用“node compiler.js”运行compiler.is来尝试从npm库中使用“javascript-compiler-deva”。

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

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

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 插件，您可以使用它来调试移动浏览器。

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

Answer 22

试试“vconsole”，也许对你有帮助

Answer 23

“Kiwi 浏览器”具有与桌面 chrome 浏览器相同的工具，可以在 android 中进行本地调试 - 无需 usb。 加载 html 文件并在菜单中选择“开发者工具”。 如需重启调试，重新加载html。