关于Android WebView加载异常的排查思路

废话

最近用户反馈界面混乱，显示有问题(浏览器上显示正常)。我收到这消息后一脸懵逼、满脸空白，因为这**是个WebView,而且加载的是第三方的网页。对于webview不咋熟悉的我有些无从下手了，网页是别人的，控件是官方的，我自己写的代码没几行。。。

在这个年代第一步肯定是先问GPT了，

非常完美，喜滋滋改了一圈（不出意外的毛用没有）。

作为一个合格的程序猿怎么会这么轻易放弃呢，那就bing（别问我为啥不用google，问就是保密）找找看有没有大佬遇到过了，很显然网上一大堆，都不解决不了我的问题（解决了就没这篇文章了）。

看来只能自己动手了。

调试工具

首先肯定要能知道我的webview加载的和浏览器加载出来的区别了。

浏览器好办，直接F12啥啥都能看到了，但是webview呢？

1.用Fiddler抓包是个不错的想法

webview截图：浏览器截图：这。。。好像也没啥区别。

webview能不能像浏览器一样能调试呢？

2.DevTools

用它可以像浏览器一样调试webview了，真是web混合开发的必备工具，以前咋没发现呢。

使用它不用下载任何工具，只需在代码中加入WebView.setWebContentsDebuggingEnabled(true)这行就行，

然后在浏览器上输入chrome://inspect（edge浏览器用edge://inspect）
具体可以看官方介绍:远程调试 WebView | Chrome DevTools

断点调试

接下来就好办了，只需在源码中使用debug断点执行就能一步步找到问题了。最终找到本人问题的原因居然是本地存储没开window.localStorage=undefined，调用webView.settings.domStorageEnabled = true就好了

总结

花了两天时间最后找出来个这，惭愧惭愧。不过得出一个结论，使用webview时特别是嵌套第三方网页时，能开得设置尽量都打开吧。

js 复制代码

webView.settings.run {
            javaScriptEnabled = true//支持js
            javaScriptCanOpenWindowsAutomatically = true
            //设置自适应屏幕
            useWideViewPort = true //将图片调整到适合webview的大小
            loadWithOverviewMode = true // 缩放至屏幕的大小
            cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK// 设置缓存
            domStorageEnabled = true//访问本地存储
            allowFileAccess = true
            databaseEnabled = true//访问数据库
            builtInZoomControls = false//是否手势缩放
            displayZoomControls = false//显示缩放控件
            layoutAlgorithm = WebSettings.LayoutAlgorithm.NORMAL//适应屏幕
            
            setAllowUniversalAccessFromFileURLs(true)
            setAllowFileAccessFromFileURLs(true)
        }

最后附上官方文档：WebSettings、在 WebView 中构建 Web 应用