如何在android中的webview中调试javascript

How to debug javascript in webview in android

提问by user1118019

I have a webview that works fine on iOS, but not Android. Is there a tool where I can connect to Android webview in browser and debug it using firefox or webkit console? Currently I have no idea what is causing the webview not to work in Android.

我有一个在 iOS 上运行良好的 web 视图，但在 Android 上运行不正常。是否有工具可以让我在浏览器中连接到 Android webview 并使用 firefox 或 webkit 控制台对其进行调试？目前我不知道是什么导致 webview 在 Android 中不起作用。

In iOS I am able to open my iPad or iPhone simulator, open the webview pane, and in my desktop browser I listen to port 9999, and it shows me the tools you see in webkit developer tool/debugging tools.

在 iOS 中，我可以打开 iPad 或 iPhone 模拟器，打开 webview 窗格，并在桌面浏览器中监听 9999 端口，它向我展示了您在 webkit 开发人员工具/调试工具中看到的工具。

I am looking for similar tool for Android, or at least to get me started on debugging.

我正在寻找类似的 Android 工具，或者至少让我开始调试。

采纳答案by Paul Beusterien

Check out weinre. It provides Chrome developer-like tools for debugging from WebKit browsers to browsers running on remote devices.

查看weinre。它提供了类似 Chrome 开发人员的工具，用于从 WebKit 浏览器调试到在远程设备上运行的浏览器。

回答by Vladyslav Babenko

The easiest way to debug WebView is to connect your Android device to PC by USB and inspect your WebView by Chrome dev tools.

调试 WebView 的最简单方法是通过 USB 将您的 Android 设备连接到 PC，并通过 Chrome 开发工具检查您的 WebView。

So, you will need:

因此，您将需要：

1)Activate USB debugging on our devise. You can find it Settings >> Developer Options >> Debugging >> USB Debugging(activate checkbox)

1)在我们的设备上激活 USB 调试。你可以找到它Settings >> Developer Options >> Debugging >> USB Debugging（激活复选框）

2)Connect you devise to Computer by USB

2)通过 USB 将您的设备连接到计算机

Note: If you are developing on Windows, install the appropriate USB driver for your device. See OEM USB Driverson the Android Developers' site.

注意：如果您在 Windows 上进行开发，请为您的设备安装适当的 USB 驱动程序。请参阅Android 开发人员网站上的OEM USB 驱动程序。

3)Open Chrome browser and type in the URL field: chrome://inspect/#devices

3)打开 Chrome 浏览器并在 URL 字段中输入：chrome://inspect/#devices

4)Confirm that 'Discover USB devices' activated

4)确认“发现 USB 设备”已激活

5)On your device, an alert prompts you to allow USB debugging from your computer. Tap OK.

5)在您的设备上，一个警报提示您允许从您的计算机进行 USB 调试。点击确定。

6)On the chrome://inspect page displays every connected device. Click inspectfor connected device and you will get console.

6)在 chrome://inspect 页面上显示每个连接的设备。单击inspect连接的设备，您将获得控制台。

More detailed manual is Debugging Android WebView

更详细的手册是调试 Android WebView

回答by Someone Somewhere

If you are not using Android 4.4, according to http://developer.android.com/guide/webapps/debugging.htmlyou're going to enjoy the old-school way of debugging ...

如果您不使用 Android 4.4，根据http://developer.android.com/guide/webapps/debugging.html，您将享受老式的调试方式......

If you don't have a device running Android 4.4 or higher, you can debug your JavaScript using the console JavaScript APIs and view the output messages to logcat.

如果您没有运行 Android 4.4 或更高版本的设备，您可以使用控制台 JavaScript API 调试您的 JavaScript，并查看 logcat 的输出消息。

For Android 4.4 and better, you'll enjoy remote debugging, see https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

对于 Android 4.4 及更高版本，您将享受远程调试，请参阅https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews

Starting Android 4.4 (KitKat), you can use the DevTools to debug the contents of Android WebViews inside native Android applications.

从 Android 4.4 (KitKat) 开始，您可以使用 DevTools 在原生 Android 应用程序中调试 Android WebViews 的内容。

回答by MatPag

Those are the steps i use to debug a WebViewcontent in a device:

这些是我用来调试WebView设备中的内容的步骤：

1. Enabled Developer Mode in your device
2. Plug the device in the PC and enable USB debugging (install driver if needed)

3. Add this line in your custom Applicationclass or in the Activitywhere the webview is loaded

   //if your build is in debug mode, enable webviews inspection
   WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
   

4. Open Chrome and go to chrome://inspectand you should see your device in the Remote Target list

5. Start debugging of your app from Android Studio
6. When a WebViewwill be added to the layout, in the tab you opened will appear a screenshot with a Inspect button, click there and a Chrome developer console will open

1. 在您的设备中启用开发者模式
2. 将设备插入PC并启用USB调试（如果需要，请安装驱动程序）

3. 在您的自定义Application类或Activity加载 webview的位置添加此行

   //if your build is in debug mode, enable webviews inspection
   WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
   

4. 打开 Chrome 并转到chrome://inspect，您应该会在远程目标列表中看到您的设备

5. 从 Android Studio 开始调试您的应用
6. 当 aWebView将添加到布局中时，在您打开的选项卡中将出现一个带有 Inspect 按钮的屏幕截图，单击此处将打开 Chrome 开发者控制台

回答by cyberflohr

If you a searching for a solution to debug your javascript code which runs inside a webview, then take a look at jsHybugger - an JavaScript/HTML5/CSS debugger for Android webviews.

如果您正在寻找调试在 webview 中运行的 javascript 代码的解决方案，请查看 jsHybugger - 用于 Android webviews 的 JavaScript/HTML5/CSS 调试器。

http://www.jsHybugger.org

http://www.jsHybugger.org

回答by Wottah

I have worked with a webview using javascript in my previous project and i encountered the same issue. I have not found a way to directly debug my code, but i used a javascriptinterface to send information to my activity. This way you can log the activities of your javascript or show some Toast messages.

我在之前的项目中使用 javascript 处理过 webview，我遇到了同样的问题。我还没有找到直接调试我的代码的方法，但我使用了 javascriptinterface 将信息发送到我的活动。通过这种方式，您可以记录 javascript 的活动或显示一些 Toast 消息。

When your java methods aren't called, it generally means you have made some sort of error in your JS code.

当您的 java 方法未被调用时，通常意味着您在 JS 代码中犯了某种错误。

I know this is no high tech solution to your issue, but it is something at least, and it worked for me.

我知道这不是解决您问题的高科技解决方案，但至少它是一些东西，并且对我有用。

Good luck, Wottah

祝你好运，沃塔

回答by ChristopheCVB

Try to acces to ADB Logcat of the device by installing adb on your desktop...

尝试通过在桌面上安装 adb 来访问设备的 ADB Logcat...