找出加载了哪些 js 文件，但没有使用答案

【问题标题】：Find out what js file was loaded, but not used找出加载了哪些 js 文件，但没有使用
【发布时间】：2014-11-26 14:39:04
【问题描述】：

有没有办法知道html中加载了哪些js文件，但没有使用？假设我在一个 HTML 页面上加载了 jQuery、jQuery Tabs、jQuery DatePicker 库，但是在那个页面上我没有使用它们，除了 jQuery。有没有办法找出使用（执行）的 js 文件？

【问题讨论】：

标签： javascript developer-tools

【解决方案1】：

简短回答 - 否。

长答案：

由于文件在页面本身中被引用，所有脚本都将被加载、执行并且它的代码（全局变量和函数 - 例如$）公开。

检查脚本的某个部分是否执行的唯一方法是观察参与者或 - 换句话说 - 调用代码和被调用代码。

例如：

function callingFunction() {
  console.log('I will call this code!');
  calledFunction();
}

function calledFunction() {
  /// <summary>
  /// Lets say this function is added in a external file
  /// </summary>

  console.log('My code was called!');
}

按需脚本加载

一个好的方法是仅在需要时加载您的库。 jQuery 的$.getScript 在这里做得很好。如果您像这样引用您的库，您可以通过网络面板检查当前加载的库。

更新

Chrome 59 现在支持执行类似操作的代码覆盖率。看看这个 https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

【讨论】：

有没有办法挂钩所有的javascript函数，然后从回调中添加console.log？
@RohnAdams 据我所知不是 - 但你为什么要这样做？
我接手了一个项目，在每个 .html 页面上都包含大量 JS 脚本。我觉得好像它们中的许多不需要包含在每个页面上，只需要包含在需要任何脚本功能的页面上。我希望能够快速确定页面不需要哪些内容，这样我就可以防止它们被不必要地包含在内。如果我可以挂钩所有 JS 函数调用，这似乎是确定在哪些页面上调用哪些函数的好方法。
好吧，最新版本的 chrome 有很多有用的工具可以做到这一点。新的代码覆盖率检查应该会给你一些信息。您也可以通过单击禁用文件并检查功能是否仍然存在。
太棒了，我不知道这个代码覆盖工具。看起来它会做我想要的。谢谢。

【解决方案2】：

不，不是。当您包含所有文件时，将加载该文件中的所有 JavaScript 代码。如果您想在使用其中的函数时加载 js 文件，您可以检查插件是否可用。如果它不可用，则包含该文件。

例如：

if(jQuery().datepicker) {
     //Include datepicker here
}

【讨论】：

【解决方案3】：

当你在页面中包含任何 js 时，它会被加载，尽管您可以使用 chrome 事件侦听器选项卡与事物交互时检查正在运行的内容。

这是你将得到的最接近的

【讨论】：

【解决方案4】：

我认为没有一种简单的方法可以做你想做的事。如果目的是延迟加载，最好使用require之类的库

【讨论】：