神奇的问题

在改之前旧代码的时候(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插件删掉之后，果然问题解决了。

总结

你永远不知道会看到什么样奇怪的代码操作。