Mapping DOM Elements to Network Requests

[wooduk]

For a loaded page I would like be able to see the network request
information that is associated with a particular element of the DOM.
For example, it'd be really useful to be able to select a div (perhaps
in the the devtools Elements panel) that contains, say, an advertising
component of the page and see what resources were required to put it
there. Something like the network panel but for the constituent parts
of a document.

I noticed that in the devtools Timeline panel you are able to 'glue
asynchronous events to causes' and enabling this often shows a Parse
event giving rise to Schedule Request Events, which seems like a good
start. How could I go about pulling through more details about what
was being parsed in that Parse event (ideally which element in DOM)
through to devtools?

I'm new to hacking around in chromium not quite sure how the event
listeners in the timeline work - where the best place might be to
start?

Thanks for any help