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

目录

  • 一、浏览器调试
  • 二、WebChromeClient onConsoleMessage()
  • 三、腾讯TBS Studio
  • 四、参考文献

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

一、浏览器调试

浏览器:chrome、Edge

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

使用

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

Android | 如何电脑调试APP中的webview 如何查看webview原web项目的console.log/控制台报错_第1张图片
Android | 如何电脑调试APP中的webview 如何查看webview原web项目的console.log/控制台报错_第2张图片


二、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授权、开发者选项设置调试程序。注意手机要适配驱动!

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


四、参考文献

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

你可能感兴趣的:(Android,android,前端,webview)