如何在android的webview中调试javascript ?

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上运行良好的webview，但不是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 developer工具/调试工具中看到的工具。

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

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

7 个解决方案

#1

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

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

#2

If you are not using Android 4.4, according to http://developer.android.com/guide/webapps/debugging.html you'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/chromedeveloper -tools/docs/remote-debug #debug -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 webview内容。

#3

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调试。可以找到设置>>开发人员选项>>调试>> USB调试(激活复选框)

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 Drivers on 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://检查/#设备。

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 inspect for connected device and you will get console.

6)在chrome:// /inspect页面上显示所有连接的设备。点击检查连接设备，你将得到控制台。

More detailed manual is Debugging Android WebView

更详细的手册是调试Android WebView

#4

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

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

Enabled Developer Mode in your device
在您的设备中启用Developer模式
Plug the device in the PC and enable USB debugging (install driver if needed)
将设备插入PC并启用USB调试(如果需要安装驱动程序)
Add this line in your custom Application class or in the Activity where the webview is loaded

在自定义应用程序类或装载webview的活动中添加这一行
```
//if your build is in debug mode, enable webviews inspection
WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
```
Open Chrome and go to chrome://inspect and you should see your device in the Remote Target list

打开Chrome，进入Chrome:// /查看，你应该在远程目标列表中看到你的设备
Start debugging of your app from Android Studio
从Android Studio开始调试应用程序
When a WebView will 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
当一个WebView被添加到布局中时，在你打开的选项卡中会出现一个带有检查按钮的屏幕截图，点击那里，一个Chrome开发者控制台就会打开

#5

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 webview的javascript /HTML5/CSS调试器。

http://www.jsHybugger.org

#6

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的活动或显示一些吐司消息。

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

祝你好运,Wottah

#7

-2

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

通过在您的桌面上安装ADB，尝试进入设备的ADB Logcat。

#1