TYPO free


fighting for TYPO free code

Chrome HTTP Header Spy released

22 Jun 2013

A while ago I was debugging a Varnish vcl. It's usefull to inspect the headers to know if the request to the server resulted in a Varnish HIT or a PASS. At first I used firebug to inspect the response headers. This was certainly not optimal because at one extra clicks was needed to see the response headers. You need to fold down the headers in the Net panel in FireBug to see the headers. Live HTTP Headers may have been a better choice here . . .

After the job was done I discovered that there is a that lets you see several headers right in the FireFox addon bar: Header Spy. It's a usefull tool. So nice to be able to see one or more headers right afte page load without extra clicking!

Now I also wanted this functionality for Chrome. But there was nothing around that provided this functionality. Yes, there is a HTTP Headers extension. It's close, but not good enough. You need to click a toolbar button to see the headers. It sends an extra request to fetch the headers. Not even a HEAD request mind you, a whole extra GET request, just to fetch the headers. I had seen tools like Ghostery render a nice info bubble on top of the loaded content and that's how I wanted my headers to be presented too.

So I embarked on a Chrome extension building journey. Along the way I learnt a lot of neat things about Chrome internals, plain JavaScript, CSS3, beatiful unicode characters and more. The result is the HTTP Spy extension for Chrome. I set out to accomplish a simple task, but more features kept on piling up on the TODO list.

  • Headers also available in the browser action popup
  • Follow the full redirect path
  • Beautiful status indication icons
  • Inspect request headers and cookies too
  • Micro mode shows just the chosen response headers
  • Position in one of the four corners of the window
  • Set the display time of the headers
  • The display timer pauses when mouse is over the box
  • Box can be closed by clicking the X
  • Easy single-click highlighting of the headers
  • Choose between a light and a dark colorscheme

If you have the need to inspect headers in Chrome, go and give it a try. And even if you don't inspect headers on a regular basis, set up HTTP Spy in the unobtrusive micro mode and be amazed at how many redirects it takes to reach certain pages. I have seen up to four before reaching the final destination.


I am in the process of porting it to FireFox. Stay tuned . . .



add comment
Commenting is closed for this item