Inspecting Response Headers in the browser

I needed to inspect the headers being sent to various browsers today. Specifically we wanted to find out how Yahoo was able to deliver a "fresh" CAPTCHA image when you used the browser back button to return to the page with the CAPTCHA image on it.

We observed that this happened even with Javascript disabled, and so came to the conclusion that it must be something in the response headers.

In Firefox (v1.5+) there is a really useful extension that I have mentioned before (the Web Developer Toolbar extension) which can show the headers using Tools -> Web Developer -> Information -> View Response Headers.

When using Internet Explorer a solution is to use the IE HTTP Headers plugin (for IE v5.0+) which is available at http://www.blunck.se

For those interested, the solution to the problem was to add the following headers to the response:

static void doNotCacheResponse(HttpServletResponse response) {
response.setHeader('Pragma', 'no-cache')
response.setHeader('Cache-Control', 'no-cache,no-store')
response.setHeader('Expires', '-1')
}

We've tested that this works to force a re-request using Firefox 2, Firefox 3, IE6, IE7, Chrome, Safari 3 and Opera 9 - which is nice!

Debugging with Internet Explorer

Debugging with IE isn't something that you can really do without installing some sort of 3rd-party software.

To debug JavaScript, I've always used Visual Interdev, and for CSS, the IE Developer Toolbar. The problem with Visual Interdev is that its cost puts people off.

There are some good free tools available, however. I haven't used these before, but after re-installing windows, I thought I'd give them a go:

DebugBar is a plugin for IE that gives you a DOM inspector, an HTTP inspector, a JavaScript inspector and console, validation tools, and a whole load more. It's pretty much a "Firebug for IE" (although sadly, without a JavaScript debugger) :

http://www.debugbar.com/

Web Development Helper is a plugin for IE that gives you some useful tools (DOM inspector, logging HTTP requests, script error call stacks) :

http://projects.nikhilk.net/WebDevHelper/Default.aspx

Visual Web Developer 2008 is an application that lets you design and build web pages. It also comes with a JavaScript debugger :

http://www.microsoft.com/express/vwd/

There's a good article here about how to debug JavaScript using it :

http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/


I'll update this post after I've used them for a while, although my first impressions are that DebugBar is probably the way to go.