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
IETester: my new best friend for handling my worst enemy
I found a great tool out in the depths of the interweb, and I thought that I'd do a quick-ish post on it so that I can share the happiness with other people. The tool is called IETester, and it is brilliant. It seems to be a mdi container that is hooked into the api's of IE5.5, 6, 7, and 8 beta 1. This allows you to crack open a tab using each rendering engine and view your websites the way they would look in that browser.
This (above) is a screen shot of the program with the about pop up showing as well as several tabs open (all at nordictrack.com)
NordicTrack in IE 5.5 (above)
NordicTrack in IE 6 (above)
NordicTrack in IE7 (above)
NordicTrack in IE8 (above)
As you can see from the pictures, each release of IE handled the css styling and the page layout a little bit differently. It's almost fun to watch IE change from its quirky youth to an almost standards compliant browser (yes almost is a stretch isn't it).
BUGS:
Yeah you knew there'd be some, here's what I found, and what is posted on the developer's website.
- I almost went into epileptic shock while using it. Lots of screen flickering.
- It crashed on me the first time I opened it, not sure why.
- If you resize the screen, content may disapear.
- Flash may not work in the IE6 rendering engine (note: it did work for me at freemotion).
- Previous/Next buttons may not work.
- Focus doesn't work properly.
- Java applets esplode.
- Javascript loading may have problems... (may be the hidden cause of the screen flickering)
Print This Post
httpSpy for Firefox!
This morning I stumbled onto a real treat for those developers that are using Firefox. Backstory: A while ago Ninja had suggested that we use a little program called "httpSpy" for debuging the header information that was being served/requested by our server/browser (very useful to find obscured links, what items are really being loaded on a page, and what connections are being secured). The problem is that while the program is awesome (and extremely hard to find as there are 3 or 4 variants on a google search that are all different), it only works with IE. Naturally, this is undoubtedly causing a shudder and a distinct feeling of betrayal to surge up from the depths of your soul 
. The time of IE only debugging is at an end... Introducing "Live HTTP headers", a fantastic little tool that pops up in a different window that will show you your requests and let you resend them ( with some modifications) and logs everything being passed to and from the server/browser. While I haven't really played with it for more than a few minutes, it seems like a good tool, and I'd recommend throwing it in the arsenal.
Live HTTP headers - can be downloaded here (link goes to the mozilla add-on site, as I did not grab the xpi file). It also works with FFox3RC1 
.
Print This Post
FFox broken image plug in
Update: Brett/Burt has had a problem with this working on his box, so it may not be compatible with some plugins/add-ons.
One of the worst things that I run into is the prettifying that FireFox routinely does to webpages. When you surf, it's a great idea, who likes to see broken image files? But when you are developing it gets in the way and can take an otherwise smashing page, and make it look... uh... well smashed. To get around this issue you used to have to install "greasemonkey" and then grab a user-script in order to force firefox into showing you broken image files. Well luckily those days are over as the other of the original script finally made it a standalone plug in. You can grab the plug in here.
I decided to do a little testing between FF2 (with the plug-in), FF3b5 (w/o plug-in), and a control IE7 (yes using IE7 as a control actually made me cringe, and may have given me a rash). I then created a generic html page with 6 broken img links in it. Here's what we have:
Now as you can see, I have some invalid html (missing alt tag), a couple alt tags with spaces, a few with the alt tags as spaces, you know some ugly things you should never do, and yet we find all the time. Render Time!! Let's start off with our control.
Here's how FF3b5(w/o plugin) rendered this mess:
Notice that it shows up with alt tags showing, and at first glance it looks like it picked up 4 of the 6 images. Upon closer inspection though, you'll see it only saw 3 and prettified the page by removing the rest. Although I gotta say, seeing the alt text looking so plain really throws me off when I'm looking for where an image should be.
And lastly a render with FF2(with plug-in)
We can see exactly what the plug in did. It doesn't show the alt text now, but you at least know that there should be *something* showing up on the page. When it's all said and done, I'd say that this is worth the install, and quite a nice plug in.
Print This Post