Recently, I have had to analyse and upgrade a web application.

I need to know the relationships and functions of each file including CSS and JS inside each page, as opposed to the whole website.

Thus, I would like to draw a "file map" to visually understand and easily track the file relationships.

What is the the best/recommended methodology to analyse and visualize the relationships including JS, CSS and so on?

(I am not sure what to call this feature, so I have used "file map" at the moment)

  • 1
    Can you rewrite this question NOT to ask for a tool recommendation and still get an answer that will help you? Recommendations are off-topic here. Cheers!! – closetnoc May 26 '16 at 2:55
  • @closetnoc Thanks a lot, I have rewritten the question title and content. See if it shows a better match to the website. – simongcc May 27 '16 at 2:20
  • I did what I can do. It is now up to the community. Cheers!! – closetnoc May 27 '16 at 4:04
  • @simongcc Can you explain what you mean by a visual "file map". Most developers use the Developer Tools inside of browsers like Chrome to view what's being requested, loaded, and rendered. Check out the Sources tab in Chrome's Developer Tools, which will show a hierarchy of what's been requested and from where. See this for a breakdown of: Chrome's Developer Tools. If you're looking for a third-party tool, I'm afraid that would be off-topic for this site since that often leads to spam and self-promotion. – dan May 27 '16 at 5:09
  • Are you using a particular CMS or framework at the moment? There might be something built in to that. – Tim Malone May 27 '16 at 7:55

Browse other questions tagged or ask your own question.