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

最近一直在vue+Android同时合作开发一个功能，我一个小小安卓开发迈向web开发真就处处是难关

一、浏览器调试

浏览器：chrome、Edge

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

使用：

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

---

二、WebChromeClient onConsoleMessage()

请查阅：官方API文档

support API level 7=>

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=>

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;
  }
});

---

三、腾讯TBS Studio

软件：TBS Studio

下载地址：https://x5.tencent.com/tbs/guide/debug/download.html

说明：安装方法按官方步骤即可~ 这个方法需要手机设置USB调试打开、数据线连接、USB授权、开发者选项设置调试程序。注意手机要适配驱动！

---

四、参考文献

1. 大佬还写了 MAC和iPhone 的调试方法： 如何通过电脑调试手机APP应用里的webView？
2. WebView 打印web端的console日志（如console.log）