Although I’ve switched to Google Chrome as my primary web browser, I still switch over Firefox every once in a while for one reason or another.
With the recent release of Firefox 3.6 you might find some of your favorite add-ons no longer in working because they haven’t yet been updated to support the new version number.
You can easily get around this limitation by installing the Nightly Tester Tools Firefox Add-on which allows you to override the maximum version the add-ons say they can support.
Keep in mind, even though you are forcing your add-ons to run with your current browser version it doesn’t mean they will work, but usually I find that they do work just fine.
I’m a sucker for running the latest and greatest build of Firefox so the Nightly Tester Tools Firefox Add-on is a must for me.
I tend to use the Portable Versions of Firefox so they are sandboxed in their own little folders. That way I can also have several versions on my box for testing.
As a total side-note, but related point I also like these following Portable Applications that you can find from the same site…
In addition to this post being part in a series of Firefox Extension screencasts, it is actually also the 3rd part of an old series looking through various JavaScript Unit Testing frameworks…
The following short screencast will give a quick review of the FireUnit Firefox Firebug Add-on and also the QUnit Unit Testing framework for jQuery. In case you don’t want to watch the 4 minute screencast I thought I would go ahead and flush out the rest of this blog post with code, screenshots, and commentary.
As a review, to exercise our Unit Testing frameworks we have been using a simple Pig Latin function as our testing subject.
This code is not optimal and it will be refactored in a future post. So, please focus on the Unit Testing and not the actual Pig Latin function :)
So, here is the Pig Latin converter function we will be using for our tests…
function EnglishToPigLatin() {
this.CONSONANTS = 'bcdfghjklmnpqrstvwxyz';
this.VOWELS = 'aeiou';
this.Translate = function(english, splitType) {
var translated = '';
var words = english.split(/\s+/);
for (var i = 0; i < words.length; ++i) {
translated += this.TranslateWord(words[i]);
if (i+1 < words.length) translated += ' ';
}
return translated;
}
this.TranslateWord = function(english) {
/*const*/ var SYLLABLE = 'ay';
var pigLatin = '';
if (english != null && english.length > 0 &&
(this.VOWELS.indexOf(english[0].toLowerCase()) > -1 || this.CONSONANTS.indexOf(english[0].toLowerCase()) > -1 )) {
if (this.VOWELS.indexOf(english[0].toLowerCase()) > -1) {
pigLatin = english + SYLLABLE;
} else {
var preConsonants = '';
for (var i = 0; i < english.length; ++i) {
if (this.CONSONANTS.indexOf(english[i].toLowerCase()) > -1) {
preConsonants += english[i];
if (preConsonants.toLowerCase() == 'q' && i+1 < english.length && english[i+1].toLowerCase() == 'u') {
preConsonants += 'u';
i += 2;
break;
}
} else {
break;
}
}
pigLatin = english.substring(i) + preConsonants + SYLLABLE;
}
}
return pigLatin;
}
}
First we are going to write a simple set of 20 FireUnit tests that can be ran inside Firefox’s Firebug using the FireUnit Add-on.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="PigLatinBad.js"></script>
<script type="text/javascript">
var englishToPigLatin = new EnglishToPigLatin();
//Invalid Arguments
fireunit.compare(englishToPigLatin.TranslateWord(null), '', 'Passing Null Should Return Blank');
fireunit.compare(englishToPigLatin.TranslateWord(''), '', 'Passing Blank Should Return Blank');
fireunit.compare(englishToPigLatin.TranslateWord('1234567890'), '', 'Passing 1234567890 Should Return Blank');
fireunit.compare(englishToPigLatin.TranslateWord('~!@#$%^&*()_+'), '', 'Passing ~!@#$%^&*()_+ Should Return Blank');
//Consonant Words
fireunit.compare(englishToPigLatin.TranslateWord('beast'), 'eastbay', 'Passing Beast Should Return Eastbay');
fireunit.compare(englishToPigLatin.TranslateWord('dough'), 'oughday', 'Passing Dough Should Return Oughday');
fireunit.compare(englishToPigLatin.TranslateWord('happy'), 'appyhay', 'Passing happy Should Return appyhay');
fireunit.compare(englishToPigLatin.TranslateWord('question'), 'estionquay', 'Passing question Should Return estionquay');
fireunit.compare(englishToPigLatin.TranslateWord('star'), 'arstay', 'Passing star Should Return arstay');
fireunit.compare(englishToPigLatin.TranslateWord('three'), 'eethray', 'Passing three Should Return eethray');
//Vowel Words
fireunit.compare(englishToPigLatin.TranslateWord('apple'), 'appleay', 'apple Should Return appleay');
fireunit.compare(englishToPigLatin.TranslateWord('elijah'), 'elijahay', 'elijah Should Return elijahay');
fireunit.compare(englishToPigLatin.TranslateWord('igloo'), 'iglooay', 'igloo Should Return iglooay');
fireunit.compare(englishToPigLatin.TranslateWord('octopus'), 'octopusay', 'octopus Should Return octopusay');
fireunit.compare(englishToPigLatin.TranslateWord('umbrella'), 'umbrellaay', 'umbrella Should Return umbrellaay');
//Sentences
fireunit.compare(englishToPigLatin.Translate('hello'), 'ellohay', "Passing 'hello' Should Return 'elloh'");
fireunit.compare(englishToPigLatin.Translate('hello world'), 'ellohay orldway', "Passing 'hello world' Should Return 'elloh orldw'");
fireunit.compare(englishToPigLatin.Translate('hello world!'), 'ellohay orld!way', "Passing 'hello world!' Should Return 'ellow orld!w'");
fireunit.compare(englishToPigLatin.Translate('Hello World'), 'elloHay orldWay', "Passing 'Hello World' Should Return 'elloH orldW'");
fireunit.compare(englishToPigLatin.Translate('Hello World!'), 'elloHay orld!Way', "Passing 'Hello World!' Should Return 'elloH orld!W'");
// Wait for asynchronous operation.
setTimeout(function() {
// Finish test
fireunit.testDone();
}, 1000);
</script>
</head>
<body />
</html>
If we run the webpage inside of Firefox, we don’t see anything from the browser window, but if we open Firebug and click the “Tests” tab, then we can see the output of the 20 tests.
One of the other nice features of FireUnit is that its compare assertion will actually show the difference of the two values instead of just saying they are the same or not. Here is an example of the output from a failing compare…
The output is pretty impressive, but what if you already have a lot of existing QUnit Unit Tests or what if you would also like to have some sort of User Interface to your test page. Well, the nice thing about FireUnit is that you can integrate it into QUnit! By adding several lines of code we can have the output of our QUnit tests render to the FireUnit Add-on as well!
The following is a set of QUnit Unit Tests with 4 lines of code near the end that registers the output with FireUnit as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>English To Pig Latin QUnit Tests</title>
<link rel="stylesheet" href="http://jqueryjs.googlecode.com/svn/trunk/qunit/testsuite.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/qunit/testrunner.js"></script>
<script type="text/javascript" src="PigLatinBad.js"></script>
<script type="text/javascript">
$(document).ready(function() {
module("Pig Latin");
var englishToPigLatin = new EnglishToPigLatin();
test('Invalid Arguments', function() {
equals(englishToPigLatin.TranslateWord(null), '', 'Passing Null Should Return Blank');
equals(englishToPigLatin.TranslateWord(''), '', 'Passing Blank Should Return Blank');
equals(englishToPigLatin.TranslateWord('1234567890'), '', 'Passing 1234567890 Should Return Blank');
equals(englishToPigLatin.TranslateWord('~!@#$%^&*()_+'), '', 'Passing ~!@#$%^&*()_+ Should Return Blank');
});
test('Consonant Words', function() {
equals(englishToPigLatin.TranslateWord('beast'), 'eastbay', 'Passing Beast Should Return Eastbay');
equals(englishToPigLatin.TranslateWord('dough'), 'oughday', 'Passing Dough Should Return Oughday');
equals(englishToPigLatin.TranslateWord('happy'), 'appyhay', 'Passing happy Should Return appyhay');
equals(englishToPigLatin.TranslateWord('question'), 'estionquay', 'Passing question Should Return estionquay');
equals(englishToPigLatin.TranslateWord('star'), 'arstay', 'Passing star Should Return arstay');
equals(englishToPigLatin.TranslateWord('three'), 'eethray', 'Passing three Should Return eethray');
});
test('Vowel Words', function() {
equals(englishToPigLatin.TranslateWord('apple'), 'appleay', 'apple Should Return appleay');
equals(englishToPigLatin.TranslateWord('elijah'), 'elijahay', 'elijah Should Return elijahay');
equals(englishToPigLatin.TranslateWord('igloo'), 'iglooay', 'igloo Should Return iglooay');
equals(englishToPigLatin.TranslateWord('octopus'), 'octopusay', 'octopus Should Return octopusay');
equals(englishToPigLatin.TranslateWord('umbrella'), 'umbrellaay', 'umbrella Should Return umbrellaay');
});
test('Sentences', function() {
equals(englishToPigLatin.Translate('hello'), 'ellohay', "Passing 'hello' Should Return 'elloh'");
equals(englishToPigLatin.Translate('hello world'), 'ellohay orldway', "Passing 'hello world' Should Return 'elloh orldw'");
equals(englishToPigLatin.Translate('hello world!'), 'ellohay orld!way', "Passing 'hello world!' Should Return 'ellow orld!w'");
equals(englishToPigLatin.Translate('Hello World'), 'elloHay orldWay', "Passing 'Hello World' Should Return 'elloH orldW'");
equals(englishToPigLatin.Translate('Hello World!'), 'elloHay orld!Way', "Passing 'Hello World!' Should Return 'elloH orld!W'");
});
if (typeof fireunit === "object") {
QUnit.log = fireunit.ok;
QUnit.done = fireunit.testDone;
}
});
</script>
</head>
<body>
<h1>English To Pig Latin QUnit Tests</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<ol id="tests"></ol>
<div id="main"></div>
</body>
</html>
Now, not only do we have a User Interface on the webpage, but we also have the tests running in Firebug.
For more information about FireUnit you can check out a post by Jonn Resig and it’s Wiki on GitHub. And if you are interested in QUnit, there is a nice overview on the jQuery webiste.
For those of you that do ASP.NET or ASP.NET AJAX development, then the following Firebug Add-ons might be of interest to you.
FireAtlas is a tool that enables you to view the PageRequestManager events, trace WebService calls, inspect Partial Updates, and view any installed application components. You can actually try out some samples pages to exercise most of the functionality of this Add-on, but I will be viewing the twitter scheduler application TwtMstr (developed by @wbm) to demonstrate some of the features in my screencast.
FireCookie is another useful tool that allows you to view any cookies that are relevant for the current web page. This can be handy for an ASP.NET developer to inspect the .ASPXROLES, .ASPXAUTH, or ASP.NET_SessionId values that are common for most ASP.NET applications.
Yet again, I hope this was beneficial to you. If you enjoyed the presentation I would appreciate either a comment to this blog &| a tweet about it to share with others.
Also, if you have any suggestions that you have to help become a better presenter I would appreciate that as well. If you have a minute, please add a comment with your thoughts.
You will most likely be asked to speed up the performance of some web page whether it be your corporate, personal, or some other web page. There are so many things that can cause a web page to be perceived as slow that it is helpful to have a tool to give you a guideline of where to start.
Fortunately, there are two great tools for the Firebug Add-on for Firefox that do performance checking of any given web page. The tools we will be looking at in the following screencast are Google’s Page Speed and Yahoo’s YSlow Add-ons.
Yet again, I hope this was beneficial to you. If you enjoyed the presentation I would appreciate either a comment to this blog &| a tweet about it to share with others.
Also, if you have any suggestions that you have to help become a better presenter I would appreciate that as well. If you have a minute, please add a comment with your thoughts.
Today I decided to record another screencast, and I decided to dig into the FireQuery add-on for Firebug.
FireQuery adds extra functionality to the HTML tab and allows you to visually see embedded data elements and event handlers that were added via jQuery. Also, the familiar jQuerify Bookmarklet has been built into Firebug allowing you to inject jQuery into pages that didn’t have it installed previously. This enables you to play around with jQuery or extract information for a webpage that might not previously have jQuery installed.
Yet again, I hope this was beneficial to you. If you enjoyed the presentation I would appreciate either a comment to this blog &| a tweet about it to share with others.
Also, if you have any suggestions that you have to help become a better presenter I would appreciate that as well. If you have a minute, please add a comment with your thoughts.
For those of you who use Firefox, you should check out the Firebug 1.0 beta extension! I had used the old version for quite some time, but I was blown away with the great enhancments in the 1.0 beta version.
"I’ve been using Visual Studio’s JavaScript debugging most of the time, but with Firebug in this state I’ve been able to move most of my debugging – except for IE specific issues which are unfortunately quite common – into Firebug.
For those of you who use Firefox on multiple machines and you get tired of getting out of synch with your bookmarks, cookies, passwords, history, and tabs then Google has a solution for you...
