How does webkit/chrome's WebInspector Resource

Question

I always want to know how the resource inspection work in webkit/safari/chrome's WebInspector work.

The browser must provide a native BPI or something for javascript to display list of queries and their timelines, what is the binary API called? Can I use the same API to write a Chromium extension?

Answer 1

The resource requests and other DevTools/WebInspector related data is collecting by InspectorController and it's agents. (it just C++ code)

After that all the data is pushing into WebInspector as JS calls of WebInspector object's methods.

As you probably know all the DevTools/WebInspector's GUI is an html page and a lot of JavaScript.

You can try to investigate the internal world of Inspector by Inspector itself.

1. start Chrome with flag --process-per-tab;
2. open Inspector window in undocked mode;
3. press Ctrl-Shift-I in Inspector window.

All the traffic between Inspector and inspected page are passing via two functions: from Inspector to inspected page - sendMessageToBackend from inspected page to Inspector - devtools$$dispatch

You can track the latest changes for WebInspector in WebKit via this link.