快应用开发者工具，专为快应用开发设计的 IDE；支持快应用、卡片等开发调试、编译预览、打包上传、以及云测、远程预览.....以及账号登录，应用关联，查看详情等；它基于 Electron 进行开发；在最近更新了 Electron 版本（11.3.0）后，真机调试的截屏，当滑动真机页面，在 devtools 页面的「截屏」会出现“闪烁“问题，很是影响体验。
在谈及此问题前，需要对快应用真机调试做个简短的说明；其原理是:「快应用调试器」（手机 app），与 IDE 内部，各起的一个 http 服务，通过 Websocket 将手机快应用界面内容截图，定时（数十 ms）以 base64 图片格式，传输到 IDE 所起 http 网页，交给 canvas 渲染出来；当然，还会将真机的 Dom、Log 等信息，以特定的协议（如 DOM、Log、Network），传出过来；因为 http 服务的前端，就是基于 ChromeDevTools devtools-frontend 略加改造，因此就很容易构造出 Elements、Console 等面板；从而实现「真机调试」（具体效果，如上截图所示）。
先前所提及的「截屏闪烁问题」出现在哪儿呢？就是真机滑动（或滑动 http 页面 canvas），就会导致 canvas 处图片更新衔接中，出现了黑屏，使得看起来「闪烁」。无论该 http 服务，是基于 Electron Dialog 显示，还是基于 Chrome 浏览器，都会有此问题。进一步跟进，发现 Chrome 83（l老版本 Electron 自带）就没有问题，而 Chrome 87 以上就会存在问题；即便更新 devtools-frontend 最新代码，甚至对其中部分可能存在问题代码，做了修改，依然不得其法，闪烁依然存在；因此，有推测是新版 Chrome 本身存在问题，所导致。
在困扰许久后，受到 Fix Google Chrome screen flashing on Windows 10 一文启发，是否是「硬件加速」（hardware acceleration）所致呢； 在 [chrome://settings/](chrome://settings/) => 高级 => 禁用硬件加速，一番修改后再试，此问题荡然无存；虽不明就里，索性问题得到解决。只需在项目代码中，合适的地方，调用 Electron API：app.disableHardwareAcceleration()，禁用硬件加速即可（禁用当前应用程序的硬件加速。这个方法只能在应用程序准备就绪（ready）之前调用。）；
您可能感兴趣的文章
