WebView打印前端Console日志

WebView打印前端Console日志

安卓开发中WebView是非常常用的控件，用来加载网页，涉及前端和客户端交互开发的时候需要查看网页打印的日志，这时候可以通过重写WebChromeClient类中的onConsoleMessage()方法打印网页中的Console日志：

class CustomChromeClient : WebChromeClient() {
    
        companion object {
            const val TAG = "consoleCustomChromeClient"
        }
        
        /*android 低版本 已废弃*/
        override fun onConsoleMessage(message: String?, lineNumber: Int, sourceID: String?) {
            Log.d(TAG, "$message($sourceID:$lineNumber)")
            super.onConsoleMessage(message, lineNumber, sourceID)
        }
        
        override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
            Log.d(
                TAG,
                "[" + consoleMessage?.messageLevel() + "] " + consoleMessage?.message() 
                + "(" + consoleMessage?.sourceId() + ":" + consoleMessage?.lineNumber() + ")"
            )
            return super.onConsoleMessage(consoleMessage)
        }
        
    }

但有时候可能会有些厂商的ROM不显示Console日志，可以通过Webview与原生的交互来实现。首先定义一个类和方法，需要用@JavascriptInterface注解方法。

class Console {
    
        @android.webkit.JavascriptInterface
        fun log(tag: String, msg: String) {
            Log.d(tag, msg)
        }
        
    }

使用WebView的addJavascriptInterface(@NonNull Object object, @NonNull String name)的方法进行对象映射：

webview.addJavascriptInterface(Console(), "console")

前端在开发的时候通过javascript对象映射，调用原生的方法以打印原生日志。

<script>
     function callAndroid(){
    // 由于对象映射，所以调用console对象等于调用Android映射的对象
      console.log("js调用了android中的log方法");
     }
   </script>