A few overlooked Firefox add-ons
In my efforts to try to post more I have decided to share some tips about a few of the other Firefox add-ons that I find useful.
Today we will be covering:
- YSlow
- Live HTTP Headers
- Tamper Data
- XPather
YSlow is a firebug plug-in that has been created by the Yahoo Developer Network. It's a relatively simple tool that shows up in your status bar (right next to firebug). It has a little speedometer and "YSlow" next to it. By clicking on it, you activate it's function, which is to run a short series of tests on the site you are looking or working on. It then loads how long it took to load the page, the file-size, and the grade of the site. It then shows a "report card" on the left of the tool. The report card is broken down into performance areas. clicking on it will let you know what did wrong and give you a link to the Yahoo Developer Network guide to cleaning and speeding up your website. I personally used this yesterday and sped the WebTop up from loading in .5 seconds to .3 second (with and empty cache - .2 with a full one). I also sprited the site and cut off 80k worth of fat. I wouldn't use this tool everyday, but it is nice to have around when you really want to see how your site performs (there are a ton of other features bundled in this, but for the sake of the post I'll let you read it at the official YSlow website).
Live HTTP Headers is a great little app for firefox. Similar in nature to both Fiddler2 and httpspy for IE, this allows you to see exactly what is being passed through your browser as well as make small modifications to them and resend the request (remember kids, let's not be malicious). If you don't really know what fiddler or httpspy is, you probably won't understand this tool... but I used it to find the real location of a video file I wanted to download that was being obscured by a flash player, so it can be helpful. Oh and I used it to find out why a page was throwing errors about content loading from both secure and non-secure links (turned out to be a tracking js file... dirty tracking js).
This of course brings us to Tamper Data. This is actually a "ninja approved" tool (meaning it came from ninja, and he uses it). This is perfect for checking values in a form submit in say a shopping cart. We used it to compare the values being sent from a 'live' cart, and our 'dev' cart. It came in very handy when testing the new HealthRider sight and enabled us to find that part of the cart was being double-html-encoded. Yep we could see that the cart was converting our string into html code (you know like a 'space' into a' %20'), and then encoding that encode again. Very ugly stuff. So if you need to see what a form is really sending and you don't want to skim through your headers etc. This is a great tool to see whats there. Oh I almost forgot, you can catch a form during submit and change the data on it on-the-fly. So we found the bad encode, switched it with a single-encoded string and viola! it worked.
The last tool XPather is not something that I think most of us here would use. However since jQuery has filters that use XPaths, this is a very helpful too to write some slimmed down jQuery-alized javascript code. This add-on allows you to generate and find XPaths in a document. If you're a Firefox greasemonkey script writer, this will also come in very handy.
If anyone else has some great tools or add-ons that they'd like to share, throw them in the comments.
Print This Post