Chrome DevTools Status Rappers - illustrate your Network panel

status-rappers.css

#-webkit-web-inspector .status-column {
  overflow: visible !important;
}
#-webkit-web-inspector .status-column [title] {
  overflow: visible !important;
  position: relative !important;
}
#-webkit-web-inspector .status-column [title]::before {
  border-color: transparent transparent #000 transparent !important;
  border-style: solid !important;
  border-width: 10px !important;
  bottom: -10px !important;
  height: 0 !important;
  left: 10px !important;
  width: 0 !important;
}
#-webkit-web-inspector .status-column [title]::after {
  background: #000000 0 0 no-repeat scroll !important;
  background-image: none !important;
  background-size: contain !important;
  bottom: -260px !important;
  height: 250px !important;
  left: 0 !important;
  width: 325px !important;
}
#-webkit-web-inspector .status-column [title]::after,
#-webkit-web-inspector .status-column [title]::before {
  content: ' ' !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  transition: all 0.5s ease-out !important;
  z-index: 1 !important;
}
#-webkit-web-inspector .status-column [title]:hover::after,
#-webkit-web-inspector .status-column [title]:hover::before {
  opacity: 1 !important;
}
#-webkit-web-inspector .status-column [title^="100 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/100.png) !important;
}
#-webkit-web-inspector .status-column [title^="101 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/101.png) !important;
}
#-webkit-web-inspector .status-column [title^="200 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/200.png) !important;
}
#-webkit-web-inspector .status-column [title^="201 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/201.png) !important;
}
#-webkit-web-inspector .status-column [title^="202 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/202.png) !important;
}
#-webkit-web-inspector .status-column [title^="203 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/203.png) !important;
}
#-webkit-web-inspector .status-column [title^="204 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/204.png) !important;
}
#-webkit-web-inspector .status-column [title^="206 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/206.png) !important;
}
#-webkit-web-inspector .status-column [title^="300 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/300.png) !important;
}
#-webkit-web-inspector .status-column [title^="301 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/301.png) !important;
}
#-webkit-web-inspector .status-column [title^="302 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/302.png) !important;
}
#-webkit-web-inspector .status-column [title^="303 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/303.png) !important;
}
#-webkit-web-inspector .status-column [title^="304 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/304.png) !important;
}
#-webkit-web-inspector .status-column [title^="400 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/400.png) !important;
}
#-webkit-web-inspector .status-column [title^="401 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/401.png) !important;
}
#-webkit-web-inspector .status-column [title^="402 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/402.png) !important;
}
#-webkit-web-inspector .status-column [title^="404 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/404.png) !important;
}
#-webkit-web-inspector .status-column [title^="406 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/406.png) !important;
}
#-webkit-web-inspector .status-column [title^="410 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/410.png) !important;
}
#-webkit-web-inspector .status-column [title^="413 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/413.png) !important;
}
#-webkit-web-inspector .status-column [title^="420 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/420.png) !important;
}
#-webkit-web-inspector .status-column [title^="500 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/500.png) !important;
}
#-webkit-web-inspector .status-column [title^="502 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/502.png) !important;
}
#-webkit-web-inspector .status-column [title^="504 "]::after {
  background-image: url(http://www.httpstatusrappers.com/images/504.png) !important;
}
#-webkit-web-inspector .status-column [title="Success"]::after,
#-webkit-web-inspector .status-column [title="Success"]::before,
#-webkit-web-inspector .status-column [title="(canceled)"]::after,
#-webkit-web-inspector .status-column [title="(canceled)"]::before,
#-webkit-web-inspector .status-column [title="(failed)"]::after,
#-webkit-web-inspector .status-column [title="(failed)"]::before,
#-webkit-web-inspector .status-column [title="(pending)"]::after,
#-webkit-web-inspector .status-column [title="(pending)"]::before,
#-webkit-web-inspector .status-column [title^="305 "]::after,
#-webkit-web-inspector .status-column [title^="305 "]::before,
#-webkit-web-inspector .status-column [title^="306 "]::after,
#-webkit-web-inspector .status-column [title^="306 "]::before,
#-webkit-web-inspector .status-column [title^="403 "]::after,
#-webkit-web-inspector .status-column [title^="403 "]::before,
#-webkit-web-inspector .status-column [title^="405 "]::after,
#-webkit-web-inspector .status-column [title^="405 "]::before,
#-webkit-web-inspector .status-column [title^="407 "]::after,
#-webkit-web-inspector .status-column [title^="407 "]::before,
#-webkit-web-inspector .status-column [title^="409 "]::after,
#-webkit-web-inspector .status-column [title^="409 "]::before,
#-webkit-web-inspector .status-column [title^="411 "]::after,
#-webkit-web-inspector .status-column [title^="411 "]::before,
#-webkit-web-inspector .status-column [title^="412 "]::after,
#-webkit-web-inspector .status-column [title^="412 "]::before,
#-webkit-web-inspector .status-column [title^="414 "]::after,
#-webkit-web-inspector .status-column [title^="414 "]::before,
#-webkit-web-inspector .status-column [title^="415 "]::after,
#-webkit-web-inspector .status-column [title^="415 "]::before,
#-webkit-web-inspector .status-column [title^="416 "]::after,
#-webkit-web-inspector .status-column [title^="416 "]::before,
#-webkit-web-inspector .status-column [title^="417 "]::after,
#-webkit-web-inspector .status-column [title^="417 "]::before,
#-webkit-web-inspector .status-column [title^="418 "]::after,
#-webkit-web-inspector .status-column [title^="418 "]::before,
#-webkit-web-inspector .status-column [title^="501 "]::after,
#-webkit-web-inspector .status-column [title^="501 "]::before,
#-webkit-web-inspector .status-column [title^="503 "]::after,
#-webkit-web-inspector .status-column [title^="503 "]::before,
#-webkit-web-inspector .status-column [title^="505 "]::after,
#-webkit-web-inspector .status-column [title^="505 "]::before {
  display: none !important;
}

Also available in cat form: https://gist.github.com/davidl/5254613

Screenshot plz?

Here you go:

Screenshot: http://mlkshk.com/r/PN4M

Screenshot (cats): http://mlkshk.com/r/PN4X

This file is generated from LESS: https://gist.github.com/davidl/5262604 which you can use with https://github.com/bentruyman/devtools-themes

This looks much nicer now that Chrome 26 supports transitioning of generated pseudo-elements. Note that I had to allow the contents of the Status cells to overflow, so there can be some overlap with the Type cells.