时间轴面板中网络图上的颜色编码是什么意思？

Question

我指的时间轴面板部分在下图中以红色突出显示。

我假设每个条代表一个资源。每种资源的浅色和深色部分代表什么？蓝色、黄色和绿色资源代表什么？

Answer 1

颜色表示如下：

蓝色是HTML
黄金是剧本
紫色是风格
绿色是媒体
灰色是Other/Misc请求类型

目前可以在 devtools/front_end/timeline/TimelineUIUtils.js 的第 428 行找到这些内容。

switch (category) {
  case categories.HTML: return "hsl(214, 67%, 66%)";
  case categories.Script: return "hsl(43, 83%, 64%)";
  case categories.Style: return "hsl(256, 67%, 70%)";
  case categories.Media: return "hsl(109, 33%, 55%)";
  default: return "hsl(0, 0%, 70%)";
}

条形的较亮区域是等待请求所花费的时间。黑色刻度是执行内容传输所花费的时间。这是在查看 TimelineEventOverview 文件的 drawRequest 方法时发现的。

Answer 2

这是来自 Chromium 源项目： https://source.chromium.org/chromium/chromium/src/+/master:out/Debug/gen/devtools/network/NetworkWaterfallColumn.js;l=115-128?q=waterfall%20color&ss=chromium%2Fchromium%2Fsrc&originalUrl=https:%2F%2Fcs.chromium.org%2F

和

https://source.chromium.org/chromium/chromium/src/+/master:third_party/devtools-frontend/src/front_end/timeline/TimelineUIUtils.js;l=467-480?q=TimelineUIUtils.js&ss=chromium&originalUrl=https:%2F%2Fcs.chromium.org%2F

时间轴面板中网络图上的颜色编码是什么意思？

What does the color coding mean on the network graph in the Timeline panel?

google-chrome-devtools