webkit/chrome Web Inspector 资源检查如何工作？

Question

我一直想知道resource inspection 在 webkit/safari/chrome 的 WebInspector 中是如何工作的。

浏览器必须提供原生 BPI 或其他东西供 javascript 显示查询列表及其时间线，二进制 API 叫什么？我可以使用相同的 API 来编写 Chromium 扩展吗？

Answer 1

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

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

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

您可以尝试通过 Inspector 本身来调查 Inspector 的内部世界。

1. 用标志启动 Chrome --process-per-tab;
2. 以非停靠模式打开 Inspector 窗口；
3. 在 Inspector 窗口中按 Ctrl-Shift-I。

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

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