用于显示javascript、CSS、HTML依赖关系的工具

Tool for showing javascript, CSS, HTML dependencies

本文关键字：关系工具依赖 CSS 显示 javascript 用于 HTML 更新时间：2023-09-26

我对JavaScript相对陌生，正试图找到一种方法来全面了解JavaScript项目、框架等。例如，当我在Github上查看基于JavaScript的源代码时，我想要一个html、css和各种.js文件之间依赖关系的一页快照，需要更多的js文件（模块），而不是查看源代码树并打开各个文件。我要找的要么是对象图工具，要么是类似"文件图"的东西。

野外有没有工具已经在做这件事了（是的，我已经试过谷歌搜索了）

（我曾经在Windows世界中使用一个工具来跟踪DLL，这是一个类似的概念。）

https://github.com/nodejitsu/require-analyzer让你走一段路。

如果您想使用以下两种方法进行更全面的html/模板分析，也可以实现文件依赖性分析器：

http://nodejs.org/docs/v0.4.8/api/fs.html#fs.readdir

http://nodejs.org/docs/v0.4.8/api/fs.html#fs.watchFile

使用Firebug，您可以查看每个页面请求的文件、服务器响应，并可以按类型进行筛选。HTML视图允许您查看整个页面，包括相关的js/css内容。我不认为这正是你想要的，但我发现它对这类事情有帮助。

这里有一些bookmarklet代码可以提供帮助（取自https://www.squarefree.com/bookmarklets/webdevel.html

视图样式表：javascript:s=document.getElementsByTagName（'STYLE'）；%20ex=document.getElementsByTagName（'LINK'）；%20d=window.open（）.docent；%20/设置%20base%20href/d打开（）；d.关闭（）；%20b=d.body；%20函数%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%20mkeText（tag，text）｛t=makeTag add（makeText（'h3'，%20d.title='样式%20sheets%20in%20'%20+%20location.href）)；%20for（i=0；%20i

视图脚本：javascript:s=document.getElementsByTagName（'SCRIPT'）；%20d=window.open（）.docent；%20/140681/d打开（）；d.关闭（）；%20b=d.body；%20函数%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%20location.href））；%20for（i=0；%20i