如何使用 FF 或 Chrome 检查使用 RequireJS 加载的 JS 文件？答案

【问题标题】：How to inspect JS files loaded with RequireJS using FF or Chrome?如何使用 FF 或 Chrome 检查使用 RequireJS 加载的 JS 文件？
【发布时间】：2013-08-01 02:21:17
【问题描述】：

目标

我正在尝试剖析一个使用 RequireJS 加载其源代码的客户端应用程序。

问题

正如预期的那样，应用程序加载了一个主 JS 文件，该文件需要（）和定义（）其他模块。主 JS 文件在 Chrome 的开发工具 --> 资源中可见。所有随后加载的模块都不是。

如何以类似于查看脚本标签加载的 JS 文件的方式查看加载为 RequireJS 模块的 JS 文件？

【问题讨论】：

标签： requirejs

【解决方案1】：

查看Sources 选项卡，您会在其中找到所有已加载的文件。也许您必须单击源窗口左上角的小show navigator 图标。

【讨论】：

不幸的是，这仍然只显示最初加载的进行 require() 调用的文件。我检查了来源、内容脚本和 sn-ps。感谢您花时间考虑这个问题。如果有什么我可以澄清的，请告诉我。
您确定文件已加载，因为它对我有用。您能否在某些模块的某处设置断点写入debugger，因为它必须打开源选项卡。
JS 文件如果加载正确会显示在网络和资源中。

【解决方案2】：

恐怕您将能够看到任何 JS 文件，因为您尝试调试的客户端应用程序似乎是 RequireJS 的优化版本。

RequireJS 优化器是一个将所有define() 和require() 脚本组合到一个文件中的工具，这有助于减少服务器端调用，或者就此而言，只有一次调用服务器端。把它想象成大多数标准库的缩小版

【讨论】：

如果我正确理解了 RequireJS（我对它有点陌生），RequireJS 加载器和 r.js 优化器之间是有区别的，它不会自行组合脚本，这确实结合了它们。了解 OP 是否实际运行 r.js 并使用脚本的构建版本，或者只是将 RequireJS 用作动态加载器，这可能会有所帮助。
是的，没错。只有在运行 r.js 后才会创建缩小版

【解决方案3】：

我在加载 .js 文件时遇到了同样的问题

$("#element").load("thisIsMyJsFile.js");

我想在 chrome 的“sources”中调试“thisIsMyJsFile.js”。
在“thisIsMyJsFile.js”文件中添加这一行：

//# sourceURL=browsertools://thisIsMyJsFile.js

将“thisIsMyJsFile.js”更改为您的文件名。
和
当您检查元素时，它将显示在源代码中。

【讨论】：