接獲報案:某支Java開發的程式以內嵌IE方式顯示特定網頁,在特定機器執行時網頁出現異常。
初步蒐集情報如下:
- 於問題機器單獨使用IE或Chrome可正常顯示該網頁
- 問題機器之IE版本為IE11
- 問題僅出現在特定機器,同一Java程式於其他機器執行正常
- 於異常網頁按右鍵檢視HTML原始碼完整,異常部分推測為JavaScript出錯導致
- IE在內嵌模式下無法使用F12開發者工具,偵錯困難
沒有F12可用,改用Fiddler側錄往來封包,找出後半段Request未發送證據,推測最大可能是JavaScript程式在某階段中止執行。
反覆推敲程式邏輯,包含簡單jQuery Deferred串接數個AJAX呼叫、ViewModel屬性設定、變數比對if分支、console log偵錯,未見可疑之處。無法使用F12偵錯,只好拿出石器時代狩獵技巧,在程式碼各階段埋下alert,確認程式執行進度。
流傳千古的愚公移山法原始歸原始,效果倒不容懷疑,很快把搜索範圍縮小,我忽然眼睛一亮,console.log(blah)!大膽妖孽,還不現形?
讓我們回顧三年前的文章:
IE8/IE9要先按F12開啟IE Dev Tools才能存取console物件啦! 笨蛋!
將console.log註解掉,網頁果真恢復正常,證明凶手是console.log無誤!還原案情, 推測是IE被內嵌於Java程式時因某種原因啟動了IE相容模式,而JavaScript在使用console前未確認console是否存在,於是… 轟!
所以我們該寫成window.console && console.log()解決問題嗎?當然不是,從2016/1/12起,微軟只對最新版本的IE(目前是IE11)提供技術支援及安全更新,理論上IE6/7/8/9/10該馬上從地球消失!(理論上啦~前陣子處理一起網頁異常,調查後驚覺使用者還在用他X的IE8,詢問才知受限某個不支援IE9+的重要系統,只好含淚不升級… 被老舊系統壓迫的使用者快站出來反抗吧!)
所以我心目中最好的解法是「把程式寫成不升級新版IE不能跑,把因舊系統不能升級的使用者逼上絕路督促無法升級的使用者向死抱老IE的廠商施壓」。建議做法如下:
- 在<head>加上<meta http-equiv="X-UA-Compatible" content="IE=edge">防止IE進入相容模式
加上一小段<script>window.console || console.log("你媽知道你還沒升級IE嗎?");</script>
全案偵結,收隊!