如何在Android上调试javascript ?

我在做一个和拉斐尔有关的项目。事实证明，它在Android上不起作用。它在iPhone上做。

我该怎么调试Android浏览器上的东西呢?它是WebKit，所以如果我知道版本，将调试它的完整的版本的WebKit产生相同的结果?

400882 次浏览
小开
最佳答案

更新:远程调试

以前，控制台日志记录是在Android上调试JavaScript的最佳选择。这些天有了Chrome for Android远程调试，我们可以利用Chrome for Android桌面开发工具的所有优点。查看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 < p >: 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 < / p >

在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 < / p >

注意:

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

小开

仅供参考，RaphaelJS不能在android上运行的原因是android webkit(不像iPhone webkit)此时不支持SVG。谷歌最近才得出结论，SVG支持android是一个好主意，所以它在一段时间内还不会可用。

小开

试一试:

  1. 打开要调试的页面

  2. ，而在该页面上，在普通Android浏览器的地址栏中，键入:

    about:debug

    (注意什么都没有发生，但是一些新的选项已经启用)

在我试过的设备上都有效。阅读更多关于Android浏览器是关于调试的，这些设置是做什么的?

<强>编辑: 在脚本中添加以下代码还有助于检索更多信息，如行号:

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科尔多瓦的一部分。

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

然而，我认为这是不可能查看或逐步通过实际的Javascript代码。所以我把Weinre和日志信息结合起来。

(我不太了解JConsole，但在我看来，HTML和CSS检查是不可能与JConsole，只有Javascript命令和日志记录(?)。)

小开

Raphael在3.0之前的Android浏览器上不支持，这就是你的问题所在。它们不支持SVG图形。不过它确实支持canvas。如果你不需要动画，你可以用canvas渲染图形:

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

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

小开

看看jsHybugger。它将允许你远程调试你的js代码:

  • Android混合应用程序 (webview, phonegap, worklight)
  • 运行在默认android浏览器中的Web页面(不是Chrome，它支持ADB扩展没有这个工具)

这是如何工作的(在项目网站上有更多的细节和替代方案，这是我发现的最好的方法)。

  1. 在您的设备上安装jsHybugger APK
  2. 在您的设备上启用USB调试。
  3. 通过USB将Android设备插入桌面电脑
  4. 在Android设备上运行应用程序('jsHybugger')
  5. 在应用程序中输入目标URL和页面。按启动服务，最后打开浏览器
    • 你会看到一个已安装浏览器的列表，选择一个。
    • 浏览器启动。
      • 李< / ul > < / >
    • 回到你的桌面电脑打开Chrome到chrome: / /检查/
    • 将出现一个检查窗口，chrome调试工具链接到Android设备的页面。
    • < em >调试!< / em >

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

小开

about:debug(或chrome:\\debug两者都表示页面无法找到，但在设置中启用调试菜单)在Chrome或Opera上在Android KitKat 4.4.2上在三星Tab上尝试时

如果您在设备上具有ROOT权限，则可以直接在设备上查看控制台消息。使用像CatLog这样的应用程序来查看日志输出- https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en这将让你查看所有的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)
小开

我的解决方案是(对于普通浏览器):

  • 股票的浏览器
  • " console .log"导入JS源代码
  • 启用调试USB
  • Android SDK
  • 来自Android SDK: monitor.bat
  • 监控过滤器作为附件图像enter image description here
小开

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

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

使用方法:

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

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

  1. 开启手机USB调试(设置，关于，快速点击版本号，开发人员设置，USB调试)
  2. 打开“网络”
  3. 导航到“about:debug”(你会看到一个错误)
  4. MORE菜单>设置>调试>远程调试
  5. 用USB数据线连接手机和电脑
  6. 在手机上，在Internet web浏览器中，打开要调试的站点
  7. 在电脑上打开Chrome
  8. 导航到'chrome://inspect'
  9. 单击要检查的浏览器选项卡上的“检查”

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

小开

Android工作室提供所有你需要看到console.log和其他。在logcat中，只要过滤到“/Web Console”，你就会看到你的js日志…

如果你遇到任何问题，你可以添加这个插件: https://github.com/apache/cordova-plugin-console < / p >
小开

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

小开

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

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

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

小开

当运行Android模拟器时，打开你的谷歌Chrome浏览器，在“地址字段”中输入:

chrome://inspect/#devices

您将看到远程目标列表。找到你的目标，然后点击‘inspect’链接。

小开

你可以试试npm library中的"javascript-compiler-deva"，先运行"npm install javascript-compiler-deva"命令，然后运行编译器。正在使用"node compiler.js"。

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

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

小开

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之后浏览器没有显示任何内容)

小开

本地调试/about:config…选项似乎在2020+ chrome/ff/..浏览器了。

另一个带有非远程js控制台的浏览器是 DevBrowser < / p > < p >或 WebInspector (文件选择器不工作)

小开

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

将此添加到您的页面:

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

将在打开控制台的页面中添加一个浮动图标。

小开

你可以试试https://github.com/fullpipe/screen-log。试着让它简洁明了。

小开

试试“vconsole”，也许能帮到你


提交答案