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

news2024/11/24 5:09:33

我们在 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 页面,能不能正常工作呢。

终于等来了最终结论:

按我们客服的说法:

“感动到落泪”

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/91045.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2022年山东最新建筑施工架子工(建筑特种作业)模拟题库及答案

百分百题库提供特种工(架子工)考试试题、特种工(架子工)考试预测题、特种工(架子工)考试真题、特种工(架子工)证考试题库等,提供在线做题刷题,在线模拟考试,助…

21天学Python --- 打卡12:python执行jar包

21天学Python --- 打卡12:Python执行jar包1. Subprocess1.1 Method1.2 Execure Jar2. Jpype2.1 Install2.2 Execute Simple Jar2.2.1 Java Code2.2.2 Python Code2.3 Execute Maven Jar3. Awakening1. Subprocess subprocess 是 Python 2.4 中新增的一个模块 1.1 Method subpro…

第二证券|医药板块短期轮动加快 机构看好后市机会

作为现在商场行情继续性最强的职业板块,医药股昨日早盘呈现回调,午后继续反弹,体现出较强的承接动能。机构以为,本轮新冠医治概念主线行情或仍将延续,但个股或将继续分解。 在本轮反弹行情中,医药板块表现较…

postgres 源码解析 44 btree插入流程 btinsert

基于前两篇对btree的基础介绍,本文将从源码角度讲解btree的插入流程,相关至内容见: postgres源码解析41 btree索引文件的创建–1 postgres源码解析42 btree索引文件的创建–2 数据结构 /** BTStackData -- As we descend a tree, we push t…

干货 | 鸿翼&深信服之内容安全3大应用场景实践

随着企业数字化转型的推进,在企业内容管理层面,面临着数据爆发式增长,内容安全合规、海量非结构化数据分散存储,业务系统重建数据难以整合,无法统一管理等问题。 在数据安全层面,随着新威胁层出不穷&#…

Docker的CICD

🎏⭕引言 回顾使用docker进行项目部署的步骤: 将项目通过maven进行编译打包将文件上传到指定的服务器中将war包放到tomcat的目录中通过Dockerfile将Tomcat和war包转成一个镜像,由DockerCompose的docker-compose.yml去运行容器 以上操作&#…

frp内网穿透详细安装步骤以及使用

frp是一款内网穿透工具,首先要一台服务器用作服务端(Linux),将自己的(WIN10)电脑用作客户端,我将通俗的讲解详细的安装以及使用过程,废话不多直接开始。 Linux要开放 7000 7500 9600端口,一…

Android入门第48天-静态BroadCast之接受开机广播

简介 我们在之前的BroadCast章节中写了动态BroadCast。但我们提过一笔BroadCast也有静态之分,而静态的BroadCast主要用于监听一些如:开机广播、SIM卡拨出插入等广播。这些广播都为静态注册广播事件。因此我们今天就以一个App监听Android开机广播为例子说…

[附源码]Node.js计算机毕业设计高校科研项目申报管理信息系统Express

项目运行 环境配置: Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境:最好是Nodejs最新版,我…

三次握手四次挥手和SSL/TLS握手

http(TCP)三次握手四次挥手: 三次握手: SYN:同步位。SYN1 表示进行一个连接请求。 ACK:确认位。ACK1 表示确认有效,ACK0 表示确认无效。 ack:确认号。等于对方发送的序号1。 seq:序号。 握手…

高通Ride软件开发包使用指南(6)

高通Ride软件开发包使用指南(6)6.2使用SDK设置配置QDrive平台6.3生成SDK配置文件6.4 QDrive功能验证6.2使用SDK设置配置QDrive平台 配置平台 $ cd ~/qride/platform $ ./setup.sh [Platform SOC] 该脚本根据IP地址检测平台,然后推送摄像头Q…

【信息奥赛题解】位数问题(详细题解 C++ 代码)

📚 位数问题 🚀 题目浏览 【题目名称】位数问题 【题目描述】 在所有的 NNN 位数中,有多少个数中有偶数个数字 333 ? 由于结果可能很大,你只需要输出这个答案对 123451234512345 取余的值。 【输入】 读入一个数 N(N≤1000…

【Redis】数据类型操作一 (key/String/List)

文章目录0、Redis键(key)1、Redis字符串(String)2、Redis列表(List)实操0、Redis键(key)1、Redis字符串(String)2、Redis列表(List)0、Redis键(key) 切换数据库 select dbid select 8 清空数据库 flushdb (清空当前库) flushall (通杀全部库…

python机器学习与深度学习在气象中如何应用??如台风预报数据智能订正、预测风电场的风功率、预测浅水方程模式

Python是功能强大、免费、开源,实现面向对象的编程语言,在数据处理、科学计算、数学建模、数据挖掘和数据可视化方面具备优异的性能,这些优势使得Python在气象、海洋、地理、气候、水文和生态等地学领域的科研和工程项目中得到广泛应用。可以…

年终洞察:日本正兴起一波“反向海淘”

这两天,正在日本备婚的李杨(化名)收到了“漂洋过海”从Starday跨境电商服务平台买来的喜庆装饰品,“这些烘托传统中国婚礼的独特装饰品在日本是很难买到的”从她打开Starday跨境电商服务平台,选择心仪的装饰品并并下单…

[附源码]Python计算机毕业设计高校线上教学系统Django(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等…

mysql查询基础

查询执行图 查询顺序 explain 参数说明 Id: MySQL QueryOptimizer 选定的执行计划中查询的序列号。表示查询中执行select 子句或操作表的顺序,id 值越大优先级越高,越先被执行。id 相同,执行顺序由上至下 Select_type: 一共有9中类型,只介绍常用的4种: SIMPLE: 简单的 select 查…

前端——给图形绘制阴影

给图形绘制阴影 在HTML5中,使用canvas元素可以给图形添加阴影效果。添加阴影效果时,只需利用图形上下文对象的几个关于阴影绘制的属性就可以了,这几个属性如下。 shadowOffsetX——阴影的横向位移量。 shadowOffsetY——阴影的纵向位移量。…

提面优秀资格上岸浙大MBA经验分享

三百多天的备考,终于等来了一个好的结果。曾经的我也一直在犹豫到底要不要放弃对于浙大的执念,虽然说我的工作是还行,但是我的第一学历只是一个不入流的二本院校,当时咨询的老师说是对于浙大提面来说,我肯定是要吃学历…

MobSDK引进相关问题

1、进入全球领先的数据智能科技平台-MobTech袤博mob官网 首先注册帐号、核验身份、选择开发者平台 2、创建项目的appkey和对应的appSecret 进入开发者模式后,对应以下几个选项模块(以短信验证模块为例),点击开始使用 跳转到个人…