Inspecting the Web Inspector

Chrome's immensely useful Web Inspector has a timeline feature that displays, among other information, when certain events happen in a page's lifecycle. These events are represented by tiny vertical stripes on the timeline's x-axis.

Timeline event stripes

The blue and red events are the DOMContentLoaded and Load events, but what about the green and orange ones? I couldn't find any reference to them online. And to be fair, they don't seem to be available in the stable version of Chrome. I'm not sure in what version they were added, but they're certainly present in Version 33.0.1750.5 dev and above, because that's where I see them.

I asked in #chrome-devtools if anyone knew what the green and orange events represented, and someone came up with the brilliant idea of inspecting the inspector:

  1. Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.

  2. Make sure that the developer tools are undocked into a new window. You may have to click or long-hold the docking icon in the bottom left: Undock icon

  3. Press Command+Option+i again on this new window.

  4. That will open the DevTools on the DevTools. You can redock the page's DevTools if you want.

  5. If it's not already, select Elements — it's the first icon at the top of the inspector.

Once you do that, you can see that these event stripes have title attributes. Unfortunately, the events are covered by other UI elements, so mousing over them does not display the titles as tooltips, as it should.

Event stripe title attribute

As expected:

  • resources-blue-divider is "DOMContentLoaded event"
  • resources-red-divider is "Load event"

And the unknowns?

  • resources-green-divider is "First paint"
  • resources-orange-divider is "CSI/tbsd_"

First paint is a useful event: it will strongly affect a user's perception of a page's speed. Good to know! (I wonder, though, is the green stripe really the first painting that happens? On the timeline, it generally appears after some painting activity has taken place, but perhaps it represents the first appearance of pixels on the screen or something like that.)

So what on earth is "CSI/tbsd_"?

Googling led me to a couple of not so useful results.

Paul Irish chimed in to answer this one:

<paul_irish> wjb: csi?tbsd is a console.time call comng from google
<wjb> paul_irish: thanks!
<wjb> paul_irish: Why does a console.time timer name end up as the title of a timeline event?
<paul_irish> because.
<paul_irish> people end up using it for "structured profiling" like that more than they do to just get millisecond counts

So it's a convenient shorthand for the Chrome team to profile something in the page lifecycle — who knows what. So far, it only seems to appear on pages with Google WebFonts, so it might be related to loading those.