我相对较新于JavaScript，并尝试寻找一种方法来全面了解JavaScript项目、框架等。例如，当我查看Github上的基于JavaScript的源代码时，我希望有一个页面快照，显示HTML、CSS和各种.js文件之间的依赖关系，需要进一步的js文件（模块），而不是查看源代码树并打开单个文件。我正在寻找的是对象图形化工具或类似“文件图”的东西。已经有这样的工具在外面使用了吗？（是的，我已经尝试过谷歌搜索）（我曾经在Windows世界中使用tool来跟踪DLL，这是一个类似的概念。）
显示JavaScript、CSS、HTML依赖关系的工具
3
- Crocodile
1
我发现Colony是我一直在寻找的最接近的东西。https://github.com/hughsk/colony - Crocodile
3个回答
1
https://github.com/nodejitsu/require-analyzer可以帮助你完成部分工作。
如果你想要更全面的HTML/模板分析，你也可以使用文件依赖性分析器来实现这一点：
- Josh
0
使用Firebug，您可以查看每个页面请求的文件、服务器响应，并可以按类型进行过滤。HTML视图可让您查看整个页面，包括相关的js/css内容。我不认为这正是您要寻找的，但我发现它对这种事情很有帮助。
- marto
0
这里有一些书签代码，可以帮助你（取自https://www.squarefree.com/bookmarklets/webdevel.html）
查看样式表： javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/设置基础href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\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='在'%20+%20location.href%20+%20'的样式表'));%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='在'%20+%20location.href%20+%20'的脚本'));%20for(i=0;%20i
- user3468640
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接