Chrome extension to generate interactive page dependency graphs
MIT License
Chrome extension to generate interactive page dependency graphs.
The above shows the graph obtained from the IMDb home page. Live demo here.
This PoC exploits the initiator
field of the Network.requestWillBeSent
event exposed by the Chrome Debugging Protocol to build a dependency graph
of the objects loaded by a tab during a certain time interval.
Each node represents an HTTP object and it is thus identified by its URL. The color of the nodes denotes the object type: image, style sheet, etc.
Arrows can be interpreted as has been loaded by relationship, and multiple arrows means that all the targets are responsible of the loading of the source node (i.e., each element of the AJAX stack trace).
When the same URL is requested more than once a placeholder (empty) node is added and all the instances are linked back to it by dashed lines. In this case, only the placeholder node can be the target of a relationship.
Install the dependencies locally:
cd bundle
npm install
npm run bundle
Navigate to chrome://extensions
, make sure that "Developer mode" is
enabled, click "Load unpacked extension..." and select the extension
folder,
Click on the extension button and follow the instructions.
Graphs can be saved as standalone HTML files.