Webpack下稀里糊涂涌现的jQuery与报错,记一次巧妙的Debug路程

场景重现

项目是一个SPA,使用了Vue+Vue-Router+Webpack+jQuery。
报错的场景以下:
《Webpack下稀里糊涂涌现的jQuery与报错,记一次巧妙的Debug路程》

为什么称之为稀里糊涂?

项目虽然作为一个SPA,也引用了jQuery。
然则!!!我一切的JS文件悉数用Webpack打包了呀!
不该该会有零丁的jQuery文件啊……
把报错内容上百度一搜刮,发明完全不搭架。
因而最先了苦思冥想和Debug。

Debug

在Debug历程当中,发明

  1. jQuery的报错是在SPA中两个页面的无刷切换中涌现的。

  2. 失足次数会不停叠加,但对页面任何功用都无影响。

因而尝试中从切换中去寻觅答案。
厥后发明页面切换部份的代码并没有任何问题。
因而最先思索,Webpack的锅?

细致想了想后否认了,Webpack会把我用的一切JS文件全打包成一份。不该该有零丁的jQuery文件出来。
因而想看看这个jQuery是寄存在哪儿的。

把报错的jQuery文件在新页面翻开。看向网址
《Webpack下稀里糊涂涌现的jQuery与报错,记一次巧妙的Debug路程》

等等!
网址的前缀是”chrome-extension://”,这个是谷歌浏览器插件的前缀。

难不成,这个jQuery文件是谷歌浏览器插件的?

因而看向了”chrome-extension://ikhdkkncnoglghljlkmcimlnlhkeamad/js/lib/jquery.js”中心的那一串神奇字符串。那是谷歌浏览器插件的“身份证”。

因而在插件治理页面寻觅。
《Webpack下稀里糊涂涌现的jQuery与报错,记一次巧妙的Debug路程》

然后把插件禁用后, 再也没报错。

觉得

Debug完成后,觉得松了一口气的同时,也非常高兴。由于开辟中总会有林林总总的BUG,像这类稀里糊涂的BUG,网上是没有处理方法的。因而只能本身一点一点去揣摸,去处理。

本身揣摸的历程,真的好爽~~~(来自文科生的慨叹,逃)

本文同时宣布于本人博客。文科生的顺序乐土

    原文作者:Lxxyx
    原文地址: https://segmentfault.com/a/1190000004135554
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞