当前位置：theitroad>如何在 Android 上调试 javascript？

如何在 Android 上调试 javascript？

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/2314886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-20 05:21:32 　来源:igfitidea点击:

How can I debug javascript on Android?

androiddebuggingwebkit

提问by jvenema

I'm working on a project that involves Raphaeljs. Turns out, it doesn't work on Android. It doeson the iPhone.

我正在做一个涉及 Raphaeljs 的项目。事实证明，它不适用于Android。它确实在iPhone上。

How the heck to I go about debugging something on the Android browser? It's WebKit, so if I know the version, will debugging it on that fullversion of WebKit produce the same results?

我到底要如何在 Android 浏览器上调试一些东西？它是 WebKit，所以如果我知道版本，在WebKit 的完整版本上调试它会产生相同的结果吗？

采纳答案by Pierre-Antoine LaFayette

Update: Remote Debugging

更新：远程调试

Previously, console logging was the best option for debugging JavaScript on Android. These days with Chrome for Android remote debugging, we are able to make use of all the goodness of the Chrome for Desktop Developer Tools on Android. Check out https://developers.google.com/chrome-developer-tools/docs/remote-debuggingfor more information.

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

Update: JavaScript Console

更新：JavaScript 控制台

You can also navigate to about:debug in the URL bar to activate the debug menu and the JavaScript error console with recent Android devices. You should see SHOW JAVASCRIPT CONSOLE at the top of the Browser.

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

Currently in Android 4.0.3 (Ice Cream Sandwich), the logcat outputs to the browser channel. So you can filter using adb logcat browser:* *:S.

目前在 Android 4.0.3 (Ice Cream Sandwich) 中，logcat 输出到浏览器通道。因此，您可以使用adb logcat browser:* *:S.

Original Answer

原答案

You can use the built in consoleJavaScript object to print log messages that you can review with adb logcat.

您可以使用内置的consoleJavaScript 对象打印日志消息，您可以使用adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

Produces this output:

产生这个输出：

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://...

Determining the version of WebKit

确定 WebKit 的版本

If you type javascript:alert(navigator.userAgent)in the location bar you'll see the WebKit version listed e.g.

如果您javascript:alert(navigator.userAgent)在地址栏中键入，您将看到列出的 WebKit 版本，例如

In 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

在 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

On 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

在安卓模拟器上 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.

NB

Versions of WebKit that are not part of a Safari release have a + after the version number, and their version number is generally higher than the latest released version of WebKit. So, for example, 528+ is an unofficial build of WebKit that is newer than the 525.x version that shipped as part of Safari 3.1.2.

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

回答by Mads Mob?k

Try:

尝试：

  1. open the page that you want to debug

  2. while on that page, in the address bar of a stock Android browser, type:

    about:debug

    (Note nothing happens, but some new options have been enabled.)

  1. 打开要调试的页面

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

    about:debug

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

Works on the devices I have tried. Read more on Android browser's about:debug, what do those settings do?

适用于我尝试过的设备。阅读更多关于Android 浏览器的 about:debug，这些设置有什么作用？

Edit:What also helps to retrieve more information like line number is to add this code to your script:

编辑：还有助于检索更多信息（如行号）的是将此代码添加到您的脚本中：

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

回答by tortexy

The http://jsconsole.com( http://jsconsole.com/remote-debugging.html) provides a nice way you can use to access the content of you webpage.

该http://jsconsole.com（http://jsconsole.com/remote-debugging.html）为您提供可用于访问你的网页内容的一个很好的方式。

回答by KajMagnus

I use Weinre, part of Apache Cordova.

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

With Weinre, I get Google Chrome's debug console in my desktop browser, and can connect Android to that debug console, and debug HTML and CSS. I can execute Javascript commands in the console, and they affect the Web page in the Android browser. Log messages from Android appear in the desktop debug console.

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

However I think it's not possible to view or step through the actual Javascript code. So I combine Weinre with log messages.

但是，我认为无法查看或逐步执行实际的 Javascript 代码。所以我将 Weinre 与日志消息结合起来。

(I don't know much about JConsolebut it seems to me that HTML and CSS inspection isn't possible with JConsole, only Javascript commands and logging (?).)

（我对JConsole不太了解，但在我看来，JConsole 无法检查 HTML 和 CSS，只能检查 Javascript 命令和日志记录 (?)。）

回答by cyberflohr

Take a look at jsHybugger. It will allow you to remotely debug your js code for:

看看jsHybugger。它将允许您远程调试您的 js 代码：

  • Android hybrid apps(webview, phonegap, worklight)
  • Web pages which runs in the default android browser(not Chrome, it supports the ADB extension without this tool)
  • Android 混合应用程序（webview、phonegap、worklight）
  • 在默认 android 浏览器中运行的网页（不是 Chrome，它支持没有这个工具的 ADB 扩展）

How this works (more details and alternatives on the projects site, this was what I found to be the best way).

这是如何工作的（项目网站上的更多详细信息和替代方案，这是我发现的最佳方式）。

  1. Install the jsHybugger APK on your device
  2. Enable USB debugging on you device.
  3. Plug the Android device into your desktop computer via USB
  4. Run the app on the Android device ('jsHybugger')
  5. Enter the target URL and page in the app. Press Start Service and finally Open Browser
    • You'll be presented with a list of installed browsers, choose one.
    • The browser launches.
  6. Back on your desktop computer open Chrome to chrome://inspect/
  7. An inspectors window will appear with the chrome debugging tools linked to the page on the Android device.
  8. debug away!
  1. 在您的设备上安装 jsHybugger APK
  2. 在您的设备上启用 USB 调试。
  3. 通过 USB 将 Android 设备插入台式计算机
  4. 在 Android 设备上运行应用程序 ('jsHybugger')
  5. 在应用程序中输入目标 URL 和页面。按开始服务，最后打开浏览器
    • 您将看到已安装浏览器的列表，请选择一个。
    • 浏览器启动。
  6. 回到您的台式计算机上，打开 Chrome 以chrome://inspect/
  7. 将出现一个检查器窗口，其中包含链接到 Android 设备页面的 chrome 调试工具。
  8. 调试出去！

Again, with Chrome on Android use the ADB extension without jsHybugger. I think this already described in the accepted answer to this question.

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

回答by Ludvig Svenonius

FYI, the reason why RaphaelJS doesn't work on android is that android webkit (unlike iPhone webkit) doesn't support SVG at this time. Google has only recently come to the conclusion that SVG support an android is a good idea, so it won't be available yet for some time.

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

回答by Charlie

Full Chrome remote debugging of Android native browser on a Galaxy S6 on Android 5.1.1:

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

  1. Enable USB Debugging on phone (Settings, about, rapidly tap build number, developer settings, USB debugging)
  2. Open "Internet"
  3. Navigate to 'about:debug' (you will see an error)
  4. MORE menu > Settings > Debug > Remote Debugging
  5. Attach phone to computer with USB cable
  6. On the phone, in the Internet web browser, open the site you want to debug
  7. Open Chrome on computer
  8. Navigate to 'chrome://inspect'
  9. Click inspect on the browser tab you want to inspect
  1. 在手机上启用USB调试（设置、关于、快速点击版本号、开发者设置、USB调试）
  2. 打开“互联网”
  3. 导航到“about:debug”（你会看到一个错误）
  4. 更多菜单>设置>调试>远程调试
  5. 使用 USB 数据线将手机连接到计算机
  6. 在手机上，在 Internet 网络浏览器中，打开要调试的站点
  7. 在电脑上打开 Chrome
  8. 导航到 'chrome://inspect'
  9. 单击要检查的浏览器选项卡上的检查

The Galaxy S5 devices shows in Chrome but the tabs only show after you restart. After restarting and attempting to attach, the mobile browser crashes.

Galaxy S5 设备显示在 Chrome 中，但标签仅在您重新启动后显示。重新启动并尝试附加后，移动浏览器崩溃。

回答by honzajde

Put into address line chrome://about. You will see links to all possible dev pages.

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

回答by user3663132

The about:debug(or chrome:\\debugboth of which say page cannot be found, but enable the Debug menu in the settings) when tried on Chrome or Opera on Android KitKat 4.4.2 on a Samsung Tab

该about:debug（或chrome:\\debug两者说的页面不能被发现，但能够在设置调试菜单）上三星Tab键在Chrome或Opera试图在Android 4.4.2奇巧时

If you have ROOT permissions on your device, you can view the console messages directly on the device. Use an app like CatLog to view the log output - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=enThis will let you view all logcat activity.

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

In Android KitKat/4.4.2, the browser console is output to the Chromium channel. You could filter by "Chromium" to get all browser activity (include browser's internal activity), or simply filter by "Console" to only see the Browser console log.

在 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)

回答by user3905

Raphael is not supported on pre 3.0 Android browsers, that's what your problem is. They have no support for SVG graphics. It does have support for canvas though. If you don't need to animate it, you could render the graphics with canvg:

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

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

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

That's how we got around this issue for rendering SVG icons in the default Android browser.

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

相关推荐

如何在 Android TextView 中更改文本

如何在 Android TextView 中更改文本

如何让 Android Studio 将文件识别为源（测试）

如何让 Android Studio 将文件识别为源（测试）

在 android 平台上启动服务

在 android 平台上启动服务

Android org.json.JSONException: 类型 java.lang.String 的值 <!DOCTYPE 不能转换为 JSONObject

Android org.json.JSONException: 类型 java.lang.String 的值 <!DOCTYPE 不能转换为 JSONObject

相关推荐
最近更新
标签