1246808 - [network] Show the dependency tree or graph of resources when requesting a URI (follow your nose)

Status: NEW

(DevTools :: Netmonitor, enhancement, P3)

Description

[Karl Dubost💡 :karlcow]

The network waterfall graph is showing a timeline view of HTTP requests. This is useful. 

Another useful view is a dependency graph, specifically in these days, where HTTP requests are deeply nested. To illustrate, let's say you query

http://example.org/
it then loads the HTML which in return will call some CSS, JS, and images.
then these CSS, JS will probably call other CSS, images, JSON and JS and so on. At the end you end up with a graph of HTTP Requests. 

When a JS calls another JS which calls another JS, etc… and fails. It can become very handy to understand the "follow your nose" path of HTTP requests, so you can debug why a script didn't execute or data are missing because they were never requested higher up in the graph.

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

See also:
https://twitter.com/igrigorik/status/663554121950105600
(from bug 1235243)

Honza

Comment 5

[Hubert Boma Manilla (:bomsy)]

Suggestions by @ntim from https://bugzilla.mozilla.org/show_bug.cgi?id=1361024#c0

It would be nice if you could easily see which requests initiated others.
Option #1:
Provide a separate tree view instead of the requests list.

Parent request 1
--> Child
--> Child
--> Child
----> sub child
------> sub child 2

Parent request 2
--> Child
--> child
--> child

Option #2:
Google Chrome like-UI: Shift hover over a request shows parent requests in green and child requests in red

Option #3:
Add new filter flags, one that gets all children of a specific request (initiated-by/child-requests/..:foo.js), and one that gets all parents of a specific request (originating-requests/parent-requests:foo.js). Then add buttons in the details view that will just set the text filter to the relevant flags.