我对 JavaScript 比较陌生，并试图找到一种方法来全面了解 JavaScript 项目、框架等。例如，当我在 Github 上查看基于 JavaScript 的源时，我想要一个 html、css 和各种 .js 文件之间的依赖关系的页面快照 需要进一步的 js 文件（模块），而不是查看源代码树并打开单个文件。我正在寻找的是对象图表工具或类似“文件图”之类的东西。
是否有现成的工具可以做到这一点？（是的，我已经尝试用 Google 搜索它）
（我曾经在 Windows 世界中使用tool 来跟踪 DLL，这是一个类似的概念。）
【问题讨论】：
标签： javascript node.js
https://github.com/nodejitsu/require-analyzer 助您一臂之力。
如果您正在寻找更全面的 html/模板分析，也可以实现文件依赖分析器：
【讨论】：
使用Firebug，您可以查看每个页面请求的文件、服务器响应，您可以按类型过滤它们。 HTML 视图可让您查看整个页面，包括相关的 js/css 内容。我不认为这正是您正在寻找的东西，但我发现它对这类事情很有帮助。
【讨论】：
这里有一些可以提供帮助的书签代码（取自 https://www.squarefree.com/bookmarklets/webdevel.html
查看样式表： javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'')。替换(/\s*$/,%20'');%20};%20function%20iff(a,b,c){return%20b?a+b+c:'';}function%20add(h ){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d .createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText ('h3',%20d.title='样式%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i
查看脚本： javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b =d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');% 20};%20function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag (tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid ;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i
【讨论】：