如何在Android上调试javascript?

以前,控制台日志记录是在Android上调试JavaScript的最佳选择。现在有了Chrome for Android远程调试,我们可以在Android上充分利用Chrome for Desktop Developer工具的所有优点。退房 https://developers.google.com/chrome-developer-tools/docs/remote-debugging 了解更多信息。

更新:JavaScript控制台

目前在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://...

如果你打字 javascript:alert(navigator.userAgent)

镀铬: 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

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版本更新。

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

http://jsconsole.com ( http://jsconsole.com/remote-debugging.html )提供了一种很好的方式,您可以使用它访问网页的内容。

Weinre ,部分 Apache Cordova .

但是,我认为不可能查看或逐步浏览实际的Javascript代码。因此,我将Weinre与日志消息结合起来。

)我不太了解你 JConsole 但在我看来,HTML和CSS检查在JConsole中是不可能的,只有Javascript命令和日志(?)

jsHybugger . 它将允许您远程调试js代码:

• Android混合应用程序
• 在中运行的网页 默认android浏览器 (不是Chrome,它支持没有此工具的ADB扩展)

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

3. 通过USB将Android设备插入桌面计算机
4. 在Android设备上运行应用程序('jsHybugger')
5. 在应用程序中输入目标URL和页面。按开始服务,最后打开浏览器
   • 您将看到一个已安装浏览器的列表,请选择一个。
6. 回到您的桌面计算机上打开Chrome
7. 将出现一个inspectors窗口,其中chrome调试工具链接到Android设备上的页面。
8. 调试完毕!

仅供参考,RaphaelJS不能在android上工作的原因是android webkit(与iPhone webkit不同)目前不支持SVG。谷歌直到最近才得出结论,SVG支持android是一个好主意,因此它在一段时间内还不能使用。

2. 开放“互联网”
3. 导航到“关于:调试”(您将看到一个错误)
5. 使用USB电缆将手机连接到计算机
7. 在计算机上打开Chrome
8. 导航到'chrome://inspect'
9. 单击要检查的浏览器选项卡上的检查

Galaxy S5设备以Chrome显示,但选项卡仅在重新启动后显示。重新启动并尝试连接后,移动浏览器崩溃。

Raphael在3.0之前的Android浏览器上不受支持,这就是你的问题所在。它们不支持SVG图形。但它确实支持画布。如果不需要设置动画,可以使用canvg渲染图形:

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

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

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

这个 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”进行过滤以获取所有浏览器活动(包括浏览器的内部活动),或者只按“Console”进行过滤以仅查看浏览器控制台日志。

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

chrome://inspect/#devices

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

Chrome有一个很好的功能,只需将Android Chrome的实际内容(包括检查等)显示在电脑屏幕上。。。

• 在设备上启用USB调试,可能您还需要通过 adb devices 要在移动设备上触发“允许与…通信”对话框,
• 将Android设备连接到PC,
• 在两者上都启动Chrome,然后
• 然后导航到 chrome://inspect/#devices 在电脑上。
• 这里列出了手机Chrome的标签,可以对其进行检查。

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

(发现 adb logcat (在浏览器中未显示任何内容)

你可以试试 YConsole

• 捕获日志和错误。

如何使用:

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

我的解决方案是(对于股票浏览器):

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

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

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

在firefox上,有一个 console addon firebug lite .

它在8888端口创建一个服务器。然后您可以点击“ http://localhost:8888

它还位于“ https://javascript-compiler-deva.herokuapp.com/ "

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

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

WebInspector

没有人提到 liriliri/eruda

将此添加到您的页面:

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

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

https://github.com/fullpipe/screen-log . 尽量使它干净和简单。

有一个名为npm的插件 OutFront JS

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