Webpack下莫名其妙出現的jQuery與報錯，記一次奇妙的Debug旅程

場景重現

項目是一個SPA，使用了Vue+Vue-Router+Webpack+jQuery。
報錯的場景以下：

爲什麼稱之爲莫名其妙？

項目雖然做爲一個SPA，也引用了jQuery。
可是！！！我全部的JS文件所有用Webpack打包了呀！
不該該會有單獨的jQuery文件啊……
把報錯內容上百度一搜索，發現徹底不搭架。
因而開始了苦思冥想和Debug。

Debug

在Debug過程當中，發現

1. jQuery的報錯是在SPA中兩個頁面的無刷切換中出現的。

2. 出錯次數會不斷疊加，但對頁面任何功能都無影響。

因而嘗試中從切換中去尋找答案。
後來發現頁面切換部分的代碼並無任何問題。
因而開始思考，Webpack的鍋？

仔細想了想後否認了，Webpack會把我用的全部JS文件全打包成一份。不該該有單獨的jQuery文件出來。
因而想看看這個jQuery是存放在哪兒的。

把報錯的jQuery文件在新頁面打開。看向網址

等等！
網址的前綴是"chrome-extension://"，這個是谷歌瀏覽器插件的前綴。

難不成，這個jQuery文件是谷歌瀏覽器插件的？

因而看向了"chrome-extension://ikhdkkncnoglghljlkmcimlnlhkeamad/js/lib/jquery.js"中間的那一串神祕字符串。那是谷歌瀏覽器插件的「身份證」。

因而在插件管理頁面尋找。

而後把插件禁用後， 再也沒報錯。

感覺

Debug完成後，感受鬆了一口氣的同時，也十分開心。由於開發中總會有各類各樣的BUG，像這種莫名其妙的BUG，網上是沒有解決方法的。因而只能本身一點一點去推斷，去解決。

本身推斷的過程，真的好爽~~~（來自文科生的感慨，逃）

本文同時發佈於本人博客。文科生的程序樂園