Aardvark Firefox Extension

The Aardvark bookmarklet is a tool for web developers/designers as well as casual users. To quickly see it in action on this page, run the demo.

Using Aardvark

Once you have installed Aardvark as a bookmarklet (it takes about ten seconds!), you may start it at any time by selecting it from the bookmarks menu or toolbar. Aardvark will run until you press the “Q” key to quit, or leave the page or refresh it.

As you glide the mouse over the page, you will see a red rectangle framing each element under the cursor. You will also see a little yellow caption showing the HTML element type and its class or id if they exist. Pressing certain keys on the keyboard (see below) will do various things, as described in the Keystroke list below.

The Keystrokes

You can then press certain keys on the keyboard (as indicated below) to do various things, such as delete the selected element from the page, isolate the element, or move the selection rectangle outward to the containing element. If you forget them, no problem: just remember to press "h" for help.

W Wider Select a wider area. For instance, if you have selected a table cell, pressing W will select the table row
N Narrower Undo the last "Wider" command
Q Quit Quit Aardvark (that is, stop selecting elements), until you restart it from the menu
U Undo Undo the last "remove" or "isolate" command.
R Remove Delete the selected element
I Isolate Delete everything surrounding the selected element
B Black on white Set the element (and all contained elements) to be black text on white background, for readability
C Colorize Sets the element's background to a random color
V View Source Shows the source code of the element (with indenting and color highlighting)
J Javascript Source Generates Javascript code for building the element with W3C DOM techniques. Seriously powerful.
D "De-widthify" Removes any fixed width settings from the element and its children elements
P Paste Insert the last removed element before the current selected element
G Global Make a javascript global variable that points to this element, named "elem1", "elem2", etc.
X XPath Insert the XPath of the element into the Javascript Snippet editor. (what snippet editor you may ask?)
H Help Show (or hide) the list of keystrokes

Things You Can Do With Aardvark

About the old Aardvark Firefox extension:

For now anyway, the Firefox extension is retired. The bookmarklet does everything that it did, and more.

I'm open to having someone maintain it if they want, though. I got tired of having to mess with it every time a new version of Firefox came out.