chromium issue 助功从上面的结论看好像也没方法

lxf2023-03-17 10:29:01

环境

前几天在下午,检测同学们意见反馈工作环境有一个作用发现异常,随后给我发过来张出错截屏。 chromium issue 助功从上面的结论看好像也没方法

之后在检测同学们的计算机重现并查找问题,根据出现异常中断点,捕获异常信息如下所示: chromium issue 助功从上面的结论看好像也没方法

能够看见出现异常的原因是因为 n.path 数值为 undefined,因而 n.path.find 等额的于 undefined.find,因而程序流程出错。在其中 n 是一个 Event 案例path 是事件冒泡通过的节点所组成的二维数组。n.path 有系数的情况如下: chromium issue 助功从上面的结论看好像也没方法

Event.path 并不是规范特性,多见于 chrome 电脑浏览器,取不上值发现异常不奇怪,只需做一个适配就搞定,当 Event.path 取不上值后就取 Event.composedPath()。那么这是兼容问题吗,事儿好像并没有那么简单。细心比照以上二张截屏不难发现,出现异常时 Event 案例乃至不会有 path 特性,这与特性存有但值为空是两回事。

进一步清查

好好地 path 特性为什么就洗劫一空了,这是一个奇妙的难题。当我就用自身计算机试着重现问题的时候,发觉作用正常的且不能重现,事儿变得越来越奇妙。两侧电脑浏览器都升到最新版本 chrome 108,区别在于系统软件不一样,一个是 windows 一个是 macOS。其实就是 说一样的代码在相同app上跑出了不一样结论,这表明或许不是编码或兼容问题。

为找到真正意义上的缘故,做了多组对照组,以清除编码、硬件配置、电脑操作系统和浏览器危害。情况如下 :

A 组B 组结论
检测同学们计算机 win10、chrome 108其他电脑 win10、chrome 108A 组出现异常,B 组正常的
其他电脑 macOS、chrome 108
检测同学们计算机 win10、edge 108
检测同学们计算机 win10、chrome 104

剖析这种结论,出现更有趣的事:只有一种状况会发现异常,应用检测同学们的计算机且电脑浏览器是 chrome 108;当更改计算机、系统软件、电脑浏览器、浏览器版本等多种因素时结果还是正常的。 换句话说造成异常要素竟然并不是单一的,只是好几个要素组成(检测同学们计算机 chrome 108 版本号)所产生的结论。

chromium issue 的助功

从上面的结论看好像也没方法继续清查下来,但是从经验判断,多半都是 chrome 还在搞事情,此刻能去 chromium issue 里寻找真相,经过一番检索找到这一条 issue: Issue 1277431: Remove event.path。 chromium issue 助功从上面的结论看好像也没方法

issue 文章标题很直接,Event.path 将被删除。 从 issue 具体内容能够看见,此次搞事情是以 2021 年 12 月 7 日逐渐,起因于 chromium 开发团队觉得 Event.path 归属于非标 API,也会导致 Firefox 等其他浏览器的兼容问题,于是他们确定把它删掉。目前这个变动在 chrome 108 归属于灰度值环节,在刚刚公布的 chrome 109 上面全方位运用,webview 则是从 109 版本号开始逐步禁止使用。

变动详细信息及计划

此外 issue 中指出这一变动会到 console 内进行报警。 chromium issue 助功从上面的结论看好像也没方法

console 中的确有这一报警,但是藏到 console 面板的右上方,没那么容易发觉,且需要启用 Event.path 之后才会表明。点进去之后会跳转 Issues 控制面板并表明详细资料。 chromium issue 助功从上面的结论看好像也没方法 chromium issue 助功从上面的结论看好像也没方法

由图中可以看出这一变动归属于 Breaking Change,即毁灭性变动。此外能够看见变动详细信息连接和版本号方案连接。开启变动详细信息连接能够看见详尽的表明、目地、情况、设计阶段等相关信息。 chromium issue 助功从上面的结论看好像也没方法

开启版本号方案连接能够看见,chrome 108 早就在 2022-11-29 正式公布(Stable Release Tue, Nov 29, 2022),chrome 109 将于 2023-01-10 正式公布(Stable Release Tue, Jan 10, 2023)。 chromium issue 助功从上面的结论看好像也没方法

认证

因为英语水平比较有限,为了防止个人见解存有分歧,应用 chrome 的前瞻版本号进行测试,以认证 chrome 108 以后的版本号是不是真的会运用这一变动。

  • 检测所使用的系统为 macOS,浏览器版本包含:chrome-stable(108.0.5359.124)、chrome-beta(109.0.5414.36)、chrome-dev(110.0.5464.2)、chrome-canary(110.0.5477.0)。

chromium issue 助功从上面的结论看好像也没方法

  • 测试程序如下所示
<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <script>     function test() {
        console.log("event.path is:", window.event.path);
      }
    </script>
    <h1 onclick="test()">click me</h1>
  </body>
</html>
  • 检测结果如下所示

chrome-stable(108.0.5359.124)在 macOS 下 Event.path 有值,融合上文的对照组中 windows10 下一个有值一个为空。表明 chrome 108 中该变动归属于灰度值环节。 chromium issue 助功从上面的结论看好像也没方法

chrome-beta(109.0.5414.36)、chrome-dev(110.0.5464.2)、chrome-canary(110.0.5477.0)在 macOS 下 Event.path 都为空,表明 chrome 109 以后全方位删掉了 Event.path 特性。 chromium issue 助功从上面的结论看好像也没方法

解决方法

首先看影响程度,从项目层面来说,全部前端项目都会受影响;从编码层面来说,项目源码和第三方依靠都会受到影响。在 github 中搜索发现 swipperopenlayers 等第三方库里都有有关 issue。因而解决方法必须全方位考虑到:最好是对所有项目都逐一排查修补,此外不但要清查源代码,还要考虑到第三方库。

依据官方网提议及充分考虑,强烈推荐在前端项目中统一加上如下所示 polyfill 编码:

  Object.defineProperty(Event.prototype, "path", {
    get() {
      return this.composedPath();
    },
  });

最终

chrome 109 预计 2023-01-10 正式公布,到时候会全方位禁止使用 Event.path,全部源代码中使用这个特性或第三方库使用这个属性前端项目都有可能出现出现异常,也有 20 几天时间,提议尽早清查修补。

一些经验

  • 关心 devtools 里的 console、issue 等各类报警信号,有利于调节和查找问题、及其发觉隐性的难题
  • 关心 chorme 迭代计划,如果有条件能做创新性检测,防止将来可能出现的出现异常

chromium issue 助功从上面的结论看好像也没方法