排查 Edge WebView2 在某个设备上不出图像的问题

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

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

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

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

确认安装 Edge 运行时

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

WebView2 - Microsoft Edge Developer

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

怀疑与其他应用冲突

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

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

用户恢复没有。

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

怀疑内置Web页面损坏

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

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

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

加日志排查

将 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 运行时，都一起打包发给用户，教他怎么使用。

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

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

简单 Demo 对比

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

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

太好了，用户内部的 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 内核忽略不兼容问题。

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

一番操作下来，Demo 可以展示 Web 页面了！！

确认解决问题

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

终于等来了最终结论：

按我们客服的说法：

“感动到落泪”

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