Fiddler - when debugging needs to go nuclear
Ever met Fiddler? It's a fantastic debugging tool, useful anytime you need to front-end debug on a server you don't currently have write access to.
Sure, you have Firebug and Dragonfly, or whatever your browser of choice calls its debug kit. But in those you can't edit linked files and refresh the runtime environment with those changes. The minute you reload the page, the files are reset.
(Sidenote: Opera has a cool feature whereby, when viewing the source code, you can make changes then 'apply' them, reloading the page with your changes.)
Fiddler acts like a proxy server. It hijacks HTTP requests from your browser (though not all browsers - Opera is unfortunately not supported, it seems) and allows you to server up hacked versions of those files rather than versions fresh from the server.
Its interface is far from intuitive, so I thought I'd post a demo. I hope you find it useful.
1) Download Fiddler
Download and install Fiddler. If it prompts you after installation to download or upgrade the .NET framework from Microsoft, I found this wasn't necessary.
2) Set things up
Open up Fiddler. First off, you'll want to disable caching. Go to rules > performance and select Disable Caching. Next up, to tell Fiddler to hijack your HTTP requests henceforth, on the right go to the AutoResponder tab. Check the Enable automatic responses and Unmatched requests passthrough checkboxes.
3) Start logging
Fiddler will now log all HTTP requests that are made from supported browsers. Try it; go to a page in Firefox, then check back to Fiddler and you'll see all the requests that came through, along with their response codes, MIME types etc.
Tip: to quickly find a file in the list, press ALT+Q (or just focus into the black text field under the list of files) and type ? followed by the partial name of a file to highlight.
4) Here's the clever bit
OK, so we've got Fiddler logging requests. The next step is to get it to hijack particular requests and instead of returning content from the server, return content from Fiddler that we're going to hack around with.
Drag and drop a file from the list into the vacant area underneath the AutoResponder tab and it will appear as a row with a checkbox to its left. As long as this is checked, Fiddler will hijack requests to this file and send out local versions of it rather than server versions.
Right-click on the file and select Edit Response. A pop-up appears; hit the TextView tab and you'll see the file's contents. Tweak it as you will, hit save, close the dialog (note: it will complain you have unsaved changes, even if you saved) and then refresh the browser.
You'll see your tweaks!
There's faaaaaaaaaaar more to Fiddler than that, as you can probably tell from the interface. But for a front-end developer, the above functionality alone has the potential to be a god-send. Enjoy.
4 comments | post new
