https://github.com/cyrus-and/chrome-page-graph
Chrome extension to generate interactive page dependency graphs
https://github.com/cyrus-and/chrome-page-graph
chrome-extension dependency-graph webpage
Last synced: about 1 year ago
JSON representation
Chrome extension to generate interactive page dependency graphs
- Host: GitHub
- URL: https://github.com/cyrus-and/chrome-page-graph
- Owner: cyrus-and
- License: mit
- Created: 2016-11-22T19:04:09.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-13T00:01:33.000Z (over 8 years ago)
- Last Synced: 2025-04-30T06:46:26.168Z (about 1 year ago)
- Topics: chrome-extension, dependency-graph, webpage
- Language: JavaScript
- Size: 15.6 KB
- Stars: 34
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Page Graph
==========
Chrome extension to generate interactive page dependency graphs.
The above shows the graph obtained from the [IMDb][1] home page. Live
demo [here][2].
[1]: http://www.imdb.com/
[2]: https://cdn.rawgit.com/cyrus-and/a1b3d6a676b3b315cec9f6f87bb972d4/raw/50d4d5d176284138540e388f32785ddb2100fff3/demo.html
Description
------------
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.
[`initiator`]: https://chromedevtools.github.io/debugger-protocol-viewer/tot/Network/#event-requestWillBeSent
[Network.requestWillBeSent]: https://chromedevtools.github.io/debugger-protocol-viewer/tot/Network/#event-requestWillBeSent
[Chrome Debugging Protocol]: https://developer.chrome.com/devtools/docs/debugger-protocol
Setup
-----
1. Install the dependencies locally:
cd bundle
npm install
npm run bundle
2. Navigate to `chrome://extensions`, make sure that "Developer mode" is
enabled, click "Load unpacked extension..." and select the `extension`
folder,
Usage
-----
Click on the extension button and follow the instructions.
Graphs can be saved as standalone HTML files.