Javascript 生成一个图表或模式，显示网站中所有文件之间的关系

在过去的9个月里，我一直在使用PHP和Javascript开发两个大型网站，而没有使用任何框架

每次我想修改页面或修复bug时，我都会花费：

查找包含html内容的PHP文件的时间占10%

20%的时间用于查找它正在使用的CSS和JavaScript文件

20%的时间用于查找它使用的PHP类及其继承的函数和变量

20%的时间用于定位通过ajax调用调用的所有脚本

而且只有30%的时间能够真正解决问题

因此，我想要的是，对于我要在项目中修改的每个文件，在对上述所有内容编制索引后，它会在图表/流程图上显示一个列表，其中包含所有这些关系以及指向这些文件的相应链接

经过大量的谷歌搜索，我找不到任何能直接有效解决这个问题的方法。现在，除了逐个打开PHP文件中的所有include外，我正在使用谷歌Chrome的Inspector从网络选项卡快速定位包含，甚至在源选项卡中添加我的整个工作区，以便直接从那里应用CSS和JavaScript修改。问题是，我没有任何选项来定位任何服务器端代码（PHP）。此外，我不想依赖于任何特定的Web浏览器。最后，这个解决方案没有为我提供任何网站模式的图形表示，这对于在几秒钟内理解您将要第一次修改的网页的整个结构非常重要

---

我知道这个问题听起来有点离题，但我在网上找不到任何东西（可能我没有使用正确的搜索关键字？），我觉得很多开发人员有时都会遇到这个问题，所以如果回答了这个问题并保持可见，它可能真的很有帮助。即使我由于经验上的运气而错过了要点，并且对这类问题有不同的处理方法，我不认为我是第一个，为所有其他人澄清这一点也很好。

我无法帮助您解决问题的图表部分，但我知道您的问题是索引问题

---

您可以使用sublime，它或多或少适用于所有的操作系统，同时非常轻。有了它，您就可以看到索引了。

您考虑过使用IDE吗？像PHPStorm什么的？如果你不使用IDE，为什么？我更喜欢它是特定于项目的（比如框架），而不是特定于计算机的（比如IDE或Web浏览器）。原因是我不想依赖于操作系统或每次使用的电脑规格。