Matt Prokes

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #16

The firefox development environment will be the development environment leveraged by this book, so before we dig in, I would like to first show you around firefox first. I am sure that many readers are aware of firefox as an internet browser, but more recently it has also been adapted into a wonderful development environment. So lets fire it up, and take a look at a few of the features.

Neat! It looks the same as always, nothing to see here, its firefox as you remember it. So where is the development environment? Well, its not installed yet. See firefox has this nice little built in feature called add-ons.

The add-ons interface is a system which allows you to type in the type of thing that is needed, and it will contact the firefox website and find the appropriate extension for you! In this case we are trying to find the web developer toolbar. So to be clear, when you first get firefox the development environment doesn’t really come with it. You need to add extensions to firefox which allow it to become a development environment.

Some of the extensions that this book will be using are: Selenium, Web Developer Toolbar, Firebug, FireFTP, ColorZilla, and a few others here and there that will be mentioned throughout. We will have a tutorial on how to install things later on in the book. Anyway, when all these extensions are installed, firefox can look somthing like this if everything is enabled.

So what is all this stuff? Well lets start off with the web developer toolbar, some of the neat features of the tool allow things just as manipulation of page css (highly useful if you are laying things out). It also will also do cool things like capture the curent page source or css, allow you to inspect elements on the page, as well as provide various information on cookies, markup validation, and much more.

Next up is firebug, this tool has a awesome javascript debugger (by far the best in the industry). You may not know what it is now, but just take my word for it when I say its important. Firebug also has an excellent dom inspector, as well as a network inspector so you can see all the connections that firefox has made during the render of the page. It does also have a CSS editor, in someways it is more useful then the web developer toolbar css editor but in MANY ways it is inferior to the way the web developer toolbar css editor. I use firebug css when its appropriate for what I am doing.

Lets move on to selenium, selenium is cool because you can do automatic testing of your webapplications with it! Stuff like regression testing, and just UI testing in general becomes invaluable with selenium. The development environment is not shown in the previous screen (because it would take up the entire screen) but we will discuss it later.

FireFTP allows you to upload your webcontent to a FTP host on a server. Since FTP is the primary way of uploading content to webservers usually, I thought I would throw fireftp in there. It is also invaluable for inspecting FTP folder layout, as well as retaining ftp connections and working great with almost any kind of authentication that you throw at it.

Colorzilla is cool because rather then guessing what a particular color is on a webpage you can just up colorzilla dropper to tell you instead! Pretty neat huh, though I should note that it is not always perfect with images, but it is not the fault of firebug, rather the fact that some raster colors are a combination of other colors, rather then a true color. If you really need to be sure, ask the designer to write down the actual colors that they used in their mockup.

Thats the roundup of firefox browser core extensions (ones we will be using frequently), I will probably ask you to install a few others but I won’t be focusing on them as much as the extensions mentioned above. Anyway we are not done entirely yet. Lets move on to bookmarklets, you can think of these little guys as javascript applications which execute on what ever page you are looking at. Usually in the form of a bookmark, bookmarklets are very easy to install and have lots of promise.

A bookmarklet in particular we will be using frequently is the javasctipt shell. The cool thing about the JS Shell, is that it will let you execute arbitrary commands on what ever page you are looking at. It has javascript based code completion, it allows you to write full multi-line javascript applications, and generally prevents the need of switching back and forth between environments just to do some tests.

Tags: web developer 1.3

This entry was posted on Friday, April 24th, 2009 at and is filed under Environments, firefox, web development. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.