如何在安卓设备上调试Javascript?

Question

我正在进行一个涉及 Raphaeljs 的项目。结果发现，它在安卓上无法工作，但在 iPhone 上可以。

我该如何在安卓浏览器上调试？它使用的是 WebKit，所以如果我知道版本号，能否在完整版本的 WebKit 上调试并获得相同的结果？

- Jerod Venema

---

离题了，但考虑一下查看Snap.svg。它是同一位开发者重新制作的 RaphaelJS 版本。它在不支持旧浏览器的情况下重新创建，因此速度更快，代码更清晰等等。 - Lajos Mészáros

已接受的答案注：在三星体验版本大于等于9的情况下，如果您没有找到您的设备，请将USB类型切换为声音连接器。 - BOZ

部分重复：在 Android 手机上是否可以打开 Chrome 的开发者工具控制台？- Stack Overflow - user202729

Answer 1

更新：远程调试

以前，在Android上调试JavaScript时，控制台记录是最好的选择。现在，有了Chrome for Android远程调试，我们可以在Android上使用Chrome for Desktop开发者工具的所有好处。欲了解更多信息，请访问https://developers.google.com/chrome-developer-tools/docs/remote-debugging。

---

更新：JavaScript控制台

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

目前在Android 4.0.3（冰淇淋三明治）中，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 注意： 不是 Safari 发布版本的 WebKit 版本号后面会有一个 + 号，并且它们的版本号通常比 WebKit 的最新发布版本高。例如，528+ 是一个非官方构建的 WebKit 版本，它比作为 Safari 3.1.2 一部分发布的 525.x 版本更新。

- Pierre-Antoine LaFayette

---

我什么时候才能在 Android 上本地调试，以应对无法远程调试的情况？ - Michael

不确定。在像手机这样的小设备上，使用完整的Web检查器并没有太多意义，因为屏幕空间非常有限。在平板电脑上可能更有意义，但他们必须重新设计适用于触摸界面的Web检查器，这需要相当大的努力。也许他们正在开发中，但谁知道呢。 - Pierre-Antoine LaFayette

我猜想第一版设计不做任何重大改变可能是一个不错的开始，也就是允许使用大量功能。一些平板电脑甚至配备了触控笔，所以鼠标事件可以同样适用。 - Michael

这是旧的内容，似乎不再完全正确。在Android 10上使用Chrome 76或Pixel 3XL，我找不到调试控制台。 - cdonner

请提及 https://dev59.com/yHE95IYBdhLWcg3wbtXO#33927560，这对我很有用。在撰写本文时，最新的 Android Chrome 上没有远程调试需求，也无需使用“about:debug”技巧。 - Alexandr Zarubkin

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;
}

- Mads Mobæk

---

那个相关的问题最终帮助我弄清楚了如何在启用后实际显示JS控制台。 - Alex Korban

我刚尝试过了，但在我的安卓4.0.3版本的Nexus S上，about:debug这个技巧没有起作用。 - derflocki

您应该尝试从当前打开的标签页中导航到 about:debug。它不会跳转到新的页面，而是在页面顶部显示“显示JavaScript控制台”。如果您尝试从新标签页访问about:debug，它将无法正常工作。 - Denilson Sá Maia

这只是原生浏览器，对吧？我试着在安卓Chrome的KitKat测试版上使用，但没有成功。（似乎KitKat不再有原生浏览器了） - James

需要使用安卓系统自带的浏览器才能运行，谷歌浏览器不支持 :) - giorgio79

如果您的制造商使用Kitkat库存浏览器，那么它就是Chromium。about:debug实际上会转到chrome://debug，显示“找不到”，但在设置中显示了“调试”选项。其中一些选项直到打开新标签后才会生效。 - cde

Answer 3

http://jsconsole.com（http://jsconsole.com/remote-debugging.html）提供了一种很好的方式，让您可以访问网页内容。

- tortexy

---

jsconsole.com自2017年9月起不再支持远程调试。我创建了一个替代网站https://www.jsconsole.net/，可以免费使用 :) - Steven Love

@StevenLove，你的页面无法正常工作。 - Peter VARGA

Answer 4

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

通过Weinre，我可以在桌面浏览器中获得Google Chrome的调试控制台，并连接到该调试控制台的Android设备上，以调试HTML和CSS。我可以在控制台中执行Javascript命令，并且它们会影响Android浏览器中的Web页面。来自Android的日志消息显示在桌面调试控制台中。

然而，我认为不可能查看或浏览实际的Javascript代码。因此，我将Weinre与日志消息结合使用。

（我对JConsole了解不多，但我认为在JConsole中无法进行HTML和CSS检查，只能使用Javascript命令和日志记录（？）。）

- KajMagnus

---

在https://dev59.com/1WYr5IYBdhLWcg3w4t3m上添加了一份关于如何在OS X上使用weinr的逐步指南。 - leymannx

我已经尝试过Weinre，但对该工具并不满意。日志并不是很可靠。有些错误没有显示出来。即使它们被显示出来，Weinre只会显示错误消息，而不是堆栈跟踪。这让我非常恼火。 - Lewis

我已经尝试过Weinre，但对该工具并不满意。日志并不是很可靠。有些错误没有显示出来。即使它们被显示出来，Weinre只显示错误消息，而没有堆栈跟踪。这让我非常恼火。 - Lewis

Answer 5

看一下jsHybugger，它将允许您远程调试以下JS代码：

• Android混合应用程序（webview，phonegap，worklight）
• 在默认的安卓浏览器中运行的网页（不支持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。我认为这已经在回答此问题的被接受答案中描述过了。

- cyberflohr

---

为什么会被踩？这是少数几个支持本地应用程序内WebView远程调试的工具之一。 - Alfie Hanssen

因为它没有说明如何做，除了指向整个项目的链接，所以在成功之前你必须自己挖掘很多。 - DATEx2

这个工具其实非常好，解决了我的问题。可惜我不得不在谷歌上挖掘它，而不是看到这个答案，因为“某人”决定把它埋起来。（我最终在这里找到了答案）我会添加一些细节来改进这个答案，看看整个 SO 的运作方式如何？ - Aardvark

jsHybugger APK在Google Play上已不再提供下载。该项目存放在这里：https://github.com/dcendents/jsHybugger；但似乎不包括生成APK的代码。 - Adrian Herscu

Answer 6

如何在Android 5.1.1上的Galaxy S6手机上全面启用Chrome远程调试原生浏览器：

1. 在手机上启用USB调试（设置，关于，快速点击构建号码，开发人员选项，USB调试）
2. 打开“互联网”
3. 导航到 'about:debug'（会显示错误）
4. MORE菜单 > 设置 > 调试 > 远程调试
5. 使用USB电缆将手机连接到计算机
6. 在手机上的Internet Web浏览器中打开要调试的站点
7. 打开计算机上的Chrome
8. 导航到 'chrome://inspect'
9. 点击您要检查的浏览器标签上的 "检查" 按钮

Galaxy S5设备在Chrome中显示，但选项卡仅在重新启动后才显示。 在重启并尝试附加后，移动浏览器会崩溃。

- Charlie

Answer 7

顺便提一下，RaphaelJS在安卓设备上无法工作的原因是因为安卓的Webkit（与iPhone的Webkit不同）目前不支持SVG。谷歌最近才得出结论，认为在安卓上支持SVG是个好主意，所以它暂时还不可用。

- Ludvig Svenonius

---

感谢Ludvig，我在原始帖发布后不久就弄清楚了，但仍然感谢后续跟进。 - Jerod Venema

这不是主要问题的答案，请将其转换为评论（或单独的问题），然后删除此内容。 - PJ Brunet

Answer 8

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无果后，发现了上述手册）

- BurninLeo

Answer 9

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

- honzajde

---

是的，但控制台上没有任何内容。 - Nico

Answer 10

Raphael在3.0之前的Android浏览器上不受支持，这就是你的问题所在。它们不支持SVG图形。但是它确实支持canvas。如果您不需要对其进行动画处理，则可以使用canvg呈现图形：

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

这就是我们在默认的Android浏览器中呈现SVG图标时遇到问题时的解决方案。

- user3905