How does Chrome Dev Tools console Access the resources of the website?

Question

Early on I was doing some debugging and testing using the chrome dev tools(known as inspect element). I found out that on the Resources column of the dev tool, Chrome can always access the resources from the server and display them(links, videos, images....). Just wonder how Chrome does that. Is there any way to write a piece of code doing the same thing(access the server resources of other websites, not modifying them but displaying, stuff like, the link of the video currently playing on the website, which usually does not pop up until the play button is hit)?

Answer 1

DevTools doesn't fetch resources from a site. It fetches them from the browser.

There were similar questions already

How does webkit/chrome's WebInspector Resources Inspection work?

and

Getting Information from Google Chrome's Developer Tools

The Chrome Developer Tools has two parts frontend (html+javascript) and backend (C++) and there is an API which specifies the protocol between these parts. You can see the specification here. You can use it for writing your own app instead of standard DevTools frontend.

Also there is experimental debugging API for chrome extensions.

Answer 2

I think the Webkit WebInspector go over the hole source code and match all resources of the source.

So it match <link href="something.css"> and then it place something.css in the resource panel under stylesheets. And exactly the same thing for the other tags.

It's not hard to make regexes for this.