javascript - 生成显示网站中所有文件之间关系的图表或架构

Question

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

每次我想修改页面或修复错误时，我都在花费:

1. 10% 的时间用于查找包含 html 内容的 PHP 文件
2. 20% 的时间用于定位它正在使用的 CSS 和 JavaScript 文件
3. 20% 的时间用于定位它正在使用的 PHP 类 以及它正在继承的函数和变量
4. 20% 的时间用于查找通过ajax 调用 调用的所有脚本。
5. 而且只有 30% 的时间可以真正解决问题。

所以，我想要一些东西，对于我想在元素中修改的每个文件，在索引所有上述内容之后，它会显示一个包含所有这些关系的列表在图表/流程图以及这些文件的相应链接上。

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

我知道这个问题听起来有点题外话，但我在网上找不到任何东西(也许我没有使用正确的搜索关键字？)，我觉得这是个问题许多开发人员有时会为此苦苦挣扎，所以如果它得到回答并保持可见，它可能会非常有帮助。即使由于经验的运气我错过了这一点并且对这类问题有不同的方法，我不认为我是第一个并且为所有其他人澄清也可能是件好事。

Answer 1

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

您可以使用 sublime，它或多或少适用于所有操作系统，同时它非常轻便。有了它，您将拥有索引，如您所见here .