神奇的問題
在改之前舊代碼的時候(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)
一看代碼發(fā)現(xiàn)會parseJSON一個字符串,這么看完全沒問題饰潜。
debug過程
1宪塔、定位到報錯的位置,先嘗試復現(xiàn)這個問題囊拜。結果無論如何都無法在本地復現(xiàn)這個問題某筐,本地嘗試都是完全正常的。
2冠跷、懷疑是環(huán)境導致的問題(cookie南誊,緩存等),在測試的電腦上用無痕模式打開蜜托,問題消失了抄囚,但是在正常瀏覽器通過清除cookie,緩存等方式問題依然存在橄务。
3幔托、在debug模式下,發(fā)現(xiàn)parseJSON傳入的字符串中除了接口返回的信息前方多了一個display:none的div標簽蜂挪。
4重挑、查看源碼發(fā)現(xiàn),這個上傳會在上傳結束后把一份iframe添加到body中去棠涮,并在iframe中寫入上傳返回的結果谬哀。當iframe加載結束的時候,調用上傳完成的回調严肪。(我實在不理解為什么要這么寫)史煎。
5谦屑、現(xiàn)在問題就轉成了,為什么這個iframe當中會被添加了一個隱藏的div元素篇梭。
原因
因為之前自己也寫過一個Chrome插件氢橙,知道插件會向頁面當中插入一些元素(一般來說會用shadow元素去隔離)。所以猜測是插件影響到了恬偷。
讓測試把他的一個錄屏的Chrome插件刪掉之后悍手,果然問題解決了。
總結
你永遠不知道會看到什么樣奇怪的代碼操作喉磁。