如何在Web Inspector中查找引入脚本的来源？含jQuery多版本排查

• 开发者工具追踪初始化链路：在Web Inspector的Sources面板找到加载的jQuery文件，右键选择「Show Function Definition」，或者直接在文件里定位jQuery/$的定义，然后查看调用栈，往上追溯就能找到触发加载的脚本。也可以先在Console执行console.log(jQuery.fn.jquery)确认各版本号，再针对性追踪。
• 排查动态加载逻辑：很多组件会用document.createElement('script')或$.getScript()动态引入脚本。可以给document.createElement加条件断点——当参数为'script'时触发，然后查看调用栈里的来源；也可以全站搜索getScript、appendChild、insertBefore这类操作脚本节点的代码。
• 逐个禁用第三方组件：如果用了CMS或第三方UI插件，这类组件常自带jQuery。暂时禁用所有插件/组件，再逐一恢复，看哪个恢复后多版本jQuery出现，就能锁定来源。比如WordPress可以检查主题的functions.php，很多脚本是通过钩子注册的。
• Network面板查看Initiator：在Network面板过滤「JS」类型，找到各jQuery文件，看「Initiator」列，这里会显示触发加载的脚本文件和行号，直接点击就能定位到加载代码。

• Network面板溯源：所有加载的脚本都能在Network的JS过滤列表里找到，每个条目都有Initiator字段，直接追踪该字段指向的文件和行号，多数动态加载脚本的源头都能在这里找到。
• 全局钩子监听脚本创建：在Console运行以下代码，能捕获所有动态创建的脚本元素并打印调用栈：

const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
  const element = originalCreateElement.call(this, tagName);
  if (tagName.toLowerCase() === 'script') {
    console.trace('Script element created');
  }
  return element;
};

• 检查依赖管理配置：如果用了Webpack、Vite这类打包工具，查看package.json、webpack.config.js或vite.config.js里的依赖，用npm ls jquery（npm项目）或yarn list jquery（yarn项目）查看依赖树，找到重复引入的包。
• 排查服务器端注入：部分脚本是服务器在响应页面时动态注入的，比如CDN缓存插件、SSR中间件。可以在Network面板找到主文档，右键「View Source」查看原始HTML，对比浏览器渲染后的DOM，确认是否有服务器端添加的脚本。

内容的提问来源于stack exchange，提问作者MrBrady