记一次误判断开发者工具与JS代码执行不一致的惨案
# 前文说实话第一眼看到这个bug一脸懵逼
排查超两个小时之久
发现竟然如此简单
才惊呼一声
卧槽
# 问题
今天有网友反馈，在这里点击按钮触发输入框会无效
但是如果在控制台执行代码就是有效的
代码也很简单
```
// 创造事件
var event1 = document.createEvent('HTMLEvents');
event1.initEvent("input", true, true);
event1.eventType = 'message';
// 调度事件
inpEle.dispatchEvent(event1);
```
首先来猜测一下
可能是
# 猜想一：控制台与JS代码执行环境不一致导致的？
尝试初始化出来一个函数
然后使用settimeout执行，发现依然可以正常执行
换到网页按钮点击却不好使了
# 猜想二：会不会因为API老旧出现的一些问题
尝试改造成new Event依然无果
# 猜想三：未初始化赋值？
尝试打印__vue__属性后，输出value发现成功赋值，未解决
# 猜想四：会不会Event的值在控制台与js生成不一致导致的
尝试打印了一下发现没任何区别...
那问题到底在哪？
心机之蛙一直摸你肚子！
# 开始分析
找到对应的列表dom，发现他根据
对应的display的none和没有display来隐藏和展示列表
我们直接打个dom的属性断点
发现断点堆栈的层级还是比较深的
我一开始以为路径不对，于是开个一个窗口卡住，另一个按二分法做堆栈的比对
发现基本每一个函数都执行到了
那到底是什么问题呢？
每个函数都执行到了
一个显示一个却没有显示
我们开始寻找到底哪里设置了display
逐步停在各种的属性修改代码
最后找到了
这里
这里通过e.__vOriginaDisplay来控制显示和隐藏
这个时候我们触发一次控制台的执行
这个函数会经过多次调用
每次display的结果分别是
none
none
无
无
....
然后再触发一次按钮的调用
可以发现display的结果分别是
none
none
无
无
none
none
none
.........
那到底为什么又出现了none？
我们可以确定触发输入改变而出现的搜索框是有正常从none变成无的
但是为什么又从无变成none了？
那我们可以推测出来一个大胆的想法
1.首先我们点击按钮
2.按钮触发event
3.触发列表的显示
4.按钮的事件向上传递
5.传递到某个监听点击的dom，dom又取消了列表的显示
因为在控制台上不会触发点击
所以自然不存在列表再次隐藏的问题
那我们可以测试一下
直接在油猴里Settimeout一个20秒之后回调函数
发现结果跟控制台一致
那问题就很好解决了
# 解决方案
1.在button包裹一个div，并且在监听到相应事件的时候进行一次阻断事件
2.使用代码进行操控，不绘制按钮
3.利用html兼容特性
一般的代码只会监听body一级或子级
而即使插入多个body也可以正常显示，但是不在监听范围内
# 结语
本质就是一个时序问题
没想到表现出来的特征这么微妙...
辛苦了小哥哥，非常感谢，我找了两天资料都没搞出来，你一出马就搞定了，太强了。{:4_94:} 我觉得GG应该去B站发视频~流量杠杠的 极品小猫 发表于 2022-11-22 13:24
我觉得GG应该去B站发视频~流量杠杠的
呜呜呜
试过
大部分人不怎么喜欢搞技术
我觉得如果发一些娱乐的话可能好一些！ 李恒道 发表于 2022-11-22 14:35
呜呜呜
试过
大部分人不怎么喜欢搞技术
现在不少小白喜欢到B站去学习，当然和搞娱乐的流量当然是没法比 极品小猫 发表于 2022-11-23 14:31
现在不少小白喜欢到B站去学习，当然和搞娱乐的流量当然是没法比
还有就是油猴方向国内喜欢做的人实在太少了= =
开发者翻来覆去感觉就那么点
各种平台各种偶遇... 李恒道 发表于 2022-11-23 14:40
还有就是油猴方向国内喜欢做的人实在太少了= =
开发者翻来覆去感觉就那么点
各种平台各种偶遇... ...
毕竟油猴这东西，除了用来记录技术积累，连项目都称不上，换不了票子
页:
[1]