Aardvark Firefox Extension

The Aardvark Firefox extension 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 an extension (as opposed to running the demo), start it by right-clicking on the page and choosing "Start Aardvark" from the menu. The extension will run until you leave, refresh, or stop it by pressing “Q” for quit.

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 descibed 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
K Kill Delete the selected element permanently (requires RIP extension)
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
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 values from the element (and any contained 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 Show the XPath of the element
H Help Show (or hide) the list of keystrokes

Site designed by Pixel Plain Web Design & Consulting

Things You Can Do With Aardvark

Bookmarklet version:

To run Aardvark as a bookmarklet in Firefox, IE, or Safari, just bookmark the following link:

Aardvark

To do this in Firefox, right click and select "Bookmark this link." In IE, right click and select "Add to Favorites". In Safari, drag the link to the bookmarks bar.

Bookmarklets have many advantages for developers. See the bookmarklet page for more info.