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 newMy article in .NET / update to Dropdown
Remember I blogged a few months back that I'd been approached to write for .NET? Well my article is in the latest (September) issue, so perhaps you've seen it.
It's a beginner's guide to tackling regular expressions - one of the most avoided and feared areas of programming for elementary-intermediate-level developers.
There's an annoying typo; the * modifier, of course, matches zero or more characters, not one or more. D'oh. I had meant the + modifier, which does match one or more characters.
In other news, following a recent update to my jQuery Dropdown script (which allowed it to be used as a form field, not just as a navigational tool), there's been another update.
In the comments on the script page, Michael Eaton requested that it be possible to include icons in the 'options'. This is now possible!
Head over here to download, get usage info or view a demo.
post a comment
