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?
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.
- start Chrome with flag --process-per-tab;
- open Inspector window in undocked mode;
- 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.
来源：https://stackoverflow.com/questions/3381481/how-does-webkit-chromes-webinspector-resources-inspection-work