如何确定网页中加载的JS文件的真实层次结构

Question

Background:我正在尝试让一个网页在门户网站上工作。Portal从一个构建在Adobe AEM上的站点中拉出一个页面，该站点使用ext JS，这增加了复杂性。但感兴趣的页面有很多JS包含(~30)，但门户去掉了所有标题、导航栏或/和直接JS包括使用页面的脚本标记，只提取内容。

Issue:，所以我的策略是查看需要什么JS，并将它们直接包含在门户中，它在大多数情况下都有效。但在这个涉及Ext Js的特定情况下，我无法完成同样的任务。

我在chrome dev工具中看到了很多JS文件，但无法确定文件的正确层次结构，因此我可以手动将它们包含在门户端。

我尝试使用dev tools network选项卡中的initiator，但很多文件都有相同的启动器。那么，关于如何确定正确的层次结构，有什么好主意吗？或者是我遗漏了一个根本的问题，它将阻止我这样做？

附注:如果需要，我可以添加更多信息/数据。

Answer 1

如果我理解正确的话，您需要在页面上加载ExtJS类的顺序，这可以帮助您确定包含JS文件的正确顺序。您可以使用Ext.Loader.history。只需在控制台中运行它。如果可以注入linq.js脚本，就可以使用我用于ASP.NET MVC应用程序的代码片段

function replaceAll(replace, str) {
  return str.replace(/\./g, replace);
};
JSLINQ(Ext.Loader.history).Where(function(item){ return item.indexOf("HelloExt") !=-1 || item.indexOf("Ext.ux") !=-1; })
.Select(function(item){
if(item.indexOf("HelloExt") !=-1) {return "~/Scripts/"+replaceAll("/",item)+".js"}
else if(item.indexOf("Ext.ux") !=-1){
return "~/Scripts/helloext/extjs/examples/ux/"+replaceAll("/",item).replace("Ext/ux/","")+".js"
}}).ToArray()

只需将HelloExt替换为应用程序的名称，将~/Scripts/..替换为正确的路径