开发者

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

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开发者_JS百科? 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.

  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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜