blogZero - Extensions

Firefox Power Tools For Web Developers: FireBug

dwclifton@gmail.com (Douglas Clifton) — Sat, 25 Oct 2008 03:10:00 -0400

Joe Hewitt may be a lesser known member of the original three Firefox cast, but among DOM and JavaScript developers, his work is legendary. In a later Power Tools installment, I will cover in more detail the DOM Inspector, for which he is perhaps better known. At least until recently. This article focuses on FireBug, which Joe has been working on continuously of late (among other endeavors) and what he ultimately considers to be a DOM Inspector replacement.

The latest version of FireBug was released September 12th, 2008.

What in the hell is a FireBug?

I won't get into entomology—which ironically in Greek means "that which is cut in pieces"—although there really is such a thing as a firebug. The extension, on the other hand, is designed to make the Web developer's job a whole lot more productive. With it you can inspect and debug your markup, stylesheets, JavaScript, and even keep an eye on asynchronous XHR object calls back to your server.

Unlike the DOM Inspector, FireBug normally runs in a horizontal console (although you can open it in a separate browser window) underneath the document's rendered view. A statusbar icon indicates if there are any problems with the current page, which can indicate any number of conditions including errors, warnings and results from:

JavaScript
CSS
XML
XMLHttpRequest (aka XHR or Ajax)
Chrome

and even problems encountered from remote domains—which can be the source of massive numbers of errors (I'll leave it to Joe to name names). Thankfully you can suppress these messages, or disable FireBug entirely for certain domains, through the options menu.

Almost every object in the FireBug interface is actually a hyperlink. Elements in the source view can be expanded or collapsed and your current XPath is displayed as you explore the document structure. Like the browser itself, views are toggled through a tabbed interface, which include Console, HTML, CSS, Script, DOM, and Net. Each tab has one or more sub-functions associated with that feature.

By using FireBug, you will quickly learn just how much is going on behind the scenes of even the simplest Web page.

Power Tools

console.log()

Forget about using alert() to test or debug your scripts. By adding console object logging to your code you can pinpoint exactly what is going on, and even restrict messages according to different levels of severity including: informative, debug, warnings, or errors.

The console object also allows you to make assertions to more deeply test your code as well as performing stack traces, time sections of code, and log the number of times a function is called and has been executed.

All of the console logging methods can format strings using patterns similar to the C stdio printf() family of functions.

Command Line Functions

For command line junkies like me, console mode gives you access to a wealth of query and history/editing features you're probably already familiar with. Even more powerful are the following predefined shorthand functions:

$("id") - A shortcut for document.getElementById().
$$("css") - Returns an array of elements that match a CSS selector.
$x("xpath") - Returns an array of elements that match an XPath selector.
$0 - Variable containing the most recently inspected object.
$1 - Variable containing the next most recently inspected object.
$n(N) - Returns the Nth most recently inspected object.
inspect(object) - Displays an object in the DOM Inspector.
dir(object) - Returns an array of property/method names on an object (Python anyone?)
clear() - Clears the console.

>>> inspect(document)

is a good place to get started.

CSS Quick Search

While in Inspect mode, you can use the quick search box to locate any element by entering a CSS selector. FireBug will display all matching elements in the console view, which you can then expand to view more details or switch tabs to explore the stylesheet that defines the rules for each element, the computed propeties and layout/display attributes, JavaScript events that are attached to the element, and even the gory details of DOM for the selected item.

You can also use quick search to match JavaScript events.

In the future, Joe plans on adding XPath search as well as plain text. For those in a hurry, you can try the getElementsBySelector() JavaScript function, which uses the Firefox XPath API to translate CSS selectors to XPath making them a lot faster than searching the DOM directly.

FireBug 1.2

Some of this material is a bit dated. For the latest on FireBug, visit the new Get FireBug Web site and in particular the "Learn more" feature links on the home page and the documentation section.

Adding Favicons to your Site Info Bookmarks Toolbar Folder

dwclifton@gmail.com (Douglas Clifton) — Tue, 28 Mar 2006 21:47:25 -0500

If you want to get really fancy with your Site Info Bookmarks Toolbar Folder, you can add favicons to each link. I happen to think this not only improves the visual appeal of the list, it's also a mnemonic aid making it that much easier to pick out the one you're after.

To get started you'll first need to install the Favicon Picker Firefox extension (for Firefox versions prior to 1.5, go here). Since you'll need to have local copies of the icons in order to install them, you'll want a quick way to grab them from each site. I used my Fetch Favicon script to extract them from each URL (you should notice this tool is now on the list of Site Info links, more on that in a sec). Once you fetch the icon, simply drag it out of the browser window and drop it onto your desktop.

In some cases the sites either had no icon, or I had a better one to work with. For more help on creating icons, visit Favicon Tools. If there is enough interest, I may provide a zip file with all the icons in it, or add them to the permanent (and growing) list of Site Info Bookmarks. I'm also investigating a way to save a backup of the Site Info folder, icons and all, and providing the archive to my visitors so they can simply install the whole shebang locally without having to go through all of this trouble.

Until then, the easiest way to add favicons to the list is to save the images temporarily to your desktop and then open the Site Info folder and right click on each corresponding link. From the context menu select "Properties" and after the dialog box opens you should notice a new control group labeled "Icon." Press the "Browse..." button to locate the icon file on your desktop, then click on it to select the icon and return to the Properties dialog. Once you're satisfied you have the right one, click the "OK" button to save. When you're done with all of them, you should have a fancy new list similar to the one on the right.

Extend Firefox Winners

dwclifton@gmail.com (Douglas Clifton) — Sat, 04 Mar 2006 16:50:10 -0500

Winners of the Extend Firefox contest have been announced. The three winning extensions in the Grand Prize category are:

Best New Extension Overall: Reveal — Allows you to see thumbnails of pages in your session history and quickly find the page you want.
Best Upgraded Extension: Web Developer — An essential extension for any Web developer/designer as it provides a raft of incredibly useful features all under one roof.
Best Use of New Firefox 1.5 Features: Firefox Showcase — Locate and select any open browser window in Firefox.

In addition, eight more Best in Class winners have been awarded prizes for New and Upgraded extensions in these categories:

Most Innovative
Most Useful
Best User Experience
Best Integration with a Web Service

Grand prize winners receive an Alienware Aurora 7500 Firefox Edition PC. Best in Class winners receive an Apple iPod Nano and a $250 Gift Certificate from O'Reilly. All winners get Firefox 1.5 Prize Packs which include a t-shirt, cap, and laptop bag.

If you were thinking the only reward for developing open-source software is that warm, fuzzy feeling, have a look at that Alienware PC. Then maybe it will be time to dust off your JavaScript, XUL and RDF skills and get to work on that killer new extension.

Metroblogging Meets Performancing

dwclifton@gmail.com (Douglas Clifton) — Thu, 09 Feb 2006 19:36:00 -0500

+ For my inaugural DC Metroblogging post, I've written an article on installing and using the Performancing blog editor Firefox extension. Which is awesome—Jed Brown is the man.

Visit Performancing for Firefox.

SpellBound Development Version

dwclifton@gmail.com (Douglas Clifton) — Thu, 09 Feb 2006 14:37:00 -0500

When I posted earlier about the Firefox 1.5.0.1 update I complained about wanting to wait for a SpellBound update before installing the upgrade. For various reasons I decided to go ahead and upgrade my browser.

But I quickly found I was missing spell checking too much so I started to investigate a solution. Like all extensions, there are two values in the RDF install resource script that tells Firefox which browser version(s) the extension is designed for. This RDF is basically a list of application metadata and is known as the Install Manifest. Under the <em:targetApplication> element the extension author will set the min and max versions supported. Sometimes all that is necessary to get a disabled extension to work is to modify the max value to match your browser and reinstall the extension. This especially true for minor version updates like 1.5 to 1.5.0.1.

However, it can be a real headache to track down the install.rdf manifest in your Firefox extensions directory, edit the file, and reinstall. So here's one solution that not only worked for SpellBound (the current version available on SourceForge and the Extensions Mirror is 0.7.3), it also worked for the (English) dictionary I had installed, and a few other extensions that were disabled. Start by installing the Nightly Tester Tools extension (make sure you grab the latest version, as of this writing it was 0.7.9.11). Afterwards you will find that your Tools->Extensions dialog has a new button "Make all compatible" next to the "Find Updates" button. Now click on the Make all compatible button and restart Firefox. Like magic, SpellBound is working again.

Now these instructions come with a caveat. Many of the features in Nightly Tester Tools are experimental and there is no guarantee that your extensions will actually function with the newer version of Firefox once you upgrade. Always search for and install upgrades from the author first if they are available. And here's another tip for you, if you find all this removing, installing and upgrading of extensions is a pain, then I recommend trying Restart Firefox—I have been using it for awhile and it is one handy little shortcut.

And now the plot thickens. That's right folks, I am no longer running the old version of SpellBound at all. This morning I began evaluating the Performancing blog editing extension (an outstanding tool, more on that later) and discovered a sweet replacement, namely the SpellBound Development version. Along with everything you're already used to (plus it fixes a few bugs that I noticed with the older version), you now have spell check as you type (misspelled words are underlined in red), context menu replacements (Ctrl+click on the misspelled word) and a full API so that other extensions (such as the rich text editor provided with Performancing) can take advantage of spell checking. Nice.

You may have noticed of late that blogZero has had something of a browser thread going. Opera 9 is cool, all the new browsers for OS X are great too, but from my point of view nothing beats Firefox for shear power in the form of all these excellent extensions.

Greasemonkey Exposes Access Keys

dwclifton@gmail.com (Douglas Clifton) — Tue, 17 Jan 2006 00:47:00 -0500

Following up on a concept by Jacques Distler, Gez Lemon has posted an article and an amazing little Greasemonkey script that not only exposes any accesskeys that are used by a Web site, it also allows you to edit them the suit your preferences.

Greasemonkey is a most remarkable extension, and could prove incredibly useful for empowering people with disabilities, particularly cognitive difficulties, as it provides a convenient means to repurpose content according to the needs of the visitor.

Well said. Visit: Greasemonkey User Script to Manage Access Keys to learn more and install the script.

Nice work guys!

Web Developer 1.0

dwclifton@gmail.com (Douglas Clifton) — Tue, 03 Jan 2006 23:03:00 -0500

Chris Pederick has just (okay, a few days ago—I don't know how I missed it) released version 1.0 of the Web Developer Toolbar Extension. If you are not familiar with this outstanding piece of work, Wake Up!

For those that are, visit the History page for a complete list of new features. There is also an ongoing discussion and an updated documentation section.

Along with Firefox, the Web Developer extension also supports Flock and Mozilla.

If you are a developer, run don't walk to install or upgrade this must-have suite of tools.

Geo Afflicted

dwclifton@gmail.com (Douglas Clifton) — Sun, 25 Dec 2005 23:36:00 -0500

Hello, my name is Doug, and I am a geotagging addict. They tell me I should admit that I am powerless over this terrible affliction. Perhaps, some day, I will start down that long road to recovery.

In the meantime, I'm having too much fun. If you would like to join in, here are some steps to get you started.

1. Get yourself a Flickr account. Anyone can sign-up for free, and this worked for me for a while. But if you grow tired of the ads, and the monthly bandwidth limits that restrict the number of pictures (or rather the total amount of data) you can upload, then a pro account is less than $25 US per year. Which, when compared to the typical chemical addiction, is dirt-cheap.

2. If you haven't already, install a copy of Firefox. The extensions available for this browser are worth the admission price alone. Which is also free by the way. Many platforms are supported, including Microsoft Windows, Mac OS X, Linux, FreeBSD and other Unix-like operating systems that support a graphical (GUI/desktop) interface.

3. Install Greasemonkey. If you have Firefox 1.5, then make sure you install version 0.6.4 or later. What is Greasemonkey? It's a scripting language that allows developers to modify the look and behavior of any Web site (within reason). Price: Free.

4. Install Google Maps in Flickr (GMiF). Once Greasemonkey is installed, this is as easy as right clicking on the link and selecting "Install User Script..." Free.

5. If you don't have one already, a digital camera is a must. I suppose you could use a conventional camera and scan your prints, but with the ubiquity, price, and selection of digital cameras these days, there really is no reason to stick with the old analog variety. Not free, but they are a lot cheaper and feature-rich when compared to just a few years ago. I have a Sony Cybershot, a nice little pocket-rocket camera.

6. Upload some photos to Flickr. You can use the standard browser interface provided with your Flickr account, or there are a number of tools available to make this easier.

7. Determine the location of your pictures in terms of latitude and longitude (in decimal precision rather than minutes and seconds). An inexpensive GPS handheld unit of the backpacking variety works great for this. I bought my eXplorist 200 (thanks Nick!) for under $100. Or you get an even fancier GPS such as the bluetooth TomTom that interfaces with your PDA. If you really want to go all out, have a look at the Ricoh Pro G3 digital camera, which embeds the geographic metadata using GPS technology right into the JPEG format of each photograph.

8. Geotag your photos. You can either tag each photo as you upload them (or collectively), or tag them once they are already part of your Flickr library. If you don't have a GPS device, all is not lost. If you find the spot on Google Maps or the new beta version of Yahoo! Maps, simply check the URL in the address bar of your browser for the latitude and longitude. But wait! There's an even easier way, since you already have Firefox and Greasemonkey, install the Tags for Geobloggers user script, and the tags needed for your Flickr photos are much easier to access so you can copy and paste them into Flickr. The three essential tags you need are:

geotagged
geo:lat=value
geo:lon=value

Keep in mind that if you are west of the Greenwich Meridian (for example in the United States), the longitude is expressed as a negative value. Likewise, if you are below the Equator (for instance in South America), the latitude is also expressed as a negative value.

9. Now you are ready to enjoy your photos enhanced with geographic metadata using the GMiF Greasemonkey script. View one of your pictures: Above and on the right of each one is a new Gmap button. Click on it and a map appears, replacing the picture. That's right, you don't have to leave Flickr to use this feature! That's the power of Greasemonkey in a nutshell. The photo will appear as a thumbnail in a tooltip pointing at the location on the map. Included with the tooltip are the title of the picture, the latitude and longitude and links to other Flickr and external functions. Along the bottom of the map are all of your geotagged pictures, and a set of controls that allow you to cycle through them, or play them as a slideshow while the map updates to reflect the current image. Neat, eh?

10. Join the Geotagging Flickr group. Now you can load all of your pictures and, from the sidebar, select the group so you drag and drop your photos for everyone in the group to enjoy.

11. Don't forget to check out the pictures from the other enthusiasts in the group! Remember, the tools you now have at hand will work for any photo on Flickr, as long as it is geotagged. It's a fascinating "armchair" way of traveling all over the world, and see it through someone else's camera lens.

12. Share your pictures with friends, family (send them an email with a link) or everyone by making your Flickr photos publicly viewable. By using a link to the Geobloggers Web site in your geotagged photo's description, like this:

<a href="http://www.geobloggers.com/">geotagged</a>

Then anyone can follow the link regardless of which browser they are using and see the mapped location of the picture. Note: Geobloggers was down for retooling at the time of this writing, look for it to be back up soon.

I suppose you can blame me if you become a geotagging addict too. See you at the meetings! Or more likely, the Geotagging Flickr group.

Enjoy your holidays, and don't forget to share some photographs.

Web Developer Ripoff

dwclifton@gmail.com (Douglas Clifton) — Thu, 25 Aug 2005 00:55:13 -0400

On a tip from Forevergeek, I found out today some very disturbing news. A foul and disgusting act has been perpetrated on the hard work done by Chris Pederick, who created the outstanding Web Developer Firefox Extension.

Everyone by now should be aware that I'm a fan of Open Source, and Web Developer is under a GPL license, so anyone can download and use the source code and adapt and improve on it (within the retrictions of the license).

But this is pretty blatant. The company, Aevita, also took the stock icons from Mozilla, used the exact same layout for their toolbar, and even stole large chunks of the help documentation for their own version. Which is built for IE by the way. And they're charging a fee for it. Sigh.

I would recommend visiting the Aevita Web site, and giving them an earful, but the last time I checked it was throwing "Bandwidth Exceeded" errors. Dumbasses.