神奇的问题
在改之前旧代码的时候(jquery),碰到了一个神奇的问题。某个上传的功能,唯独在测试那里,无法使用会报一个json解析的错误。
VM3845:3 Uncaught SyntaxError: Unexpected token '<'
at new Function (<anonymous>)
at Function.parseJSON (global.js?v=27e5e6221e333:3)
at Object.success (list.js?t=1629342897044:85)
at HTMLIFrameElement.uploadCallback (fileUpload.js:151)
at HTMLIFrameElement.dispatch (global.js?v=27e5e6221e333:1)
at HTMLIFrameElement.g.handle (global.js?v=27e5e6221e333:1)
一看代码发现会parseJSON一个字符串,这么看完全没问题。
debug过程
1、定位到报错的位置,先尝试复现这个问题。结果无论如何都无法在本地复现这个问题,本地尝试都是完全正常的。
2、怀疑是环境导致的问题(cookie,缓存等),在测试的电脑上用无痕模式打开,问题消失了,但是在正常浏览器通过清除cookie,缓存等方式问题依然存在。
3、在debug模式下,发现parseJSON传入的字符串中除了接口返回的信息前方多了一个display:none的div标签。
4、查看源码发现,这个上传会在上传结束后把一份iframe添加到body中去,并在iframe中写入上传返回的结果。当iframe加载结束的时候,调用上传完成的回调。(我实在不理解为什么要这么写)。
5、现在问题就转成了,为什么这个iframe当中会被添加了一个隐藏的div元素。
原因
因为之前自己也写过一个Chrome插件,知道插件会向页面当中插入一些元素(一般来说会用shadow元素去隔离)。所以猜测是插件影响到了。
让测试把他的一个录屏的Chrome插件删掉之后,果然问题解决了。
总结
你永远不知道会看到什么样奇怪的代码操作。