3

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)

Improve this question
10
  • 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, 2016 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.
    – 西門 正 Code Guy
    May 27, 2016 at 2:20
  • I did what I can do. It is now up to the community. Cheers!!
    – closetnoc
    May 27, 2016 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, 2016 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, 2016 at 7:55

0

Reset to default

Browse other questions tagged or ask your own question.