我们在 Windows 应用内嵌入 Edge WebView2,来展示部分用网页实现的界面。总得来说还是不错的,比如:

  • 渲染很快,基本上内置网页100毫秒以内
  • 控件样式很清爽,没有多余界面
  • 开发需要调用的 API 也不多

但是最近在某个用户那边出现了问题,整个界面都是空白的,没有内容,导致应用无法使用了。

下面整理了一下问题排查的步骤及思路

确认安装 Edge 运行时

首先怀疑用户那边安装 Edge 运行时失败了,之前内部也遇到过。所有让用户从官网下载安装。

WebView2 - Microsoft Edge Developer

用户安装一切正常,启动应用现象如故。

怀疑与其他应用冲突

之前我们调试时,如果打开两个进程,一个是 Debug 版本的、一个是 Release 版本的,就会有一个 Web 不能正常显示。

所有让用户看看有没有其他的 WebView2 进程。从任务管理器里面查看,应该有这些进程。 

elementor 图片不显示_elementor 图片不显示

用户恢复没有。

后来我们也进一步确认,应用间冲突是不存在的。应该只有使用同一个浏览器 cache 目录的应用,启动 WebView 的参数不同会冲突。

怀疑内置Web页面损坏

有没有可能应用安装时没有安装成功Web页面资源,或者内置的Web页面资源有问题?所有让用户帮忙直接用其他浏览器打开内置 file URL。

file:C:/Program%20Files/Bambu%20Studio/resources/web/homepage/index.html?lang=en_GB

用户回复可以打开,除了点击无动作,其他都正常。

elementor 图片不显示_Web_02

加日志排查

将 WebView2 加载相关的事件回调,都加上日志,看看那一步失败了。

重新构建了一个临时调试版本, 发给用户运行。正常应该有这些回调。

2022-11-30 04:21:09.617248[Thread 0x00002dd0]:WebViewPanel::OnDocumentLoaded:
2022-11-30 04:21:09.617248[Thread 0x00002dd0]:WebViewPanel::OnTitleChanged: homepage
2022-11-30 04:21:09.617248[Thread 0x00002dd0]:WebViewPanel::OnNavigationComplete:
2022-11-30 04:21:09.619870[Thread 0x00002dd0]:WebViewPanel::OnScriptMessage:

从用户那儿收集的日志,显示一切正常,甚至 script 回调都有,也说明网页里面的 JavaScript 代码已经执行了。

既然 JavaScript 都执行了,那网页应该正常加载了啊。怎么就没有图像呢?

网上寻找帮助资料

通过上面的排查,怀疑是页面渲染的问题,或者是发生了透明、不可见的情况。用这些关键字去搜索,找到一些资料:

WebView2 windows are blank when created in the background

比如这里说,父窗口一开始不可见,后面即使可见了,Web 是空白的,但是好像是 .NET 库里面的问题,与 C++ 没有关系。

查看 WebView 窗口状态

从外围排查,应该是没有线索了,只能从应用自身的状态排查,看看有没有异常了。

用 Spy++ 可以查看窗口句柄,窗口的样式(是否可见)、尺寸等。

Spy++ 依赖 VS 运行时,都一起打包发给用户,教他怎么使用。

一顿操作,用户很配合,给了我们下面的信息:

elementor 图片不显示_2d_03

elementor 图片不显示_Web_04

elementor 图片不显示_前端_05

elementor 图片不显示_elementor 图片不显示_06

elementor 图片不显示_2d_07

分析下来,还是正常,所有属性都是正常的。与正常情况下也都一样。

简单 Demo 对比

有没有头绪了。也许是我们的应用太复杂了,那我搞一个最简单的只包含 WebView 集成的小程序。对比一下看看。

刚好 WebView 有自己的 Sample 项目,下载下来编译后,发给用户试试。

elementor 图片不显示_前端_08

太好了,用户内部的 Demo 也不能显示网页内容。那就不是我们应用的问题了,只可能是用户环境都什么特殊的,导致 WebView 不能渲染。

继续网上搜索相关问题的资料

还是怀疑渲染问题,继续搜索

WebView2 is rendering the page but the content is displayed all transparent · Issue #1118 · MicrosoftEdge/WebView2Feedback · GitHub

这里面提到 chrome 内核对于各种 GPU 的兼容性,可能导致 chrome 的渲染不工作。

设置环境变量 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS 为 --disable-gpu-driver-bug-workarounds --ignore-gpu-blocklist 可以让 chrome 内核忽略不兼容问题。

再去教用户怎么设置环境变量。

elementor 图片不显示_Web_09

一番操作下来,Demo 可以展示 Web 页面了!!

elementor 图片不显示_Web_10

确认解决问题

等等,还不能马上庆祝,因为还不知道我们的应用能不能展示 Web 页面,能不能正常工作呢。

终于等来了最终结论:

elementor 图片不显示_edge_11

按我们客服的说法:

“感动到落泪”

“直接明目张胆的要好评,真的是被他折腾到”