Tool for showing javascript, CSS, HTML dependencies

Question

I am relatively new to JavaScript and trying to find a way to get a good overall understanding of JavaScript projects, frameworks, etc.. For example when I look at a JavaScript based source on Github I would like a one page snapshot of the dependencies between the html, css and the various .js files requiring further js files( modules) , instead of looking at the source code tree and opening up the individual files. What I am looking for is either an object diagramming tool or something like a "file diagram".

Is there a tool out in the wild already doing this? (and ,yes I have already tried Google-ing it)

(I used to use a tool in the Windows world for tracking DLLs which is a similar concept.)

I found Colony which is the closest to what I have been looking for. github.com/hughsk/colony — Crocodile
– Crocodile, Commented Sep 30, 2014 at 19:58

Josh · Accepted Answer · 2011-06-07 19:30:36Z

1

https://github.com/nodejitsu/require-analyzer gets you part of the way there.

One could also implement a file dependency analyzer if you are looking for more comprehensive html/template analysis with these two:

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

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

answered Jun 7, 2011 at 19:30

Josh

12.7k2 gold badges45 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marto · Accepted Answer · 2011-06-07 12:10:54Z

0

Using Firebug you can see the files requested by each page, the server response and you can filter them by type. The HTML view lets you see the entire page including related js/css content. I don't think it's exactly what you are looking for, but I find it helpful for this sort of thing.

answered Jun 7, 2011 at 12:10

marto

4,53127 silver badges15 bronze badges

Comments

user3468640 · Accepted Answer · 2014-03-28 11:29:09Z

here are some bookmarklet code that could help (taken from https://www.squarefree.com/bookmarklets/webdevel.html

view style sheet : javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%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%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Style%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i

view scripts: javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b=d.body;%20function%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);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i

Collectives™ on Stack Overflow

Tool for showing javascript, CSS, HTML dependencies

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related