Skip to content

Instantly share code, notes, and snippets.

@davidl
Last active December 15, 2015 11:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save davidl/5254613 to your computer and use it in GitHub Desktop.
Save davidl/5254613 to your computer and use it in GitHub Desktop.
Add some HTTP status cats to your Chrome Dev Tools Network panel by adding these lines to your Custom.css file. Check out https://github.com/bentruyman/devtools-themes for more.
#-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: -266px !important;
height: 256px !important;
left: 0 !important;
width: 320px !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://farm8.staticflickr.com/7162/6512768893_a821929823_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="101 "]::after {
background-image: url(http://farm8.staticflickr.com/7022/6540479029_730c095b63_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="200 "]::after {
background-image: url(http://farm8.staticflickr.com/7153/6512628175_6a4e8ab6ba_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="201 "]::after {
background-image: url(http://farm8.staticflickr.com/7149/6540221577_ed29955a01_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="202 "]::after {
background-image: url(http://farm8.staticflickr.com/7167/6540479079_16e97a624a_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="204 "]::after {
background-image: url(http://farm8.staticflickr.com/7154/6547319943_442c6509bb_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="206 "]::after {
background-image: url(http://farm8.staticflickr.com/7021/6514473163_4e2a681cbd_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="207 "]::after {
background-image: url(http://farm8.staticflickr.com/7141/6514472979_c44518c4ce_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="300 "]::after {
background-image: url(http://farm8.staticflickr.com/7019/6519540181_d4eae6ee7a_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="301 "]::after {
background-image: url(http://farm8.staticflickr.com/7022/6519540231_73756bac6c_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="302 "]::after {
background-image: url(http://farm8.staticflickr.com/7019/6508023829_3d44c4ac16_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="303 "]::after {
background-image: url(http://farm8.staticflickr.com/7007/6513125065_ef7cfa6256_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="304 "]::after {
background-image: url(http://farm8.staticflickr.com/7166/6540551929_eeee6bf3dd_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="305 "]::after {
background-image: url(http://farm8.staticflickr.com/7002/6540365403_01e93b44a3_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="307 "]::after {
background-image: url(http://farm8.staticflickr.com/7161/6513001269_edff1f0079_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="400 "]::after {
background-image: url(http://farm8.staticflickr.com/7022/6540669737_7527a5de13_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="401 "]::after {
background-image: url(http://farm8.staticflickr.com/7148/6508023065_8dae48a30b_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="402 "]::after {
background-image: url(http://farm8.staticflickr.com/7165/6513001321_8ecc400e0a_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="403 "]::after {
background-image: url(http://farm8.staticflickr.com/7173/6508023617_f3ffc34e17_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="404 "]::after {
background-image: url(http://farm8.staticflickr.com/7172/6508022985_b22200ced0_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="405 "]::after {
background-image: url(http://farm8.staticflickr.com/7175/6508023523_996188af86_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="406 "]::after {
background-image: url(http://farm8.staticflickr.com/7143/6508023119_b681209a58_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="408 "]::after {
background-image: url(http://farm8.staticflickr.com/7018/6508023179_bab3eebce8_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="409 "]::after {
background-image: url(http://farm8.staticflickr.com/7010/6508023259_b1c6f5a353_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="410 "]::after {
background-image: url(http://farm8.staticflickr.com/7145/6514567755_1c5b7f575f_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="411 "]::after {
background-image: url(http://farm8.staticflickr.com/7159/6540724141_7d78eae062_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="413 "]::after {
background-image: url(http://farm8.staticflickr.com/7161/6508023747_1d60889626_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="414 "]::after {
background-image: url(http://farm8.staticflickr.com/7152/6508023351_6732ed2f58_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="416 "]::after {
background-image: url(http://farm8.staticflickr.com/7151/6513196851_10ef1d190e_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="417 "]::after {
background-image: url(http://farm8.staticflickr.com/7009/6508023679_cb3e88fa92_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="418 "]::after {
background-image: url(http://farm8.staticflickr.com/7006/6508102407_a4de65687b_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="422 "]::after {
background-image: url(http://farm8.staticflickr.com/7004/6514473085_3c996d9594_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="423 "]::after {
background-image: url(http://farm8.staticflickr.com/7150/6514510235_8c2ee4965e_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="424 "]::after {
background-image: url(http://farm8.staticflickr.com/7165/6514584423_a9b13d6b70_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="425 "]::after {
background-image: url(http://farm8.staticflickr.com/7013/6540586787_c7182a2bc1_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="426 "]::after {
background-image: url(http://farm8.staticflickr.com/7167/6509400771_33a1f59890_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="429 "]::after {
background-image: url(http://farm8.staticflickr.com/7152/6509400997_25bb1bb4fb_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="431 "]::after {
background-image: url(http://farm8.staticflickr.com/7144/6509400689_a67d026d0a_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="444 "]::after {
background-image: url(http://farm8.staticflickr.com/7152/6509400599_52ca022f98_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="450 "]::after {
background-image: url(http://farm8.staticflickr.com/7151/6513125123_dd582f5c2a_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="500 "]::after {
background-image: url(http://farm8.staticflickr.com/7001/6509400855_aaaf915871_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="502 "]::after {
background-image: url(http://farm8.staticflickr.com/7158/6508023429_735b433a36_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="503 "]::after {
background-image: url(http://farm8.staticflickr.com/7157/6540643319_7945715c3a_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="506 "]::after {
background-image: url(http://farm8.staticflickr.com/7155/6540643279_d5126cd8f6_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="507 "]::after {
background-image: url(http://farm8.staticflickr.com/7160/6509400503_648dc8a2e5_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="508 "]::after {
background-image: url(http://farm8.staticflickr.com/7025/6509400445_5fd9c7a9c3_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="509 "]::after {
background-image: url(http://farm8.staticflickr.com/7154/6540399865_7bb98e69d2_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="599 "]::after {
background-image: url(http://farm8.staticflickr.com/7033/6509400929_57ec73af05_n.jpg) !important;
}
#-webkit-web-inspector .status-column [title^="206 "]::after,
#-webkit-web-inspector .status-column [title^="300 "]::after,
#-webkit-web-inspector .status-column [title^="304 "]::after,
#-webkit-web-inspector .status-column [title^="307 "]::after,
#-webkit-web-inspector .status-column [title^="414 "]::after,
#-webkit-web-inspector .status-column [title^="422 "]::after,
#-webkit-web-inspector .status-column [title^="509 "]::after {
bottom: -330px !important;
height: 320px !important;
width: 256px !important;
}
#-webkit-web-inspector .status-column [title="(pending)"]::after {
background-image: url('http://25.media.tumblr.com/tumblr_l7rdesD07L1qz4s4wo1_400.gif') !important;
border: 1px solid #000 !important;
bottom: -229px !important;
height: 219px !important;
width: 293px !important;
}
#-webkit-web-inspector .status-column [title="Success"]::after {
background-image: url('http://mlkshk.com/r/P44J') !important;
border: 1px solid #000 !important;
bottom: -260px !important;
height: 250px !important;
width: 300px !important;
}
#-webkit-web-inspector .status-column [title="(canceled)"]::after {
background-image: url('http://gifs.gifbin.com/052009/1242926205_keyboard_cat.gif') !important;
border: 1px solid #000 !important;
bottom: -243px !important;
height: 233px !important;
width: 308px !important;
}
#-webkit-web-inspector .status-column [title="(failed)"]::after {
background-image: url('http://1.bp.blogspot.com/_JLkdStmKIyk/TTmkVTqKYzI/AAAAAAAAAWU/k6qt_Y7OpNk/s1600/gymnastics-fail-cat.gif') !important;
bottom: -295px !important;
height: 285px !important;
width: 440px !important;
}
#-webkit-web-inspector .status-column [title^="306 "]::after,
#-webkit-web-inspector .status-column [title^="306 "]::before,
#-webkit-web-inspector .status-column [title^="407 "]::after,
#-webkit-web-inspector .status-column [title^="407 "]::before,
#-webkit-web-inspector .status-column [title^="412 "]::after,
#-webkit-web-inspector .status-column [title^="412 "]::before,
#-webkit-web-inspector .status-column [title^="415 "]::after,
#-webkit-web-inspector .status-column [title^="415 "]::before,
#-webkit-web-inspector .status-column [title^="420 "]::after,
#-webkit-web-inspector .status-column [title^="420 "]::before,
#-webkit-web-inspector .status-column [title^="501 "]::after,
#-webkit-web-inspector .status-column [title^="501 "]::before,
#-webkit-web-inspector .status-column [title^="504 "]::after,
#-webkit-web-inspector .status-column [title^="504 "]::before,
#-webkit-web-inspector .status-column [title^="505 "]::after,
#-webkit-web-inspector .status-column [title^="505 "]::before {
display: none !important;
}
@davidl
Copy link
Author

davidl commented Mar 27, 2013

Also available in rapper form: https://gist.github.com/davidl/5251362

@davidl
Copy link
Author

davidl commented Mar 27, 2013

Custom.css is located:

  • Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • PC: C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
  • Ubuntu (Chromium): ~/.config/chromium/Default/User\ StyleSheets/Custom.css

@davidl
Copy link
Author

davidl commented Mar 28, 2013

This file is generated from LESS: https://gist.github.com/davidl/5262611

@davidl
Copy link
Author

davidl commented Mar 28, 2013

@paulirish
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment