颜色编码在时间轴面板中的网络图上意味着什么？

Question

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

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

Answer 1

颜色表示如下：

• 蓝色是HTML
• 黄金是脚本
• 紫色是Style
• 绿色是媒体
• 格雷是其他/其他请求类型

这些目前位于devtools/front_end/timeline/TimelineUIUtils.js的第341行。

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