Android | 如何电脑调试APP中的webview 如何查看webview原web项目的console.log/控制台报错

本文介绍: 最近一直在vue+And roi d同时合作开发一个功能，要解决电脑调试APP中的webview，查看 webview原web 项目的console.log或者说是控制台报错。

一、浏览器 调试

说明：chrome是需要科学上网的。Edg e无所谓。我用这个方法看 Ag e n tWe b 、JSBr i dg e 都没啥问题，所以说并不是强制只能调试原生 webview 啦~ 不过有一点，听说这个方法只适用于运行An d roi d 4.4或更高版本的设备测试，推荐查看 Android上的远程调试。

使用：

电脑和手机用数据线相连，手机启动USB调试。
地址栏输入链接：chrome://inspect/#devices 或 edge://inspect/#devices。
打开 app，浏览器会显示连接的设备，同时自动检测 webview 打开的网页。
点击想调试的 webview 下方的 inspect 就会弹出对应调试窗口。

二、We bCh ro meClie n t onCon s oleMessa ge()

请查阅：官方API文档

support API level 7=&gt;

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
  public void onConsoleMessage(String message, int lineNumber, String sourceID) {
    Log.d("MyApplication", message + " -- From line "
                         + lineNumber + " of "
                         + sourceID);
    return true;
  }
});

version is API level 8 or higher=&gt;

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
  public boolean onConsoleMessage(ConsoleMessage cm) {
    Log.d("MyApplication", cm.message() + " -- From line "
                         + cm.lineNumber() + " of "
                         + cm.sourceId() );
    return true;
  }
});