ecology9-谷歌浏览器下-pdf.js在渲染时部分发票丢失文字 问题定位及解决

问题

问题描述 ： 在谷歌浏览器下，pdf.js在渲染时部分发票丢失文字；360浏览器兼容模式不存在此问题
排查思路：1、×对比谷歌浏览器的css样式和360浏览器兼容模式下的样式，没有发现关键差别
2、✔使用Fiddler修改网页js Debugger问题

Fiddler-使用本地js替换线上js

windows使用Fiddler拦截请求js

点击Win配置，勾选需要拦截的应用，点击保存

获取线上的pdf.work.js的地址

把pdf.work.js存到本地

Fiddler拦截指定js请求替换成本地文件

谷歌浏览器设置保存日志和清理缓存

修改本地pdf.worker.js的内容

Fiddler中点击重新捕获

刷新拦截的页面

分析

通过控制台的覆盖范围查看加载覆盖的代码

点击之后可以在蓝色条的地方插入要加的代码

误打误撞添加了alert(“111”); 点击弹窗确认后，发票字体正常显示。
尝试添加console.log(111)，字体不显示。

猜测alert阻断了主线程，让pdf渲染线程先渲染好了数据才能正常显示
除了alert能阻断主线程，setTimeout也能

×使用源代码关键词搜索，发现搜索条目太多

通过给事件监听器打断点发现关键代码

于是在pdf.worker.js的可执行处添加document.hidden = false;保存再尝试，发票文字能出现了