webkit/chrome的WebInspector资源检查如何工作？

Question

我一直想知道webkit/safari/chrome的WebInspector中的资源检查是如何工作的.

浏览器必须提供本机BPI或javascript以显示查询列表及其时间轴,二进制API的名称是什么？我可以使用相同的API编写Chromium扩展吗？

Answer 1

资源请求和其他 DevTools/WebInspector 相关数据由 InspectorController 及其代理收集。（这只是C++代码）

之后，所有数据都作为 WebInspector 对象方法的 JS 调用推送到 WebInspector 中。

您可能知道所有 DevTools/WebInspector 的 GUI 都是一个 html 页面和大量 JavaScript。

你可以尝试通过Inspector本身来探究Inspector的内部世界。

1. 使用标志 --process-per-tab 启动 Chrome；
2. 在非停靠模式下打开检查器窗口；
3. 在检查器窗口中按 Ctrl-Shift-I。

Inspector 和被检查页面之间的所有流量都通过两个函数传递：从 Inspector 到被检查页面 - sendMessageToBackend 从被检查页面到 Inspector - devtools$$dispatch

您可以通过此链接跟踪 WebKit 中 WebInspector 的最新更改。