How to debug javascript in webview in android

在Android中调试WebView中的JavaScript代码，可以通过以下几种方式进行：

1. 使用Chrome的远程调试功能（Remote Debugging）

从Android 4.4 (KitKat)起，开发者可以使用Chrome浏览器的远程调试功能来调试位于WebView中的JavaScript代码。为了使用这种方法，请遵循以下步骤：

• 确保您的设备通过USB连接到您的开发机，并启用了USB调试模式。您可以在设备的开发者选项中开启USB调试。

• 在您的应用中，确保WebView启用了调试模式。在您的Application类或者启动Activity中的onCreate方法添加以下代码：

  java
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
      WebView.setWebContentsDebuggingEnabled(true);
  }

• 打开您的Chrome浏览器，在地址栏中输入 chrome://inspect 并按回车键。

• 您应该会看到一个名为“Discover USB devices”的选项，确保它被勾选。

• 在页面上找到您的设备以及相应的WebView。点击“inspect”链接打开一个开发者工具窗口。

• 在打开的开发者工具中，您可以查看元素、控制台输出、网络请求等，就像在Chrome浏览器中调试网页一样。

2. 输出日志

在JavaScript代码中使用console.log打印调试信息，然后在Android的LogCat中查看输出。为了捕获WebView中的console.log输出，您需要为WebView设置一个WebChromeClient并重写onConsoleMessage方法：

java
webView.setWebChromeClient(new WebChromeClient() {
    public boolean onConsoleMessage(ConsoleMessage cm) {
        Log.d("MyApplication", cm.message() + " -- From line "
                             + cm.lineNumber() + " of "
                             + cm.sourceId() );
        return true;
    }
});

这将使得所有console.log的输出都会显示在Android的LogCat中。

3. 使用JavaScript接口

如果需要更复杂的交互，您可以在Android中创建JavaScript接口，这样可以让JavaScript代码调用本地的Android代码：

java
public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

// 在WebView设置时加入
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

然后在JavaScript中这样调用：

javascript
Android.showToast("Hello Android!");

这种方式可以用于创建复杂的调试或交互，但需要注意安全性问题，确保只在可信的内容上使用JavaScript接口。

通过以上方式，您可以在开发Android应用时调试WebView中的JavaScript代码。记得在发布应用前关闭WebView的调试模式，避免安全风险。